DOM（Document Object Model，文档对象模型）是HTML和XML文档的编程接口。它将文档解析为一个由节点和对象（包含属性和方法）组成的结构集合。通过DOM，开发者可以使用JavaScript来操作HTML文档的内容、结构和样式。
DOM的核心思想是将整个HTML文档视为一个树形结构，每个HTML元素都是一个节点（Node）。这些节点可以是元素节点、文本节点、属性节点等。通过DOM，开发者可以访问和操作这些节点，从而实现动态的网页交互。
DOM树是由HTML文档中的元素、属性和文本组成的层次结构。每个HTML标签在DOM中都是一个节点，节点之间通过父子关系连接。例如：
<!DOCTYPE html>
<html>
<head>
<title>DOM示例</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>这是一个段落。</p>
</body>
</html>
在这个例子中，<html>是根节点，<head>和<body>是它的子节点，<title>和<h1>、<p>分别是<head>和<body>的子节点。
在JavaScript中，可以通过多种方式获取DOM元素：
document.getElementById(id): 通过元素的id属性获取元素。 const element = document.getElementById('myId');
document.getElementsByClassName(className): 通过元素的class属性获取元素集合。 const elements = document.getElementsByClassName('myClass');
document.getElementsByTagName(tagName): 通过标签名获取元素集合。 const elements = document.getElementsByTagName('div');
document.querySelector(selector): 通过CSS选择器获取第一个匹配的元素。 const element = document.querySelector('.myClass');
document.querySelectorAll(selector): 通过CSS选择器获取所有匹配的元素集合。 const elements = document.querySelectorAll('div.myClass');
可以通过以下方式修改元素的内容：
innerHTML: 获取或设置元素的HTML内容。 element.innerHTML = '<strong>新内容</strong>';
textContent: 获取或设置元素的文本内容。 element.textContent = '新文本内容';
可以通过以下方式修改元素的属性：
setAttribute(name, value): 设置元素的属性。 element.setAttribute('class', 'newClass');
getAttribute(name): 获取元素的属性值。 const className = element.getAttribute('class');
removeAttribute(name): 移除元素的属性。 element.removeAttribute('class');
可以通过以下方式修改元素的样式：
style: 直接修改元素的样式属性。 element.style.color = 'red';
element.style.backgroundColor = 'yellow';
classList: 操作元素的类名。 element.classList.add('newClass'); // 添加类名
element.classList.remove('oldClass'); // 移除类名
element.classList.toggle('active'); // 切换类名
可以通过以下方式创建和插入新元素：
createElement(tagName): 创建一个新的元素节点。 const newElement = document.createElement('div');
appendChild(node): 将新元素插入到父元素的末尾。 parentElement.appendChild(newElement);
insertBefore(newNode, referenceNode): 将新元素插入到参考节点之前。 parentElement.insertBefore(newElement, referenceElement);
可以通过以下方式删除元素：
removeChild(node): 从父元素中移除子元素。 parentElement.removeChild(childElement);
remove(): 直接从DOM中移除元素。 element.remove();
可以通过以下方式为元素添加事件监听器：
addEventListener(event, callback): 为元素添加事件监听器。 element.addEventListener('click', function() {
alert('元素被点击了！');
});
removeEventListener(event, callback): 移除事件监听器。 element.removeEventListener('click', callbackFunction);
DOM是JavaScript操作HTML文档的核心接口，通过DOM，开发者可以动态地修改网页的内容、结构和样式。掌握常用的DOM操作，如获取元素、修改内容、属性和样式、创建和插入元素、删除元素以及事件处理，是前端开发的基础技能之一。通过灵活运用这些操作，开发者可以创建出更加动态和交互性强的网页应用。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
