上文中我们讲解了 DOM 中最重要的节点类型之一的 Document
节点类型,本文我们继续深入,谈谈另一个重要的节点类型 Element
。
Element 类型用于表现 HTML 或 XML 元素,提供了对元素标签名、子节点及特性的访问。 Element 节点具有以下特征:
nodeType
的值为 1
nodeName
的值为元素的标签名
nodeValue
的值为null
parentNode
可能是 Document
或者 Element
其子节点可能是 Element
、Text
、Comment
、ProcessingInstruction
、CDATASection
或者 EntityReference
要访问元素的标签名,可以用 nodeName
属性,也可以用 tagName
属性;这两个属性会返回相同的值。在 HTML 中,标签名始终都以全部大写表示,而在 XML(有时候也包括 XHTML)中,标签名始终和源代码中保持一致。假如你不确定自己的脚本将会在 HTML 还是 XML 文档中执行,最好还是在比较之前将标签名转换成相同的大小写形式:
所有 HTML 元素都由 HTMLElement 类型表示,不是直接通过这个类型,也是通过它的子类型来表示。 HTMLElement 类型直接继承自 Element 并添加了一些属性。每个 HTML 元素中都存在下列标准属性:
id
元素在文档中的唯一标识符
title
有关元素的附加说明信息,一般通过工具提示条显示出来
lang
元素内容的语言代码,很少使用
dir
语言的方向,值为 ltr
或者 rtl
,也很少使用
className
与元素的 class
特性对应
每个元素都有一个或多个特性,这些特性的用途是给出相应元素或其内容的附加信息。操作特性的 DOM 方法主要有三个,分别是getAttribute()
setAttribute()
removeAttribute()
。
注意,传递给 getAttribute()
的特性名与实际的特性名相同,因此要想得到 class
特性值,应该传入 class
而不是 className
,后者只有在通过对象属性(property)访问特性时才用。如果给定名称的特性不存在,getAttribute()
返回 null。
通过 getAttribute() 方法也可以取得自定义特性。
在实际开发中,开发人员不常用 getAttribute()
,而是只使用对象的属性(property)。只有在取得自定义特性值的情况下,才使用getAttribute()
方法。为什么呢?比如说 style
,在通过 getAttribute()
访问时,返回的 style
特性值包含的是 css 文本,而通过属性来访问会返回一个对象。再比如 onclick
这样的事件处理程序,当在元素上使用时,onclick
特性包含的是 Javascript 代码,如果通过 getAttribute()
访问,将会返回相应代码的字符串,而在访问 onclick
属性时,则会返回 Javascript 函数。
与 getAttribute()
对应的是 setAttribute()
,这个方法接受两个参数:要设置的特性名和值。如果特性已经存在,setAttribute()
会以指定的值替换现有的值;如果特性不存在,setAttribute()
则创建该属性并设置相应的值。
而 removeAttitude()
方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值,而且也会从元素中完全删除特性。
Element
类型是使用 attributes
属性的唯一一个 DOM 节点类型。 attributes
属性中包含一个 NamedNodeMap
,与 NodeList 类似,也是一个“动态”的集合。元素的每一个特性都由一个 Attr 节点表示,每个节点都保存在 NamedNodeMap
对象中。NamedNodeMap
对象拥有下列方法:
getNamedItem(name)
: 返回 nodeName
属性等于 name
的节点
removeNamedItem(name)
: 从列表移除 nodeName
属性等于 name
的节点
setNamedItem(node)
: 向列表中添加节点,以节点的 nodeName
属性为索引
item(pos)
: 返回位于数字 pos
位置处的节点
attributes
属性中包含一系列的节点,每个节点的 nodeName
就是特性的名称,而节点的 nodeValue
就是特性的值。
一般来说,由于前面介绍的 attributes 方法不够方便,因此开发人员更多的会使用 getAttribute()
removeAttribute()
以及setAttribute()
方法。
不过如果想要遍历元素的特性,attributes 属性倒是可以派上用场:
以上代码,如果是 IE 来解析,那么 <ul>
元素会有 3 个子节点,分别是 3 个 <li>
元素;而如果是其他浏览器解析,则会有 7 个子节点,包括 3 个 <li>
元素 和 4 个文本节点。
如果像下面这样将元素之间的空白符删除,那么所有浏览器都会返回相同数目的子节点: