DOM HTML 学习笔记
什么是 DOM？
DOM，即 Document Object Model（文档对象模型），是 HTML 文档的编程接口。它将 HTML 文档解析成一个由节点和对象（包括元素、属性、文本等）组成的结构集合。开发者可以使用 DOM 提供的方法和属性来操作这些节点和对象，实现对 HTML 页面的动态变化。
DOM 节点
元素节点
元素节点代表 HTML 页面中的元素，如 <p>, <div>, <body> 等。可以使用 document.createElement() 方法创建新的元素节点。
javascriptCopy Codeconst newElement = document.createElement('p');
属性节点
属性节点代表 HTML 元素的特性，如 id, class, style 等。可以使用 element.getAttribute() 和 element.setAttribute() 方法获取和设置元素的属性。
javascriptCopy Code// 获取元素属性
const idValue = element.getAttribute('id');
// 设置元素属性
element.setAttribute('class', 'box');
文本节点
文本节点代表 HTML 文档中的文本内容。可以使用 document.createTextNode() 方法创建新的文本节点。
javascriptCopy Codeconst newText = document.createTextNode('Hello, World!');
DOM 操作
获取元素
可以使用 document.getElementById() 方法获取页面中的元素节点。
htmlCopy Code<div id="example">Hello, World!</div>
javascriptCopy Codeconst exampleEl = document.getElementById('example');
添加/移除元素
可以使用 element.appendChild() 方法向元素节点添加子元素节点。
javascriptCopy Codeconst newElement = document.createElement('p');
exampleEl.appendChild(newElement);
可以使用 element.removeChild() 方法从元素节点中移除子元素节点。
javascriptCopy CodeexampleEl.removeChild(newElement);
修改元素属性和内容
可以使用 element.setAttribute() 方法修改元素属性。
javascriptCopy CodeexampleEl.setAttribute('class', 'box');
可以使用 element.innerHTML 属性或 element.createTextNode() 方法修改元素内容。
javascriptCopy CodeexampleEl.innerHTML = 'Hello, DOM!';
javascriptCopy Codeconst newText = document.createTextNode('Hello, DOM!');
exampleEl.appendChild(newText);
示例
下面是一个简单的例子，演示了如何使用 DOM 操作页面元素：
htmlCopy Code<div id="example">Hello, World!</div>
<button onclick="changeText()">Change Text</button>
<script>
function changeText() {
const exampleEl = document.getElementById('example');
exampleEl.innerHTML = 'Hello, DOM!';
}
</script>
点击按钮后，页面上的文本将被修改为 "Hello, DOM!"。