---

HTML DOM（Document Object Model，文档对象模型）是对HTML文档的结构化表示，它使开发者可以通过JavaScript或其他编程语言来操作HTML文档的元素，使网页更加动态且充满交互性。接下来，我们会介绍一些HTML DOM的扩展和深入应用，以及相关的知识点。

一、DOM事件

在Web上开发交互式应用程序时，事件处理程序（事件监听器）往往是不可或缺的。DOM事件是用户或浏览器执行的所有动作，例如单击、滚动、输入、加载等。常见的事件有：click、mouseover、keydown等。事件处理程序可以通过元素节点属性、HTML属性、事件处理函数等方式添加到HTML元素中，并在特定事件发生时执行。

二、DOM节点遍历

DOM节点遍历指的是遍历HTML文档树，以访问其节点，并执行一些操作。有几种节点遍历方法：

1.父子关系：通过parentNode、childNodes、firstChild、lastChild等属性来访问节点的父节点、子节点、第一个子节点和最后一个子节点。

2.兄弟关系：通过nextSibling、previousSibling等属性来访问同级节点的下一个兄弟节点和上一个兄弟节点。

3.文档树遍历方法：通过document、documentElement、getElementsByTagName、getElementById等属性和方法，来访问整个文档树中的节点。

三、DOM操作

DOM操作允许开发者插入、移动和删除元素，或更改元素的属性和样式等。一些常见的DOM操作有：

1.插入节点：创建节点、移动节点、插入节点等。

2.删除节点：删除元素、删除属性等。

3.替换节点：替换元素、替换文本等。

4.修改节点：修改属性、修改文本等。

四、DOM样式

通过DOM，可以通过JavaScript动态地更改HTML页面上的样式。CSS样式规则作为style对象提供，可由脚本访问和修改。而HTMLElement对象的style属性是一个对象，可以用来获得和设置元素的各种样式属性，例如颜色、字体、内边距、外边距等。

五、DOM表单

表单是一种交互式的页面元素，用于向Web服务器发送信息。DOM表单允许开发者通过JavaScript来操作表单元素的值、提交表单、禁用表单域等。

1.获取表单元素：getElementById或getElementsByTagName方法

2. 修改表单值：form.elements.age.value = “21”

3. 提交表单：form.submit()

六、DOM扩展

DOM扩展是对标准DOM的扩充，是为了补充标准DOM在实际应用中的不足，提供更高效、简便的API，同时也能提高开发效率和开发人员的编程体验。常见的DOM扩展有：

1.滚动：scrollIntoView方法，可以让某个元素可见。

2.光标和选择：selection对象，可以访问文本区域中的选择。

3.元素大小：offsetWidth、offsetHeight、clientWidth、clientHeight等属性和方法，用于计算元素的准确大小和位置等。

4.加载和准备状态：readyState属性和onreadystatechange事件，DOMContentLoaded事件，可以检测页面和元素的加载状态。

七、总结

学习HTML DOM需要关注元素、节点、事件、样式和表单等相关知识点，同时需要多做练习和实战，深入理解其应用场景，才能发挥其最大的作用。在学习和使用DOM时，还需要注意浏览器的兼容性，针对不同的浏览器进行适配和优化，以确保页面展示和用户体验的最佳状态。