企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
# 2.1.4 DOM ### 2.1.4 DOM DOM即**文档对象模型(Document Object Model)**。它是浏览器对HTML文本进行解析后得到的一个抽象数据结构。以上面的HTML文档为例,它对应的DOM树是: ![DOM.png](https://box.kancloud.cn/ae05d0bf24ea4a35e445e7908d249e68_420x300.png) 其中: - 根节点document代表整个HTML文档。 - 文档类型声明对应着一个节点(类型为DocumentType)。 - 每个HTML标签,如html、head、meta等,都对应着一个节点——这类节点称为**元素(Element)**[1](#fn_1)。 - 标签的每个属性都对应着它的一个子节点。例如,meta标签的charset属性对应着meta元素的一个子节点。这类节点称为属性(Attribute)节点。 - 标签包含的文字对应着它的一个子节点。例如,p标签包含的文字“你好,HTML!”对应着p元素的一个子节点。这类节点称为文字(Text)节点。 - 标签直接包含的每个标签都对应着它的一个子节点。例如,html标签包含的head标签和body标签,分别对应着html元素的两个子节点head和body。 DOM很重要。我们将会在后面的[JavaScript](dom1.html)一节中看到,通过JavaScript这样的浏览器脚本可以访问并修改HTML文档对应的DOM树[2](#fn_2)——向其中动态地添加、删除节点,或者修改节点的属性——浏览器所呈现的网页就会随之变化。这就是浏览器动态UI编程的基本原理。 > 1. HTML元素与其对应的标签既有联系又有区别:[https://en.wikipedia.org/wiki/HTML\_element#Elements\_vs.\_tags](https://en.wikipedia.org/wiki/HTML_element#Elements_vs._tags)[↩](#reffn_1 "Jump back to footnote [1] in the text.") > 2. 参考这里了解相关的JavaScript API:[http://www.w3schools.com/js/js\_htmldom\_navigation.asp](http://www.w3schools.com/js/js_htmldom_navigation.asp)[↩](#reffn_2 "Jump back to footnote [2] in the text.")