DOM的概念及作用
一、什么是 DOM（Document Object Model，文档对象模型）
DOM 可以理解为一种将 HTML、XML 和 XHTML 等文档结构化为一个由节点组成的树形结构的模型。它将网页文档表示为一个对象的集合，每个对象代表文档中的一个元素、属性或文本内容等。
例如，对于以下 HTML 结构：
<html><body><h1>Hello World!</h1><p>This is a paragraph.</p></body>
</html>在 DOM 中，<html>元素是整个文档的根节点，<body>是<html>的子节点，<h1>和<p>又是<body>的子节点等。
二、DOM 的作用
- 访问和修改网页内容
- 通过 DOM，可以使用 JavaScript 等编程语言来访问和操作网页中的各种元素。例如，可以获取特定元素的文本内容、修改元素的属性值、添加或删除元素等。
- 比如要修改上面例子中
<h1>元素的文本内容，可以这样做：
const h1Element = document.getElementsByTagName('h1')[0];h1Element.textContent = 'New Text for H1';
- 响应用户交互
- DOM 使得网页能够对用户的操作做出响应。例如，当用户点击一个按钮时，可以通过 DOM 来捕获这个点击事件，并执行相应的代码。
- 如下代码为一个按钮添加点击事件处理程序：
const button = document.getElementById('myButton');button.addEventListener('click', function() {alert('Button was clicked!');});
- 动态更新网页
- 借助 DOM，可以在不刷新整个页面的情况下，动态地更新网页的部分内容。这对于创建具有丰富交互性和实时性的网页非常重要。
- 例如，从服务器获取新的数据后，可以使用 DOM 来更新网页上的表格或列表：
// 假设从服务器获取到新的数据const newData = ['item1', 'item2', 'item3'];const list = document.getElementById('myList');newData.forEach(item => {const li = document.createElement('li');li.textContent = item;list.appendChild(li);});
- 实现网页特效和动画
- 通过操作 DOM 元素的属性和样式，可以实现各种网页特效和动画效果。例如，可以改变元素的位置、大小、透明度等属性来创建动画。
- 以下是一个简单的通过改变元素的透明度实现淡入效果的例子：
const element = document.getElementById('myElement');let opacity = 0;const interval = setInterval(function() {opacity += 0.1;element.style.opacity = opacity;if (opacity >= 1) {clearInterval(interval);}}, 100);
总之，DOM 在网页开发中起着至关重要的作用，它为开发者提供了一种强大而灵活的方式来操作网页内容、实现交互效果和创建动态网页。