JavaScript之DOM的知识点有哪些

目录

1. DOM简介
2. DOM树结构
3. DOM节点类型
4. DOM操作
   • 获取元素
   • 创建元素
   • 插入元素
   • 删除元素
   • 修改元素
5. DOM事件
   • 事件类型
   • 事件处理程序
   • 事件冒泡与捕获
6. DOM样式操作
   • 内联样式
   • 类名操作
7. DOM属性操作
   • 获取属性
   • 设置属性
   • 删除属性
8. DOM遍历
   • 父节点
   • 子节点
   • 兄弟节点
9. DOM性能优化
   • 减少DOM操作
   • 使用文档片段
   • 事件委托
10. 总结

DOM简介

DOM（Document Object Model，文档对象模型）是JavaScript与HTML文档交互的接口。通过DOM，JavaScript可以访问和操作HTML文档中的元素、属性和样式。DOM将HTML文档解析为一个树形结构，每个节点都是一个对象，JavaScript可以通过这些对象来动态地修改文档内容、结构和样式。

DOM树结构

DOM树是由HTML文档中的元素、属性和文本节点组成的树形结构。每个节点都是一个对象，节点之间的关系通过父子关系和兄弟关系来表示。

• 文档节点（Document）：整个HTML文档的根节点。
• 元素节点（Element）：HTML标签，如<div>、<p>等。
• 属性节点（Attribute）：HTML标签的属性，如class、id等。
• 文本节点（Text）：HTML标签中的文本内容。

DOM节点类型

DOM节点有多种类型，常见的节点类型包括：

• 元素节点（Element Node）：表示HTML标签。
• 文本节点（Text Node）：表示HTML标签中的文本内容。
• 属性节点（Attribute Node）：表示HTML标签的属性。
• 注释节点（Comment Node）：表示HTML文档中的注释。
• 文档节点（Document Node）：表示整个HTML文档。

DOM操作

获取元素

JavaScript提供了多种方法来获取DOM元素：

• document.getElementById(id)：通过元素的id属性获取元素。
• document.getElementsByClassName(className)：通过元素的class属性获取元素集合。
• document.getElementsByTagName(tagName)：通过元素的标签名获取元素集合。
• document.querySelector(selector)：通过CSS选择器获取第一个匹配的元素。
• document.querySelectorAll(selector)：通过CSS选择器获取所有匹配的元素集合。

// 获取id为"myElement"的元素
const elementById = document.getElementById('myElement');

// 获取class为"myClass"的元素集合
const elementsByClass = document.getElementsByClassName('myClass');

// 获取所有<p>标签的元素集合
const elementsByTag = document.getElementsByTagName('p');

// 获取第一个匹配的CSS选择器元素
const elementByQuery = document.querySelector('.myClass');

// 获取所有匹配的CSS选择器元素集合
const elementsByQueryAll = document.querySelectorAll('.myClass');

创建元素

JavaScript可以通过document.createElement(tagName)方法创建新的元素节点。

// 创建一个新的<div>元素
const newDiv = document.createElement('div');

// 设置新元素的属性
newDiv.id = 'newDiv';
newDiv.className = 'myClass';

// 设置新元素的文本内容
newDiv.textContent = '这是一个新的div元素';

插入元素

创建新元素后，可以通过以下方法将其插入到DOM树中：

• parentNode.appendChild(childNode)：将子节点插入到父节点的末尾。
• parentNode.insertBefore(newNode, referenceNode)：将新节点插入到参考节点之前。

// 获取父元素
const parentElement = document.getElementById('parentElement');

// 将新元素插入到父元素的末尾
parentElement.appendChild(newDiv);

// 将新元素插入到参考元素之前
const referenceElement = document.getElementById('referenceElement');
parentElement.insertBefore(newDiv, referenceElement);

删除元素

可以通过parentNode.removeChild(childNode)方法从DOM树中删除元素。

// 获取要删除的元素
const elementToRemove = document.getElementById('elementToRemove');

// 删除元素
elementToRemove.parentNode.removeChild(elementToRemove);

修改元素

可以通过以下方法修改元素的属性、样式和内容：

• element.setAttribute(name, value)：设置元素的属性。
• element.removeAttribute(name)：删除元素的属性。
• element.style.property = value：设置元素的样式。
• element.textContent = text：设置元素的文本内容。
• element.innerHTML = html：设置元素的HTML内容。

// 设置元素的id属性
element.setAttribute('id', 'newId');

// 删除元素的class属性
element.removeAttribute('class');

// 设置元素的背景颜色
element.style.backgroundColor = 'red';

// 设置元素的文本内容
element.textContent = '新的文本内容';

// 设置元素的HTML内容
element.innerHTML = '<span>新的HTML内容</span>';

DOM事件

事件类型

DOM事件是用户与网页交互时触发的动作，常见的事件类型包括：

• 鼠标事件：click、dblclick、mouseover、mouseout等。
• 键盘事件：keydown、keyup、keypress等。
• 表单事件：submit、change、focus、blur等。
• 窗口事件：load、resize、scroll等。

事件处理程序

可以通过以下方式为元素添加事件处理程序：

• element.onclick = function() {}：直接为元素的onclick属性赋值。
• element.addEventListener(event, handler, useCapture)：使用addEventListener方法添加事件监听器。

// 直接为元素的onclick属性赋值
element.onclick = function() {
    console.log('元素被点击了');
};

// 使用addEventListener方法添加事件监听器
element.addEventListener('click', function() {
    console.log('元素被点击了');
}, false);

事件冒泡与捕获

事件传播分为三个阶段：捕获阶段、目标阶段和冒泡阶段。

• 捕获阶段：事件从文档根节点向下传播到目标元素。
• 目标阶段：事件到达目标元素。
• 冒泡阶段：事件从目标元素向上传播到文档根节点。

可以通过addEventListener方法的第三个参数来控制事件是在捕获阶段还是冒泡阶段触发。

// 在捕获阶段触发事件
element.addEventListener('click', function() {
    console.log('捕获阶段');
}, true);

// 在冒泡阶段触发事件
element.addEventListener('click', function() {
    console.log('冒泡阶段');
}, false);

DOM样式操作

内联样式

可以通过element.style属性直接操作元素的内联样式。

// 设置元素的背景颜色
element.style.backgroundColor = 'red';

// 设置元素的字体大小
element.style.fontSize = '16px';

类名操作

可以通过element.className属性或element.classList方法来操作元素的类名。

// 设置元素的类名
element.className = 'myClass';

// 添加类名
element.classList.add('newClass');

// 删除类名
element.classList.remove('oldClass');

// 切换类名
element.classList.toggle('active');

DOM属性操作

获取属性

可以通过element.getAttribute(name)方法获取元素的属性值。

// 获取元素的id属性值
const id = element.getAttribute('id');

设置属性

可以通过element.setAttribute(name, value)方法设置元素的属性值。

// 设置元素的id属性值
element.setAttribute('id', 'newId');

删除属性

可以通过element.removeAttribute(name)方法删除元素的属性。

// 删除元素的class属性
element.removeAttribute('class');

DOM遍历

父节点

可以通过element.parentNode属性获取元素的父节点。

// 获取元素的父节点
const parentNode = element.parentNode;

子节点

可以通过element.childNodes属性获取元素的子节点集合。

// 获取元素的子节点集合
const childNodes = element.childNodes;

兄弟节点

可以通过element.previousSibling和element.nextSibling属性获取元素的前一个和后一个兄弟节点。

// 获取元素的前一个兄弟节点
const previousSibling = element.previousSibling;

// 获取元素的后一个兄弟节点
const nextSibling = element.nextSibling;

DOM性能优化

减少DOM操作

频繁的DOM操作会导致页面重绘和回流，影响性能。可以通过以下方式减少DOM操作：

• 批量操作：将多个DOM操作合并为一个操作。
• 使用文档片段：使用document.createDocumentFragment()创建文档片段，将多个元素插入到文档片段中，最后一次性插入到DOM树中。

// 创建文档片段
const fragment = document.createDocumentFragment();

// 将多个元素插入到文档片段中
for (let i = 0; i < 100; i++) {
    const newElement = document.createElement('div');
    newElement.textContent = '元素' + i;
    fragment.appendChild(newElement);
}

// 将文档片段插入到DOM树中
document.body.appendChild(fragment);

使用文档片段

文档片段是一个轻量级的DOM节点容器，可以在其中插入多个元素，最后一次性插入到DOM树中，减少页面重绘和回流的次数。

// 创建文档片段
const fragment = document.createDocumentFragment();

// 将多个元素插入到文档片段中
for (let i = 0; i < 100; i++) {
    const newElement = document.createElement('div');
    newElement.textContent = '元素' + i;
    fragment.appendChild(newElement);
}

// 将文档片段插入到DOM树中
document.body.appendChild(fragment);

事件委托

事件委托是将事件处理程序绑定到父元素上，利用事件冒泡机制处理子元素的事件。这样可以减少事件处理程序的数量，提高性能。

// 将事件处理程序绑定到父元素上
document.getElementById('parentElement').addEventListener('click', function(event) {
    // 判断事件的目标元素
    if (event.target.tagName === 'LI') {
        console.log('列表项被点击了');
    }
});

总结

DOM是JavaScript与HTML文档交互的核心接口，通过DOM可以动态地修改文档内容、结构和样式。掌握DOM操作、事件处理、样式操作、属性操作和遍历等知识点，是前端开发的基础。在实际开发中，合理使用DOM性能优化技巧，可以提高页面的性能和用户体验。