Web全栈技术指南-2.1.4 DOM - 书目录

Web全栈技术指南-2.1.4 DOM

2.1.4 DOM

DOM即文档对象模型(Document Object Model)。它是浏览器对HTML文本进行解析后得到的一个抽象数据结构。以上面的HTML文档为例,它对应的DOM树是:

DOM.png

其中:

  • 根节点document代表整个HTML文档。
  • 文档类型声明对应着一个节点(类型为DocumentType)。
  • 每个HTML标签,如html、head、meta等,都对应着一个节点——这类节点称为元素(Element)1
  • 标签的每个属性都对应着它的一个子节点。例如,meta标签的charset属性对应着meta元素的一个子节点。这类节点称为属性(Attribute)节点。
  • 标签包含的文字对应着它的一个子节点。例如,p标签包含的文字“你好,HTML!”对应着p元素的一个子节点。这类节点称为文字(Text)节点。
  • 标签直接包含的每个标签都对应着它的一个子节点。例如,html标签包含的head标签和body标签,分别对应着html元素的两个子节点head和body。

DOM很重要。我们将会在后面的JavaScript一节中看到,通过JavaScript这样的浏览器脚本可以访问并修改HTML文档对应的DOM树2——向其中动态地添加、删除节点,或者修改节点的属性——浏览器所呈现的网页就会随之变化。这就是浏览器动态UI编程的基本原理。

1. HTML元素与其对应的标签既有联系又有区别:https://en.wikipedia.org/wiki/HTML_element#Elements_vs._tags

2. 参考这里了解相关的JavaScript API:http://www.w3schools.com/js/js_htmldom_navigation.asp

results matching “

    No results matching “

    134021

     

    转载链接:https://getfullstack.com/web_client/html/dom.html