HTML DOM - 修改

HTML DOM（Document Object Model）是指文档对象模型，它是对HTML文档的编程接口，通过它可以动态地访问和修改HTML文档，使得页面可以根据用户的行为动态地更新和变化。当HTML文档被加载至浏览器中时，就会创建一个文档对象模型（DOM），它会将整个HTML文档作为一个树形结构来处理，而树的每个节点则表示文档中的一个元素、属性、文本或者注释。利用DOM，我们可以直接访问和修改这些节点上的信息，从而实现页面的交互与动态效果。

在HTML DOM中，每个节点都被表示为一个对象，我们可以通过这些对象来获取、修改和删除文档中的内容。每个节点对象都有一些常用的属性和方法，如下：

• nodeType： 节点类型，1表示元素节点，2表示属性节点，3表示文本节点，8表示注释节点等；
• nodeName： 节点名称，元素节点返回标签名（如div），文本节点返回#text等；
• nodeValue： 节点值，文本节点返回文本内容，元素节点和其他节点返回null；
• parentNode： 父节点；
• childNodes： 子节点集合；
• firstChild： 第一个子节点；
• lastChild： 最后一个子节点；
• nextSibling： 下一个同级节点；
• previousSibling： 上一个同级节点；
• attributes： 属性集合。

除了这些基本的属性和方法，节点对象还有一些其他的操作方法，如appendChild()、removeChild()、insertBefore()、replaceChild()等，这些方法可以用于动态地更新和改变DOM结构。

在HTML DOM中，我们可以通过JavaScript来动态地修改页面内容。比如，我们可以用document.getElementById()方法获取指定id的元素节点，并修改其样式或内容：

var ele = document.getElementById('myDiv');
ele.style.color = 'red';
ele.innerHTML = '这是新的内容';

在上面的例子中，我们首先用getElementById()方法获取id为myDiv的元素节点，然后通过修改其style和innerHTML属性来改变该元素的样式和内容。

除了修改样式和内容之外，我们还可以利用HTML DOM实现其他的动态效果，如事件绑定、动态创建节点、动态加载数据等。通过这些功能，我们可以更加方便地实现页面的交互与动态效果。