DOM 方法学习笔记

1. getElementById()

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

javascriptCopy Code
// 获取 ID 为 "example" 的元素节点
const element = document.getElementById('example');

2. getElementsByTagName()

getElementsByTagName() 方法可返回包含带有指定标签名称的所有元素的节点列表（集合/NodeList 对象）。

javascriptCopy Code
// 获取所有 <p> 元素的 NodeList 对象
const pElements = document.getElementsByTagName('p');

// 遍历 NodeList 对象并修改文本内容
for (let i = 0; i < pElements.length; i++) {
  pElements[i].textContent = '修改后的文本内容';
}

3. getElementsByClassName()

getElementsByClassName() 方法可返回带有指定 class 名称的所有元素的 NodeList 对象。

javascriptCopy Code
// 获取所有带有 "example" class 的元素的 NodeList 对象
const elements = document.getElementsByClassName('example');

// 遍历 NodeList 对象并修改样式
for (let i = 0; i < elements.length; i++) {
  elements[i].style.color = 'red';
}

4. querySelector()

querySelector() 方法可返回文档中匹配指定 CSS 选择器的第一个元素。

javascriptCopy Code
// 获取第一个 class 为 "example" 的 <p> 元素
const element = document.querySelector('p.example');

// 修改文本和样式
element.textContent = '修改后的文本内容';
element.style.color = 'red';

5. querySelectorAll()

querySelectorAll() 方法可返回文档中匹配指定 CSS 选择器的所有元素的静态 NodeList 对象。

javascriptCopy Code
// 获取所有 class 为 "example" 的 <p> 元素的 NodeList 对象
const elements = document.querySelectorAll('p.example');

// 遍历 NodeList 对象并修改样式
for (let i = 0; i < elements.length; i++) {
  elements[i].style.color = 'red';
}

以上是常用的 DOM 方法，它们能够帮助我们更加方便地获取和操作 HTML 文档中的元素。