DOM 基本方法

DOM（Document Object Model，文档对象模型）是一套对 HTML 和 XML 文档的编程接口，它把整个文档抽象成一组“节点”和“对象”结构（包括元素、属性、文本等），开发者可以利用 DOM API 对页面进行增删改查等操作。

DOM 的基本方法主要有以下几类：

1. 获取元素对象

getElementById()

getElementById(id) 方法是通过元素的 ID 来获取元素对象，返回值是一个 Element 类型的对象。如果 ID 不存在或重复，则返回 null。

示例：

<!-- HTML 代码 -->
<div id="box">This is a box.</div>

// JavaScript 代码
const box = document.getElementById('box');
console.log(box.innerHTML); // This is a box.

getElementsByTagName()

getElementsByTagName(tagName) 方法是通过标签名来获取元素对象，返回值是一个 HTMLCollection 类型的对象，包含了所有带有指定标签名的元素。

示例：

<!-- HTML 代码 -->
<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

// JavaScript 代码
const lis = document.getElementsByTagName('li');
for (let i = 0; i < lis.length; i++) {
  console.log(lis[i].innerHTML); // Apple, Banana, Orange
}

getElementsByClassName()

getElementsByClassName(className) 方法是通过类名来获取元素对象，返回值是一个 HTMLCollection 类型的对象，包含了所有带有指定类名的元素。

示例：

<!-- HTML 代码 -->
<ul>
  <li class="fruit">Apple</li>
  <li class="fruit">Banana</li>
  <li>Orange</li>
</ul>

// JavaScript 代码
const fruits = document.getElementsByClassName('fruit');
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i].innerHTML); // Apple, Banana
}

querySelector()

querySelector(selector) 方法是通过 CSS 选择器来获取元素对象，返回值是一个 Element 类型的对象，返回符合选择器的第一个元素。

示例：

<!-- HTML 代码 -->
<ul>
  <li class="fruit">Apple</li>
  <li class="fruit">Banana</li>
  <li>Orange</li>
</ul>

// JavaScript 代码
const apple = document.querySelector('.fruit');
console.log(apple.innerHTML); // Apple

querySelectorAll()

querySelectorAll(selector) 方法是通过 CSS 选择器来获取元素对象，返回值是一个 NodeList 类型的对象，包含了所有符合选择器的元素。

示例：

<!-- HTML 代码 -->
<ul>
  <li class="fruit">Apple</li>
  <li class="fruit">Banana</li>
  <li>Orange</li>
</ul>

// JavaScript 代码
const fruits = document.querySelectorAll('.fruit');
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i].innerHTML); // Apple, Banana
}

2. 修改元素属性和内容

innerHTML

innerHTML 属性用于获取或设置元素的 HTML 内容。如果将其设置为一个新的字符串，则会替换掉原有的 HTML 内容。

示例：

<!-- HTML 代码 -->
<div id="box">This is a box.</div>

// JavaScript 代码
const box = document.getElementById('box');
console.log(box.innerHTML); // This is a box.
box.innerHTML = 'Hello, world!';
console.log(box.innerHTML); // Hello, world!

setAttribute()

setAttribute(name, value) 方法用于给元素设置一个属性和属性值。如果该属性已经存在，则会替换原来的值。

示例：

<!-- HTML 代码 -->
<img id="avatar" alt="avatar" src="/default.jpg">

// JavaScript 代码
const avatar = document.getElementById('avatar');
avatar.setAttribute('src', '/myavatar.jpg');

getAttribute()

getAttribute(name) 方法用于获取元素的指定属性值。如果该属性不存在，则会返回 null。

示例：

<!-- HTML 代码 -->
<img id="avatar" alt="avatar" src="/default.jpg">

// JavaScript 代码
const avatar = document.getElementById('avatar');
console.log(avatar.getAttribute('src')); // /default.jpg

3. 创建和修改元素

createElement()

createElement(tagName) 方法用于创建一个新的元素节点，返回值是一个 Element 类型的对象。

示例：

// JavaScript 代码
const p = document.createElement('p');
p.innerHTML = 'Hello, world!';
document.body.appendChild(p);

appendChild()

appendChild(child) 方法用于在指定元素的末尾插入一个新的子元素。

示例：

<!-- HTML 代码 -->
<div id="box">This is a box.</div>

// JavaScript 代码
const text = document.createElement('p');
text.innerHTML = 'Hello, world!';
const box = document.getElementById('box');
box.appendChild(text);

以上是 DOM 基本方法的详细讲解。通过这些基本方法，我们可以灵活地操作网页的元素，完成各种动态的效果和功能。