Javascript-14-DOM-3

Element类型

Element类型用于表现XML或HTML元素，提供了对元素标签名、子节点及特性的访问。具有以下特征：

• nodeType的值为1；
• nodeName的值为元素的标签名；
• nodeValue的值为null；
• parentNode可能是Document或Element；
• 其子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection或EnttyReference。

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

HTML元素

所有HTML元素都由HTMLElement类型表示，不是直接通过这个类型，也是通过它的子类型来表示。HTMLElement类型直接继承自Element并添加了一些属性。添加的这些属性分别对应于每个HTML元素中都存在的下列标准特性：

• id，元素在文档中的唯一标识符。
• title，有关元素的附加说明信息，一版通过工具提示条显示出来。
• lang，元素内容的语言代码，很少使用。
• dir，语言的方向，值为“ltr”(left-to-right，从左至右)或“rtl”(right-to-left，从右至左)，也很少使用。
• className，与元素的class特性对应，即为元素指定的CSS类。没有讲这个属性命名为class，是因为class是JS的保留字。

取得特性

每个元素都有一或多个特性，这些特性的用途是给出相应元素或其内容的附加信息，操作特性的DOM方法主要有三个，分别是getAttribute()、serAttribute()、removeAttribute()。这三个方法可以针对任何特性使用，包括那些以HTMLElement类型属性定义的特性。例如：

var div = document.getElementById('myDiv');
alert(div.getAttribute('id')); // "myDiv"
alert(div.getAttribute('class')); // "bd"
alert(div.getAttribute('title')); // "Body text"
alert(div.getAttribute('lang')); // "en"
alert(div.getAttribute('dir')); // "ltr"

注意，传递给getAttribute()的特性名与实际的特性名相同。因此想要得到class特性值，应该传入“class”而不是“className”，后者只有在通过对象属性访问特性时采用。如果给定名称的特性不存在，则返回null。

特性的名称是不区分大小写的，即“ID”和‘id’代表的是同一个特性。另外也要注意，根据HTML5规范，自定义特性应该加上data-前缀以便验证。

有两类特殊的特性，它们虽然有对应的属性名，但属性的值与通过getAttribute()返回的值并不相同。第一类特性就是style，用于通过CSS为元素指定样式。在通过getAttribute()访问时，返回的style特性值中包含的是CSS文本，而通过属性来访问它则会返回一个对象，由于style属性是用于以编程方式访问元素样式的，因此并没有直接映射到style特性。

第二类与众不同的特性是onclick这样的事件处理程序。当在元素上使用时，onclick特性中包含的是JS代码，如果通过getAttribute()访问，则会返回相应代码的字符串。而在访问onclick属性时，则会返回一个JS函数(如果未在元素中指定相应特性，则返回null)。这是因为onclick及其他事件处理程序本身就应该被赋予函数值。

设置特性

setAttribute()，这个方法接受两个参数：要设置的特性名和值。如果特性已经存在，会以指定的值替换现有的值；如果特性不存在，则会创建该属性并设置相应的值。

removeAttribute()，用于彻底删除元素的特性，调用这个方法不仅会清楚特性的值，而且也会从元素中完全删除特性。

attributes属性

Element类型是使用attributes属性的唯一一个DOM节点类型。attributes属性中包含一个NameNodeMap，与nodeList类似，也是一个“动态”集合。元素的每一个特性都由一个Attr节点表示，每个节点都保存在NameNodeMap对象中。NameNodeMap对象拥有下列方法。

• getNamedItem(name)：返回nodeName属性等于name的节点。
• removeNamedItem(name)：从列表中移除nodeName属性等于name的节点。
• setNamedItem(node)：向列表中添加节点，以节点的nodeName属性为索引。
• item(pos)：返回位于数字pos位置处的节点，

创建元素

使用document.createElement()方法可以创建新元素，这恶搞方法只接受一个参数，即要创建元素的标签名。这个标签名在HTML文档中不区分大小写，而在XML(包括XHTML)文档中，则是区分大小写的。

在使用createElement()方法创建新元素的同时，也为新元素设置了ownerDocument属性。此外，还可以操作元素的特性，为它添加更多的子节点，以及执行其他操作。在新元素上设置这些特性只是给它们赋予了相应的信息。由于新元素尚未被添加到文档树中，因此设置这些特性不会影响浏览器的显示。要把新元素添加到文档树，可以使用appendChild()、insertBefore()、replaceChild()方法。

一旦将元素添加到文档树中，浏览器就会立即呈现该元素。此后，对这个元素所作的任何修改都会实时反映在浏览器中。

元素的子节点

元素可以有任意数目的子节点和后代节点，因为元素可以是其他元素的子节点。元素的childNodes属性中包含了它的所有子节点，这些子节点可能是元素、文本节点、注释、处理指令。

Text类型

文本节点由Text类型表示，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的HTML字符，但不能包含HTML代码。Text节点具有以下特征：

• nodeType的值为3；
• nodeName的值为“#text”；
• nodeValue的值为节点所包含的文本；
• parentNode是一个Element；
• 不支持子节点

可以通过nodeValue属性或data属性访问Text节点中包含的文本，这两个属性中包含的值相同。对nodeValue的修改也会通过data反映出来，反之亦然。使用下列方法可以操作节点中的文本。

• appendData(text): 将text添加到节点的末尾。
• deleteData(offset, count)：从offset指定的位置开始嘶喊出count个字符。
• insertData(offset, text)：在offset指定的位置插入text。
• replaceData(offset, count, text)：用text替换从offset指定的位置开始到offset+count为止处的文本。
• splitText(offset)：从offset指定的位置将当前文本节点分成两个文本节点。
• substringData(offset, count)：提取从offset指定的位置开始到offset+count为止处的字符串。

创建文本节点

document.createTextNode()创建新文本节点，这个方法接受一个参数–要插入节点中的文本。与设置已有文本节点的值一样，作为参数的文本也将按照HTML或XML的格式进行编码。

规范化文本节点

DOM文档中存在相邻的同胞文本节点很容易导致混乱，因为分不清哪个文本节点表示哪个字符串。另外，DOM文档中出现相邻文本节点的情况也不在少数，于是就催生了一个能够将相邻文本节点合并的方法。这个方法是由Node类型定义的(因而在所有节点类型中都存在)，名叫normalize()。如果在一个包含两个或多个文本节点的父元素上调用normalize()方法，则会将所有文本节点合并成一个节点，结果节点的nodeValue等于将合并前每个文本节点的nodevalue值拼接起来的值。

浏览器在解析文档时永远不会创建相邻的文本节点。这种情况只会作为执行DOM操作的结果出现。

分割文本节点

splitText()：将一个文本节点分成两个文本节点，即按照执行的位置分割nodeValue值。原来的文本节点将包含从开始到指定位置之前的内容，新文本节点将包含剩下的文本。这个方法会返回一个新文本节点，该节点与愿节点的parentNode相同。