DOM（Document Object Model）是一种表示HTML或XML文档的标准编程接口，它将文档解析为由节点和对象（例如元素、文本、属性）组成的树形结构，使得开发人员可以使用JavaScript等脚本语言动态地修改文档的内容、结构和样式。
JavaScript中的DOM操作主要包括以下内容：
获取元素：使用document.getElementById()、document.getElementsByTagName()、document.getElementsByClassName()等方法获取HTML页面中的元素。
const element1 = document.getElementById('my-element');const elements2 = document.getElementsByTagName('input');const elements3 = document.getElementsByClassName('my-class');
修改元素的内容和属性：使用element.innerHTML、element.textContent、element.setAttribute()、element.style等属性和方法修改元素的内容和属性。
const element = document.getElementById('my-element');element.innerHTML = '<strong>Hello World!</strong>';element.setAttribute('data-value', '123');element.style.color = 'red';
添加和删除元素：使用element.appendChild()、element.insertBefore()、element.removeChild()等方法添加和删除元素。
const parent = document.getElementById('parent-element');const child = document.createElement('div');child.textContent = 'New Element';parent.appendChild(child);parent.removeChild(child);
监听事件：使用element.addEventListener()方法监听HTML页面中的事件，例如click、input、submit等事件。
const element = document.getElementById('my-element');element.addEventListener('click', function() {console.log('Clicked!');});
代码示例
让我们看一下如何在JavaScript中使用DOM操作来修改HTML页面。下面是一个示例代码：
<!DOCTYPE html><html><head><title>DOM Example</title><style>#my-element {color: blue;}</style></head><body><h1>DOM Example</h1><div id="my-element">Hello World!</div><button id="my-button">Click me!</button><script>// 获取元素const element = document.getElementById('my-element');const button = document.getElementById('my-button');// 修改元素的内容和属性element.innerHTML = '<strong>Hello World!</strong>';element.setAttribute('data-value', '123');element.style.color = 'red';// 添加和删除元素const parent = document.body;const child = document.createElement('div');child.textContent = 'New Element';parent.appendChild(child);parent.removeChild(child);// 监听事件button.addEventListener('click', function() {console.log('Clicked!');});</script></body></html>
在这个示例中，我们首先获取了HTML页面中的元素，然后使用DOM操作来修改它们的内容、属性和样式。我们还添加了一个新的元素，并在点击按钮时输出一条消息。通过这些操作，我们可以很方便地使用JavaScript来动态地修改HTML页面的内容和样式，从而实现更加丰富和交互的Web应用程序。
