DOM（文档对象模型）是JavaScript操作网页的接口，通过DOM可以对网页中的元素进行增删改查操作。网页中的每个元素都被视为一个对象，通过操作这些对象可以实现对网页的动态修改和交互。
DOM的层级结构
DOM以树形结构的形式表示网页的层级关系，树的根节点是document对象，它代表整个文档。文档对象下面是html元素，html元素下面是head元素和body元素，以此类推。
选择元素
在JavaScript中，我们可以通过多种方式来选择网页中的元素，常见的方式有以下几种：
通过元素id选择
可以通过元素的id属性选择元素，使用document.getElementById()方法，该方法返回指定id的元素对象。
const element = document.getElementById('elementId');
通过标签名选择
可以通过元素的标签名选择元素，使用document.getElementsByTagName()方法，该方法返回指定标签名的元素对象集合。
const elements = document.getElementsByTagName('tagName');
通过类名选择
可以通过元素的类名选择元素，使用document.getElementsByClassName()方法，该方法返回指定类名的元素对象集合。
const elements = document.getElementsByClassName('className');
通过CSS选择器选择
可以通过CSS选择器选择元素，使用document.querySelector()方法选择第一个匹配的元素，使用document.querySelectorAll()方法选择所有匹配的元素。
const element = document.querySelector('selector'); const elements = document.querySelectorAll('selector');
操作元素
通过选择元素之后，我们可以对选中的元素进行各种操作，常见的操作有以下几种：
修改元素的样式
可以通过修改元素的style属性来改变元素的样式。
element.style.color = 'red';
修改元素的内容
可以通过修改元素的innerHTML属性来改变元素的内容。
element.innerHTML = '新的内容';
添加元素
可以通过创建新的元素对象，并使用appendChild()方法将新元素添加到指定元素的子元素列表中。
const newElement = document.createElement('tagName'); parentElement.appendChild(newElement);
删除元素
可以使用removeChild()方法将指定的子元素从父元素中删除。
parentElement.removeChild(childElement);
事件处理
DOM允许我们对元素的各种交互行为进行事件处理，常见的事件有以下几种：
点击事件
当元素被点击时触发。
element.addEventListener('click', function() { // 处理点击事件的代码 });
鼠标移入移出事件
当鼠标移入/移出元素时触发。
element.addEventListener('mouseenter', function() { // 处理鼠标移入事件的代码 });
element.addEventListener('mouseleave', function() { // 处理鼠标移出事件的代码 });
键盘事件
当键盘按键被按下时触发。
element.addEventListener('keydown', function(event) { // 处理键盘按下事件的代码 });
总结
DOM是JavaScript操作网页的重要接口，通过DOM可以实现对网页元素的增删改查操作，以及对元素的交互事件处理。掌握DOM的基本用法，可以为网页增加丰富的交互体验和动态效果。
