如何利用JavaScript高效选择HTML元素？

JavaScript 选择 HTML 元素

JavaScript 提供了多种方法来选择和操作 HTML 元素，以下是一些常用的方法：

1.getElementById

通过元素的 ID 属性获取单个元素。

var element = document.getElementById("myElementId");

2.getElementsByClassName

通过元素的 class 属性获取一组元素。

var elements = document.getElementsByClassName("myClassName");

3.getElementsByTagName

通过元素的标签名获取一组元素。

var elements = document.getElementsByTagName("p");

4.querySelector

使用 CSS 选择器获取第一个匹配的元素。

var element = document.querySelector(".myClassName");

5.querySelectorAll

使用 CSS 选择器获取所有匹配的元素。

var elements = document.querySelectorAll(".myClassName");

常见问题与解答

问题1: 如何修改一个已选中的 HTML 元素的内容？

答案： 你可以使用innerHTML 或textContent 属性来修改元素的内容，要更改一个具有 ID "myElement" 的元素的内容，你可以这样做：

document.getElementById("myElement").innerHTML = "新的内容";

问题2: 如何使用 JavaScript 动态添加一个新的 HTML 元素？

答案： 你可以使用createElement 方法创建一个新的元素，然后使用appendChild 或insertBefore 将其添加到文档中，要在 body 末尾添加一个新的段落，你可以这样做：

var newParagraph = document.createElement("p");
newParagraph.textContent = "这是一个新的段落。";
document.body.appendChild(newParagraph);