走进DOM:HTML DOM

来源:互联网 发布:大自然木地板 知乎 编辑:程序博客网 时间:2024/04/29 07:15

    DOMDocument Object Model)即文档对象模型,针对HTMLXML文档的API(应用程序接口)。DOM描绘了一个层次化的节点树,运行开发人员添加、移除和修改页面的某一部分。当然这样说有些笼统,咱们接着往下看。

    一、认识DOM

    DOM 中的三个字母,D(文档)可以理解为整个Web加载的网页文档;O(对象)可以理解为类似window对象之类的东西,可以调用属性和方法,这里我们说的是document对象;M(模型)可以理解为网页文档的树型结构。

    通过 JavaScript,您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西,JavaScript就需要对HTML文档中所有元素进行访问的入口。这个入口,连同对HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。

    DOM 定义了访问 HTML 和 XML 文档的标准:

   “W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

    W3C DOM 标准被分为 3 个不同的部分:

  • Core DOM - 针对任何结构化文档的标准模型
  • XML DOM - 针对 XML 文档的标准模型
  • HTML DOM - 针对 HTML 文档的标准模型

    节点:加载HTML页面时,Web浏览器生成一个树型结构,用来表示页面内部结构。DOM将这种树型结构理解为由节点组成。

    节点彼此都有等级关系。HTML 文档中的所有节点组成了一个文档树(或节点树)。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。

    从上图的树型结构,我们理解几个概念,html标签没有父辈,没有兄弟,所以html标签为根标签。head标签是html子标签,metatitle标签之间是兄弟关系。如果把每个标签当作一个节点的话,那么这些节点组合成了一棵节点树。


    根据 DOM,HTML 文档中的每个成分都是一个节点。
    DOM 是这样规定的:节点种类可以分为三类:元素节点、文本节点、属性节点。

  • 整个文档是一个文档节点 
  • 每个 HTML 标签是一个元素节点 
  • 包含在 HTML 元素中的文本是文本节点 
  • 每一个 HTML 属性是一个属性节点 
  • 注释属于注释节点
    老师一直强调,要善于总结,时常总结。就像这些知识点,自己总觉得会,然而到了用的时候发现自己并不能马上写出,所以自己要时常总结,联系知识到实际中。

0 0
原创粉丝点击