DOM节点层次

读书笔记

概念理解

• DOM描绘了一个层次化的节点树，是针对HTML和XML文档的一个API。必须将概念理解透彻。
• 节点分为几种不同的类型，每种类型分别表示文档中不同的信息及标记。每个节点都拥有各自的特点、数据和方法，另外也与其他节点存在某种关系。节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构。这个文档的根节点就是文档节点，文档节点只有一个子节点，即html元素，我们称之为文档元素。文档元素是文档的最外层元素，文档中的其他所有元素都包含在文档元素中。每个文档只能有一个文档元素。在HTML页面中，始终为html元素。在XML，由于没有预定义的元素，所以任何元素都可能成为文档元素。
• 每一段标记都可以通过树中的一个节点来表示：HTML元素通过元素节点表示，特性(attribute)通过特性节点表示，文档类型通过文档类型节点表示，而注释则通过注释节点来表示。共有12中节点类型，这些类型都继承自同一个基类。

节点

• Node类型

  1. DOM1中定义的Node接口，该接口由DOM中的所有节点类型实现。该接口在JS中由Node类型实现(IE不能访问)。JS中所有节点类型继承自Node类型。
  2. 属性
     
     • nodeType
     • nodeName
     • nodeValue
  3. 节点关系
     
     • 每个节点都有一个childNodes属性，保存着NodeList对象
     • firstChild
     • lastChild
     • 每个节点都有一个parentNode属性，指向文档树中的父节点
  4. 操作节点
     appendChild()
     insertBefore()
     replaceChild()
     cloneNode()
     normalize()

• Document类型

  1. 文档类型，document对象是HTMLDocument(继承自Document类型)的一个实例，表示整个HTML页面，它是window对象的一个属性，所以可以作为全局对象来访问。
  2. 文档子节点：文档子节点可以是DocumentType、Element、ProcessingInstruction、Comment。内置了两个访问子节点的快捷方式：
     
     • documentElement属性，该属性始终指向HTML页面的html元素
     • childNodes列表
       而Document另一个可能的子节点是DocumentType，通常将！DOCTYPE标签看成一个与文档其他部分不同的实体，通过document.doctype属性访问其信息。
  3. 文档信息
  4. 查找元素：document.getElementById()方法和document.getElementsByTagName()方法

• Element类型

  1. 用于表现XML和HTML元素，提供了对元素标签名、子节点和特性的访问。
  2. HTML元素：所有HTML元素都用HTMLElement类型表示不是直接通过这个类型，也是通过它的子类型来表示。HTMLElement类型直接继承自Element并添加了一些属性。这些属性分别对应于每个HTML元素中都存在的标准特性。
  3. 操作特性：getAttribute()、setAttibute()、removeAttirbute()
  4. 元素的子节点：可以有任意数目的子节点和后代节点

• Text类型
  操作节点中包含文本的方法

  • appendData(text)：在末尾添加
  • deleteData(offset,count):从offset指定的位置开始删除count个字符
  • insertData(offset,text):在offset指定的位置插入文本
  • replaceData(offset,count,text):用text替换从offset到offset+count位置的文本
  • spliteText(offset):从offset指定的位置将当前文本节点分成两个文本节点
  • substringData(offset,count):提取从offset指定的位置开始到offset+count位置为止的字符串
  • document.createTextNode(text)
  • normalize()规范化文本节点

• Comment类型

• CDATASection类型
  针对XML文档，表示的是CDATA区域。与Comment类似，CDATASection类型自Text类型，因此拥有除了spliteText()之外的所有字符串操作方法。
• DocumentType类型
  该类型在Web浏览器中不常用，仅有FireFox、Safari、Opera、Chrome 4.0支持它。IE及更早版本不支持DocumentType，因此其值document.doctype始终等于null，这些浏览器会把文档类型声明错误的解释为注释，并为此创建一个注释节点。
• DocumentFragment类型
  在所有的节点类型中，只有该类型在文档中没有对应的标记。DOM规定文档片段是一种“轻量级”的文档，可以包含和控制节点但不会像完整的文档那样占用额外的资源。
• Attr类型
  元素的特性在DOM中以Attr类型来表示。在所有浏览器中，都可以访问Attr类型的构造函数和原型，从技术角度讲，特性就是存在于元素的attributes属性中的节点。
  尽管特性节点也是节点，但却不被认为是DOM文档树的一部分。开发人员用setAttribute() getAttribute() removeAttribute()来操作节点，很少引用特性节点。

比较