DOM 学习笔记

  • A+
所属分类:JavaScript
 DOM

DOM概况

API

DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API (应用程序编程接口)。DOM 描绘了一个层次化的节点树

节点分成几种不同的类型,每种类型分别表示文档中不同的信息及标记。每个节点都是一个对象,因此拥有各自的特性、属性及方法,另外也与其他节点存在某种关系。节点之间的关系构成了层次。而所有页面标记则表现为一个以特定节点为根节点的树形结构。

DEMO:

可以将这个简单的 HTML 文档表示为一个层次结构:

文档节点(Document)是每个文档的根节点,在这个例子中,文档节点只有一个子节点,即「html」元素,我们称之为文档元素。文档元素是文档的最外层元素,文档中的其他所有元素都包含在文档元素中。每个文档只能有一个文档元素。在 HTML 中,文档元素始终是「html」元素;而在 XML 中,没有预定义的元素,因此任何元素都能成为文档元素。

每一段标记都可以通过树中的一个节点来表示: HTML 元素通过元素节点来表示,特性(attribute)通过特性节点来表示,文档类型通过文档类型节点来表示,文本通过文本节点来表示,而注释通过注释节点表示。总共有12 种节点类型,这些类型都继承自一个基类型。

Node 类型

DOM 1级定义了一个 Node 接口,这个接口在 Javascript 中是作为 Node 类型实现的。DOM 中的所有节点类型都继承自 Node 类型。因此所有节点类型都共享着相同的基本属性和方法。

每个节点都有一个 nodeType 属性,用于表明节点的类型。节点类型由在 Node 类型中定义的下列 12 个数值常量来表示:

  1. Node.ELEMENT_NODE(1)
  2. Node.ATTRIBUTE_NODE(2)
  3. Node.TEXT_NODE(3)
  4. Node.CDATA_SECTION_NODE(4)
  5. Node.ENTITY_REFERENCE_NODE(5)
  6. Node.ENTITY_NODE(6)
  7. Node.PROCESSING_INSTRUCTION_NODE(7)
  8. Node.COMMENT_NODE(8)
  9. Node.DOCUMENT_NODE(9)
  10. Node.DOCUMENT_TYPE_NODE(10)
  11. Node.DOCUMENT_FRAGMENT_NODE(11)
  12. Node.NOTATION_NODE(12)

操作节点

  • 访问节点的文档节点
  • 克隆节点

  • 访问兄弟节点
  • 判断有没有子节点
  • 访问子节点
  • 添加子节点
  • 删除子节点
  • 替换子节点

DOM Document

概况

  • javascript 通过 Document 类型表示文档
  • 在浏览器中,document 对象是 HTMLDocument(继承自 Document 类型)的一个实例,表示整个 HTML 页面
  • document 对象是 window 对象的一个属性,因此可以将其作为全局对象来访问

Document 类型可以表示 HTML 页面或者其他基于 XML 的文档。不过最常见的应用还是作为 HTMLDocument 实例的 document 对象。通过这个文档对象,不仅可以取得与页面有关的信息,而且还能操作页面的外观及其底层结构。

文档子节点

文档节点有两个内置的访问其子节点的属性:

  • documentElement(该属性始终指向页面中的「html」元素节点)
  • childNodes 子节点列表

文档元素子节点

文档元素子节点:DocumentElement

documentElement 方法:

DOM 学习笔记

我们也可以通过 children 属性和 lastChild 属性获取文档元素:

DOM 学习笔记

childNodes 方法:

DOM 学习笔记

通过 childNodes 属性去获取文档元素子节点,不能确定其位置。因为该属性还获取了文档类型声明(DTD)节点。如果文档节点内还有注释节点的话,则 childNodes 属性也会获取到该注释节点。

DOM 学习笔记

文档类型子节点

文档类型子节点:DocumentType

文档节点的另一个子节点是 DocumentType。通常将「!DOCTYPE」看成一个和文档其他部分不同的实体,可以通过 doctype 属性来访问它的信息:

DOM 学习笔记

但是浏览器对 document.doctype 的支持差别很大,使得这个属性的用处很有限。

注释节点

正如上面的栗子所示,如果文档节点内存在注释节点,则该注释节点也会成为文档节点的子节点。

body 属性

document 对象的 body 属性,直接指向「body」元素。

文档信息

查找元素

demo:


DOM 学习笔记

特殊集合

除了属性和方法,document 对象还有一些特殊的集合,这些集合都是 HTMLCollection 对象,为访问文档常用的部分提供了快捷方式:

DOM Element

概况

Element 类型用于表现 HTML 或 XML 元素,提供了对元素标签名、子节点及属性的访问。

要访问元素的标签名,可以用 nodeName 属性,也可以用tagName 属性,这两个属性会返回相同的值。

  • 在 HTML 中,标签名始终都以全部大写表示
  • 在 XML(包括 XHTML)中,标签名始终和源代码中保持一致

DOM 学习笔记

假如你不确定自己的脚本将会在 HTML 还是 XML 文档中执行,最好还是将标签名转换成相同的大小写形式:

DOM 学习笔记

元素

所有的 HTML 元素都由 HTMLElement 类型表示。 HTMLElement 类型直接继承自 Element 并添加了一些属性。每个 HTML 元素中都存在下列标准属性

  • className:与元素的 class 属性对应
  • dir:元素内容的文本方向,值为 ltr 或者 rtl,很少使用
  • id:元素在文档中的唯一标识符
  • lang:元素内容的语言代码,很少使用
  • title:有关元素的附加说明信息,一般通过工具提示条显示出来

元素属性的获取

WARNING: HTML 元素的属性与 DOM 对象的属性是不同的概念

绝大多数的元素都会定义一个或多个属性,这些属性的用途是给出相应元素或其内容的附加信息。操作属性的 DOM 方法主要有三个:

demo:

DOM 学习笔记

在实际开发中,我们并不常用 getAttribute() 方法,而更多地使用对象的 property。为什么呢?比如,我们在元素上使用了 onclick 属性,绑定了点击事件处理程序,该属性包含的是 Javascript 代码。如果通过 getAttribute() 方法访问,将会返回相应代码的字符串;而通过 onclick 属性访问,则会返回 Javascript 函数。再比如,通过 getAttribute() 方法访问 style 属性,返回的是一段文本;而通过 style 属性访问,则会返回一个对象。

demo:

DOM 学习笔记

元素的attributes属性

Element 类型是使用 attributes 属性的唯一一个 DOM 节点类型。attributes 属性中包含一个 NamedNodeMap,与 NodeList 类似,也是一个动态的集合。元素的每一个属性都由一个 Attr节点表示,每个节点都保存在 NamedNodeMap 对象中。

NamedNodeMap 对象拥有下列方法:

attributes 属性中包含一系列的节点,每个节点的 nodeName 就是元素属性的名称,而节点的 nodeValue 就是元素属性的值。

demo:


DOM 学习笔记

TIPS: 如果想要遍历元素的属性,不妨试试 attributes 属性

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: