《JavaScript 闯关记》之 DOM（下）

Element 类型

除了 Document 类型之外，Element 类型就要算是 Web 编程中最常用的类型了。Element 类型用于表现 XML 或 HTML 元素，提供了对元素标签名、子节点及特性的访问。Element 节点具有以下特征：

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

要访问元素的标签名，可以使用 nodeName 属性，也可以使用 tagName 属性；这两个属性会返回相同的值（使用后者主要是为了清晰起见）。以下面的元素为例：

可以像下面这样取得这个元素及其标签名：

var div = document.getElementById("myDiv");
console.log(div.tagName); // "DIV"
console.log(div.tagName === div.nodeName); // true

这里的元素标签名是 div，它拥有一个值为 "myDiv" 的ID。可是，div.tagName 实际上输出的是 "DIV" 而非 "div"。在HTML中，标签名始终都以全部大写表示；而在 XML（有时候也包括 XHTML）中，标签名则始终会与源代码中的保持一致。假如你不确定自己的脚本将会在 HTML 还是 XML 文档中执行，最好是在比较之前将标签名转换为相同的大小写形式，如下面的例子所示：

// 不能这样比较，很容易出错！
if (element.tagName == "div"){ 
    //在此执行某些操作
}

// 这样最好（适用于任何文档）
if (element.tagName.toLowerCase() == "div"){ 
    //在此执行某些操作
}

HTML 元素

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

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

上述这些属性都可以用来取得或修改相应的特性值。以下面的HTML元素为例：

元素中指定的所有信息，都可以通过下列 JavaScript 代码取得：

var div = document.getElementById("myDiv");
console.log(div.id);         // "myDiv""
console.log(div.className);  // "bd"
console.log(div.title);      // "Body text"
console.log(div.lang);       // "en"
console.log(div.dir);        // "ltr"

当然，像下面这样通过为每个属性赋予新的值，也可以修改对应的每个特性：

div.id = "someOtherId";
div.className = "ft";
div.title = "Some other text";
div.lang = "fr";
div.dir ="rtl";

并不是对所有属性的修改都会在页面中直观地表现出来。对 id 或 lang 的修改对用户而言是透明不可见的（假设没有基于它们的值设置的 CSS 样式），而对 title 的修改则只会在鼠标移动到这个元素之上时才会显示出来。对 dir 的修改会在属性被重写的那一刻，立即影响页面中文本的左、右对齐方式。修改 className 时，如果新类关联了与此前不同的 CSS 样式，那么就会立即应用新的样式。

取得特性

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

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

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

通过 getAttribute() 方法也可以取得自定义特性（即标准 HTML 语言中没有的特性）的值，以下面的元素为例：

这个元素包含一个名为 my_special_attribute 的自定义特性，它的值是 "hello!"。可以像取得其他特性一样取得这个值，如下所示：

var value = div.getAttribute("my_special_attribute");

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

任何元素的所有特性，也都可以通过 DOM 元素本身的属性来访问。当然，HTMLElement 也会有5个属性与相应的特性一一对应。不过，只有公认的（非自定义的）特性才会以属性的形式添加到 DOM 对象中。以下面的元素为例：

因为 id 和 align 在 HTML 中是 div 的公认特性，因此该元素的 DOM 对象中也将存在对应的属性。不过，自定义特性 my_special_attribute 在 Safari、Opera、Chrome 及 Firefox 中是不存在的；但 IE 却会为自定义特性也创建属性，如下面的例子所示：

console.log(div.id);                      // "myDiv"
console.log(div.my_special_attribute);    // undefined（IE除外）
console.log(div.align);                   // "left"

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

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

由于存在这些差别，在通过 JavaScript 以编程方式操作 DOM 时，开发人员经常不使用 getAttribute()，而是只使用对象的属性。只有在取得自定义特性值的情况下，才会使用 getAttribute() 方法。

设置特性

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

div.setAttribute("id", "someOtherId");
div.setAttribute("class", "ft");
div.setAttribute("title", "Some other text");
div.setAttribute("lang","fr");
div.setAttribute("dir", "rtl");

通过 setAttribute() 方法既可以操作HTML特性也可以操作自定义特性。通过这个方法设置的特性名会被统一转换为小写形式，即 "ID" 最终会变成 "id"。

因为所有特性都是属性，所以直接给属性赋值可以设置特性的值，如下所示。

div.id = "someOtherId";
div.align = "left";

不过，像下面这样为 DOM 元素添加一个自定义的属性，该属性不会自动成为元素的特性。

div.mycolor = "red";
console.log(div.mycolor); // "red"
console.log(div.getAttribute("mycolor")); // null（IE除外）

这个例子添加了一个名为 mycolor 的属性并将它的值设置为 "red"。在大多数浏览器中，这个属性都不会自动变成元素的特性，因此想通过 getAttribute() 取得同名特性的值，结果会返回 null。可是，自定义属性在 IE 中会被当作元素的特性，反之亦然。

要介绍的最后一个方法是 removeAttribute()，这个方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值，而且也会从元素中完全删除特性，如下所示：

div.removeAttribute("class");

这个方法并不常用，但在序列化 DOM 元素时，可以通过它来确切地指定要包含哪些特性。

创建元素

使用 document.createElement() 方法可以创建新元素。这个方法只接受一个参数，即要创建元素的标签名。这个标签名在 HTML 文档中不区分大小写。例如，使用下面的代码可以创建一个 div 元素。

var div = document.createElement("div");

在使用 createElement() 方法创建新元素的同时，也为新元素设置了 ownerDocuemnt 属性。此时，还可以操作元素的特性，为它添加更多子节点，以及执行其他操作。来看下面的例子。

div.id = "myNewDiv";
div.className = "box";

在新元素上设置这些特性只是给它们赋予了相应的信息。由于新元素尚未被添加到文档树中，因此设置这些特性不会影响浏览器的显示。要把新元素添加到文档树，可以使用 appendChild()、insertBefore() 或 replaceChild() 方法。下面的代码会把新创建的元素添加到文档的元素中。

document.body.appendChild(div);

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

元素的子节点

元素可以有任意数目的子节点和后代节点，因为元素可以是其他元素的子节点。元素的 childNodes 属性中包含了它的所有子节点，这些子节点有可能是元素、文本节点、注释或处理指令。不同浏览器在看待这些节点方面存在显著的不同，以下面的代码为例。


    Item 1
    Item 2
    Item 3

如果是 IE8 来解析这些代码，那么

元素。但如果是在其他浏览器中，
- 元素和4个文本节点（表示
- 元素之间的空白符）。如果像下面这样将元素间的空白符删除，那么所有浏览器都会返回相同数目的子节点。
```
Item 1
Item 2
Item 3
```
  对于这段代码，

《JavaScript 闯关记》之 DOM（下）

Element 类型

HTML 元素

取得特性

设置特性

创建元素

元素的子节点

Text 类型

创建文本节点

规范化文本节点

分割文本节点

Comment 类型

Attr 类型

DOM 操作

动态脚本

更多

你可能感兴趣的:(javascript)