Javascript DOM文档对象模型-DOM节点树

564 2 年前
DOM 描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。

DOM(文档对象模型)定义了HTML和XML文档的标准,是针对HTML和XML文档的一套API。DOM将HTML和XML定义为一个层次化的节点树,通过节点树开发人员可以动态的添加、删除或修改页面的某一部分。

DOM介绍

在DOM中,HTML和XML文档被描述一个由多层结构的不同类型的节点组成的节点树。组成DOM的不同类型的节点,每种节点都有各自的特点、方法和数据,节点之间通过不同的关系(父子、兄弟等)构成层次结构。

在W3C DOM标准中,DOM被分为三个部分:核心 DOM、XML DOM、HTML DOM,本文主要介绍HTML DOM。

什么是HTML DOM

HTML DOM是一个针对HTML标准对象模型和编程接口。它定义了以下内容:

  • HTML元素对象
  • HTML元素属性
  • 访问HTML元素的方法
  • HTML元素事件

也就是说,HTML DOM是一个关于怎样获取、修改、添加或删除HTML元素的标准。

HTML DOM节点层次( DOM节点树)

当加载完一个Web页面后,浏览器就会为这个页面创建一个文档对象模型。HTML DOM被描述为树状结构的模型,对于一个如下结构的HTML页面:

<html>
  <head>
    <title>itbilu.com</title>
  </head>
  <body>
    <h1>IT笔录</h1>
    <a href="itbilu.com">itbilu.com</p>
  </body>
</html>

其DOM层次结构如下:

HTML DOM树

HTML DOM中的元素通过不同类型节点表示,Document表示文档类型的节点,Element表示元素类型的节点,Text表示文本类型的节点。在HTML DOM中共有12种不同类型的节点,本站会在后续文章中陆续介绍。

文档节点(Document)是每个文档的根节上点。在文档节点中包含一个子节点,即:html,这个节点称之为文档元素,文档元素是每个文档的最外层,文档中的其它元素都是文档元素的子元素,每个文档只能有一个文档元素。在HTML DOM中,文档元素始终是html元素,XML DOM没有预定义的文档元素。

分类栏目
© 2018邮箱:11407215#qq.comGitHub沪ICP备12039518号-6