使用 JavaScript 操作 HTML DOM

简介

DOM（文档对象模型）是一个接口，您可以通过它访问和操作网站的内容、结构和样式。

我们将讨论以下主题：

什么是 DOM？
我们怎样才能操纵它？

什么是 DOM？

当我们在浏览器中打开 HTML 文件时，浏览器会创建 DOM，因此 DOM 是 HTML 文档的表示。

HTML 元素，例如<body></body>、<p></p>，被称为节点。节点彼此之间存在关联，并构成树状结构。

DOM 的根称为document。
通过使用 JavaScript，可以访问和操作 DOM。

访问节点/HTML元素

访问单个节点有多种方法。

`querySelector`

querySelector是一种输入完整查询并返回第一个出现结果的方法。

// access the body tag
document.querySelector("body");

// access the "button"-class
document.querySelector(".button");

// access the "footer"-id
document.querySelector("#footer");

如我们所见，我们可以通过 tag( body)、class( .button) 或 id( #footer) 访问元素。

`querySelectorAll`

querySelectorAll是一种输入完整查询并返回所有出现结果的方法。

// access the "button"-class
document.querySelectorAll(".button");

`getElementById`

getElementById是一种获取具有特定 id 的单个元素的方法。

document.getElementById("header");

我们获取了 id 为的元素header。使用时
不需要like 。#querySelector

`getElementsByClassName`

getElementsByClassName是一种获取具有特定类的所有元素的方法。

document.getElementsByClassName("button");

我们获取具有类的元素button。使用时
不需要like 。.querySelector

正如我们在方法名称中看到的那样，Elements是复数，因此我们得到一个 HTML 元素集合，而不是单个元素，即使它是空的。

`getElementsByTagName`

getElementsByTagName是一种获取具有特定 HTML 标签的所有元素的方法。

document.getElementsByTagName("p");

我们获取具有 HTML 标签的元素p。

正如我们在方法名称中看到的那样，Elements是复数，因此我们得到一个 HTML 元素集合，而不是单个元素，即使它是空的。

我该用什么？

我使用querySelector和querySelectorAll，因为两者都可以与标签、类和 ID 一起使用。
我不想在将改为时更改多id行class。

有大量遗留和转换的代码，因此您也应该知道如何使用所有其他方法。

更复杂的查询

有时你必须找到更复杂的东西

// a tag with a class
document.querySelector("body.main"); 
// <body class="main">

// a class as a child in a tag
document.querySelector("body > .text"); 
// <body><p class="text">...</p></body>

// a class anywhere in a tag
document.querySelector("body .text"); 
// <body><section><p class="text">...</p></section></body>

// a parent
document.querySelector("body").parentNode;

// all children
document.querySelector("body").childNodes;

// first child
document.querySelector("body").firstChild;

// last child
document.querySelector("body").lastChild;

// previous sibling
document.querySelector("body").previousSibling;

// next sibling
document.querySelector("body").nextSibling;

操作 DOM 中的元素

// change text content of a node
document.querySelector(".text").textContent = "Hello";

// change HTML content
document.querySelector(".text").innerHTML = "<p>Hello</p>";

// change source of an image
document.querySelector(".logo").src = "lion.jpeg";

在 DOM 中创建新元素

// create a new element and store it into a variable
const newParagraph = document.createElement("p");

// add text to the newly created paragraph
newParagraph.textContent = "Hello";

// find container where the new paragraph should live in
const container = document.querySelector("body");

// add new paragraph to container
container.appendChild(newParagraph);

向 DOM 添加事件监听器

<!-- a simple button -->
<button class="my-cool-button">
  Click Me
</button>

// find the button in the DOM by using the class
const myButton = document.querySelector(".my-cool-button");

// add a listener to the button, that waits for a "click" event,
// then run the following function
myButton.addEventListener("click", function() {
  alert("Hi");
});

结尾

这些只是使用 DOM 的几种方法，可以为您提供一个小的入门知识。

如果您想深入了解该主题，请阅读这本免费书籍。

文章来源：https://dev.to/miku86/html-dom-manipulation-with-javascript-g1o