JavaScript – 传统 DOM

DOM，即文档对象模型，是JavaScript常用的API之一。它允许JavaScript对网页文档进行操作，即增删改查网页的HTML、CSS和JS内容。DOM由层层嵌套的节点组成，从根节点document开始，一直延伸至所有叶子节点。传统的DOM操作通过遍历节点树来完成元素的增删改查。

DOM基础

获取DOM元素

使用document.getElementById可以获取指定ID的元素，例如：

<div id="main">这是主要内容</div>

let mainEle = document.getElementById('main');
console.log(mainEle.innerText); // 输出 '这是主要内容'

使用document.querySelector可以获取第一个满足条件的元素，其参数是CSS选择器，例如：

<div class="box">这是一个容器</div>
<div class="box">这也是一个容器</div>

let boxEle = document.querySelector('.box');
console.log(boxEle.innerText); // 输出 '这是一个容器'

使用document.querySelectorAll可以获取所有满足条件的元素，其返回结果是NodeList对象，可以像数组一样遍历访问，例如：

<div class="item">第一个</div>
<div class="item">第二个</div>
<div class="item">第三个</div>

let itemEles = document.querySelectorAll('.item');
itemEles.forEach((ele, index) => console.log(`第{index + 1}个元素的文本内容为：{ele.innerText}`));
// 输出：
// 第1个元素的文本内容为：第一个
// 第2个元素的文本内容为：第二个
// 第3个元素的文本内容为：第三个

修改DOM元素

使用innerHTML可以修改元素的HTML，并且支持旧浏览器：

<div id="demo">这是原始内容</div>

document.getElementById('demo').innerHTML = '这是新内容';

使用innerText或textContent可以修改元素的文本内容，它们之间的差别在于innerText会自动去掉HTML标签，而textContent不会：

<div id="demo">这是原始内容，<span>含有</span>HTML标签</div>

document.getElementById('demo').innerText = '这是新内容，<span>不含</span>HTML标签';
document.getElementById('demo').textContent = '这是新内容，<span>含有</span>HTML标签';

使用setAttribute可以修改元素的属性:

<div id="demo">这是原始内容，<span>含有</span>HTML标签，<img src=""></div>

document.getElementById('demo').setAttribute('title', '这是一个标题');
document.getElementById('demo').setAttribute('class', 'box');
document.getElementById('demo').setAttribute('style', 'color:red;');
document.getElementById('demo').setAttribute('src', 'http://example.com/image.png');

创建DOM元素

使用createElement可以创建元素，然后使用appendChild可以将它插入到指定的元素内部：

<div id="container"></div>

let newEle = document.createElement('p');
newEle.innerText = '这是新创建的元素';
document.getElementById('container').appendChild(newEle);

DOM事件

在传统的DOM操作中，事件机制是非常重要的，可以通过事件来响应用户的操作，例如点击、鼠标悬浮等等。在常见的JS库和框架中，事件机制已经被封装得很完善了，但是这里我们仍然需要对传统DOM事件进行基本的了解。

添加事件

使用addEventListener可以添加事件，其参数分别为事件类型、回调函数和可选的选项：

<button id="btn">点击我</button>

document.getElementById('btn').addEventListener('click', function() {
  console.log('按钮被点击了');
});

移除事件

使用removeEventListener可以移除事件，其参数与addEventListener相同：

<button id="btn">点击我</button>

let clickHandler = function() {
  console.log('按钮被点击了');
};
document.getElementById('btn').addEventListener('click', clickHandler);
document.getElementById('btn').removeEventListener('click', clickHandler);

事件冒泡和捕获

DOM事件会从当前被点击的元素开始向上冒泡到根节点，这称为事件冒泡。而事件捕获恰恰相反，从根节点开始向下捕获到当前被点击的元素。在传统DOM事件机制中，addEventListener的第三个参数可以用来控制事件是在冒泡阶段还是捕获阶段发生：

<div id="outer">
  <div id="inner">内部元素</div>
</div>

document.getElementById('outer').addEventListener('click', function() {
  console.log('外层元素被点击了');
}, true); // 第三个参数为true表示在捕获阶段处理事件

document.getElementById('inner').addEventListener('click', function() {
  console.log('内层元素被点击了');
}, false); // 第三个参数为false表示在冒泡阶段处理事件

DOM属性

在传统DOM操作中，元素的属性是经常被操作的内容，例如获取元素的class、修改元素的src等等。下面是一些常用的属性操作方式。

获取属性

使用元素的getAttribute方法可以获取指定属性的值：

<img id="test" src="http://example.com/image.png" title="这是一个测试">

console.log(document.getElementById('test').getAttribute('src')); // 输出 'http://example.com/image.png'
console.log(document.getElementById('test').getAttribute('title')); // 输出 '这是一个测试'

修改属性

使用元素的setAttribute方法可以修改指定属性的值：

<img id="test" src="http://example.com/image1.png" title="这是一个测试">

document.getElementById('test').setAttribute('src', 'http://example.com/image2.png');
document.getElementById('test').setAttribute('title', '这是另一个测试');

删除属性

使用元素的removeAttribute方法可以删除指定属性：

<img id="test" src="http://example.com/image.png" title="这是一个测试">

document.getElementById('test').removeAttribute('title');

结论

传统的DOM操作虽然比较繁琐，但是仍然是JS开发中不可避免的一环。在现代JS框架的帮助下，我们可以更加快捷高效地完成DOM操作。但是对于一些特殊需求，我们也需要掌握一些传统的DOM操作技巧。希望本篇教程能够对大家有所帮助。