DOM（Document Object Model，文档对象模型）是JavaScript与HTML文档交互的接口。通过DOM，JavaScript可以访问和操作HTML文档中的元素、属性和样式。DOM将HTML文档解析为一个树形结构，每个节点都是一个对象，JavaScript可以通过这些对象来动态地修改文档内容、结构和样式。
DOM树是由HTML文档中的元素、属性和文本节点组成的树形结构。每个节点都是一个对象，节点之间的关系通过父子关系和兄弟关系来表示。
<div>、<p>等。class、id等。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事件是用户与网页交互时触发的动作，常见的事件类型包括：
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);
可以通过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');
可以通过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');
可以通过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操作：
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性能优化技巧，可以提高页面的性能和用户体验。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
