JS选取DOM元素的简单方法

下面是JS选取DOM元素的简单方法的完整攻略：

1. 使用document.getElementById()

文档中的每个HTML元素都可以通过给定的“id”属性进行标识。要使用JS选取这些元素，可以使用document.getElementById()方法。该方法接收一个参数，即HTML元素的“id”属性的值。下面是一个示例：

// 通过id选取元素
const header = document.getElementById("header");
header.style.color = "red";

在这个示例中，我们使用id为“header”的元素，并将其文字颜色设置为红色。

2. 使用document.querySelector()

“querySelector()”方法可以使用CSS选择器选取单个HTML元素。下面是一个示例：

// 通过class选取元素
const firstParagraph = document.querySelector(".paragraph");
firstParagraph.style.fontSize = "20px";

在这个示例中，我们使用class为“paragraph”的元素，并将其字体大小设置为20像素。

3. 使用document.querySelectorAll()

“querySelectorAll()”方法可以选取所有与指定选择器匹配的元素。下面是一个示例：

// 通过标签名选取多个元素
const listItems = document.querySelectorAll("li");
listItems.forEach(item => {
  item.style.backgroundColor = "yellow";
});

在这个示例中，我们使用标记为“li”的元素集合，并将其背景颜色设置为黄色。

4. 使用document.getElementsByTagName()

“getElementsByTagName()”方法选取指定标记的所有HTML元素。下面是一个示例：

// 选取所有h1元素
const headings = document.getElementsByTagName("h1");
for (let i = 0; i < headings.length; i++) {
  headings[i].style.fontWeight = "bold";
}

在这个示例中，我们使用标记为“h1”的元素集合，并将其字体加粗。

总之，使用这些方法，我们可以轻松地在JS中选取DOM元素。