《JavaScript 闖關(guān)記》之 DOM（下）

mudiyouyou 發(fā)布于2019-08-20 12:26 / 522人閱讀

摘要：節(jié)點(diǎn)具有以下特征的值為的值為元素的標(biāo)簽名的值為可能是或其子節(jié)點(diǎn)可能是或。添加的這些屬性分別對(duì)應(yīng)于每個(gè)元素中都存在的下列標(biāo)準(zhǔn)特性。，有關(guān)元素的附加說(shuō)明信息，一般通過(guò)工具提示條顯示出來(lái)。

Element 類型

除了 Document 類型之外，Element 類型就要算是 Web 編程中最常用的類型了。Element 類型用于表現(xiàn) XML 或 HTML 元素，提供了對(duì)元素標(biāo)簽名、子節(jié)點(diǎn)及特性的訪問(wèn)。Element 節(jié)點(diǎn)具有以下特征：

nodeType 的值為1；

nodeName 的值為元素的標(biāo)簽名；

nodeValue 的值為 null；

parentNode 可能是 Document 或 Element；

其子節(jié)點(diǎn)可能是 Element、Text、Comment、ProcessingInstruction、CDATASection 或 EntityReference。

要訪問(wèn)元素的標(biāo)簽名，可以使用 nodeName 屬性，也可以使用 tagName 屬性；這兩個(gè)屬性會(huì)返回相同的值（使用后者主要是為了清晰起見(jiàn)）。以下面的元素為例：

可以像下面這樣取得這個(gè)元素及其標(biāo)簽名：

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

這里的元素標(biāo)簽名是 div，它擁有一個(gè)值為 "myDiv" 的ID?？墒牵?b>div.tagName 實(shí)際上輸出的是 "DIV" 而非 "div"。在HTML中，標(biāo)簽名始終都以全部大寫(xiě)表示；而在 XML（有時(shí)候也包括 XHTML）中，標(biāo)簽名則始終會(huì)與源代碼中的保持一致。假如你不確定自己的腳本將會(huì)在 HTML 還是 XML 文檔中執(zhí)行，最好是在比較之前將標(biāo)簽名轉(zhuǎn)換為相同的大小寫(xiě)形式，如下面的例子所示：

// 不能這樣比較，很容易出錯(cuò)！
if (element.tagName == "div"){ 
    //在此執(zhí)行某些操作
}

// 這樣最好（適用于任何文檔）
if (element.tagName.toLowerCase() == "div"){ 
    //在此執(zhí)行某些操作
}

HTML 元素

所有 HTML 元素都由 HTMLElement 類型表示，不是直接通過(guò)這個(gè)類型，也是通過(guò)它的子類型來(lái)表示。HTMLElement 類型直接繼承自 Element 并添加了一些屬性。添加的這些屬性分別對(duì)應(yīng)于每個(gè) HTML 元素中都存在的下列標(biāo)準(zhǔn)特性。

id，元素在文檔中的唯一標(biāo)識(shí)符。

title，有關(guān)元素的附加說(shuō)明信息，一般通過(guò)工具提示條顯示出來(lái)。

lang，元素內(nèi)容的語(yǔ)言代碼，很少使用。

dir，語(yǔ)言的方向，值為 "ltr"（left-to-right，從左至右）或 "rtl"（right-to-left，從右至左），也很少使用。

className，與元素的 class 特性對(duì)應(yīng)，即為元素指定的 CSS 類。沒(méi)有將這個(gè)屬性命名為 class，是因?yàn)?class 是 JavaScript 的保留字。

上述這些屬性都可以用來(lái)取得或修改相應(yīng)的特性值。以下面的HTML元素為例：

元素中指定的所有信息，都可以通過(guò)下列 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"

當(dāng)然，像下面這樣通過(guò)為每個(gè)屬性賦予新的值，也可以修改對(duì)應(yīng)的每個(gè)特性：

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

并不是對(duì)所有屬性的修改都會(huì)在頁(yè)面中直觀地表現(xiàn)出來(lái)。對(duì) id 或 lang 的修改對(duì)用戶而言是透明不可見(jiàn)的（假設(shè)沒(méi)有基于它們的值設(shè)置的 CSS 樣式），而對(duì) title 的修改則只會(huì)在鼠標(biāo)移動(dòng)到這個(gè)元素之上時(shí)才會(huì)顯示出來(lái)。對(duì) dir 的修改會(huì)在屬性被重寫(xiě)的那一刻，立即影響頁(yè)面中文本的左、右對(duì)齊方式。修改 className 時(shí)，如果新類關(guān)聯(lián)了與此前不同的 CSS 樣式，那么就會(huì)立即應(yīng)用新的樣式。

取得特性

每個(gè)元素都有一或多個(gè)特性，這些特性的用途是給出相應(yīng)元素或其內(nèi)容的附加信息。操作特性的 DOM 方法主要有三個(gè)，分別是 getAttribute()、setAttribute() 和 removeAttribute()。這三個(gè)方法可以針對(duì)任何特性使用，包括那些以 HTMLElement 類型屬性的形式定義的特性。來(lái)看下面的例子：

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() 的特性名與實(shí)際的特性名相同。因此要想得到 class 特性值，應(yīng)該傳入 "class" 而不是 "className"，后者只有在通過(guò)對(duì)象屬性訪問(wèn)特性時(shí)才用。如果給定名稱的特性不存在，getAttribute() 返回 null。

通過(guò) getAttribute() 方法也可以取得自定義特性（即標(biāo)準(zhǔn) HTML 語(yǔ)言中沒(méi)有的特性）的值，以下面的元素為例：

這個(gè)元素包含一個(gè)名為 my_special_attribute 的自定義特性，它的值是 "hello!"?？梢韵袢〉闷渌匦砸粯尤〉眠@個(gè)值，如下所示：

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

不過(guò)，特性的名稱是不區(qū)分大小寫(xiě)的，即 "ID" 和 "id" 代表的都是同一個(gè)特性。另外也要注意，根據(jù) HTML5 規(guī)范，自定義特性應(yīng)該加上 data- 前綴以便驗(yàn)證。

任何元素的所有特性，也都可以通過(guò) DOM 元素本身的屬性來(lái)訪問(wèn)。當(dāng)然，HTMLElement 也會(huì)有5個(gè)屬性與相應(yīng)的特性一一對(duì)應(yīng)。不過(guò)，只有公認(rèn)的（非自定義的）特性才會(huì)以屬性的形式添加到 DOM 對(duì)象中。以下面的元素為例：

因?yàn)?id 和 align 在 HTML 中是 div 的公認(rèn)特性，因此該元素的 DOM 對(duì)象中也將存在對(duì)應(yīng)的屬性。不過(guò)，自定義特性 my_special_attribute 在 Safari、Opera、Chrome 及 Firefox 中是不存在的；但 IE 卻會(huì)為自定義特性也創(chuàng)建屬性，如下面的例子所示：

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

有兩類特殊的特性，它們雖然有對(duì)應(yīng)的屬性名，但屬性的值與通過(guò) getAttribute() 返回的值并不相同。第一類特性就是 style，用于通過(guò) CSS 為元素指定樣式。在通過(guò) getAttribute() 訪問(wèn)時(shí)，返回的 style 特性值中包含的是CSS文本，而通過(guò)屬性來(lái)訪問(wèn)它則會(huì)返回一個(gè)對(duì)象。由于 style 屬性是用于以編程方式訪問(wèn)元素樣式的，因此并沒(méi)有直接映射到 style 特性。

第二類與眾不同的特性是 onclick 這樣的事件處理程序。當(dāng)在元素上使用時(shí)，onclick 特性中包含的是 JavaScript 代碼，如果通過(guò) getAttribute() 訪問(wèn)，則會(huì)返回相應(yīng)代碼的字符串。而在訪問(wèn) onclick 屬性時(shí)，則會(huì)返回一個(gè) JavaScript 函數(shù)（如果未在元素中指定相應(yīng)特性，則返回 null）。這是因?yàn)?onclick 及其他事件處理程序?qū)傩员旧砭蛻?yīng)該被賦予函數(shù)值。

由于存在這些差別，在通過(guò) JavaScript 以編程方式操作 DOM 時(shí)，開(kāi)發(fā)人員經(jīng)常不使用 getAttribute()，而是只使用對(duì)象的屬性。只有在取得自定義特性值的情況下，才會(huì)使用 getAttribute() 方法。

設(shè)置特性

與 getAttribute() 對(duì)應(yīng)的方法是 setAttribute()，這個(gè)方法接受兩個(gè)參數(shù)：要設(shè)置的特性名和值。如果特性已經(jīng)存在，setAttribute() 會(huì)以指定的值替換現(xiàn)有的值；如果特性不存在，setAttribute() 則創(chuàng)建該屬性并設(shè)置相應(yīng)的值。來(lái)看下面的例子：

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

通過(guò) setAttribute() 方法既可以操作HTML特性也可以操作自定義特性。通過(guò)這個(gè)方法設(shè)置的特性名會(huì)被統(tǒng)一轉(zhuǎn)換為小寫(xiě)形式，即 "ID" 最終會(huì)變成 "id"。

因?yàn)樗刑匦远际菍傩?，所以直接給屬性賦值可以設(shè)置特性的值，如下所示。

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

不過(guò)，像下面這樣為 DOM 元素添加一個(gè)自定義的屬性，該屬性不會(huì)自動(dòng)成為元素的特性。

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

這個(gè)例子添加了一個(gè)名為 mycolor 的屬性并將它的值設(shè)置為 "red"。在大多數(shù)瀏覽器中，這個(gè)屬性都不會(huì)自動(dòng)變成元素的特性，因此想通過(guò) getAttribute() 取得同名特性的值，結(jié)果會(huì)返回 null?？墒?，自定義屬性在 IE 中會(huì)被當(dāng)作元素的特性，反之亦然。

要介紹的最后一個(gè)方法是 removeAttribute()，這個(gè)方法用于徹底刪除元素的特性。調(diào)用這個(gè)方法不僅會(huì)清除特性的值，而且也會(huì)從元素中完全刪除特性，如下所示：

div.removeAttribute("class");

這個(gè)方法并不常用，但在序列化 DOM 元素時(shí)，可以通過(guò)它來(lái)確切地指定要包含哪些特性。

創(chuàng)建元素

使用 document.createElement() 方法可以創(chuàng)建新元素。這個(gè)方法只接受一個(gè)參數(shù)，即要?jiǎng)?chuàng)建元素的標(biāo)簽名。這個(gè)標(biāo)簽名在 HTML 文檔中不區(qū)分大小寫(xiě)。例如，使用下面的代碼可以創(chuàng)建一個(gè) div 元素。

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

在使用 createElement() 方法創(chuàng)建新元素的同時(shí)，也為新元素設(shè)置了 ownerDocuemnt 屬性。此時(shí)，還可以操作元素的特性，為它添加更多子節(jié)點(diǎn)，以及執(zhí)行其他操作。來(lái)看下面的例子。

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

在新元素上設(shè)置這些特性只是給它們賦予了相應(yīng)的信息。由于新元素尚未被添加到文檔樹(shù)中，因此設(shè)置這些特性不會(huì)影響瀏覽器的顯示。要把新元素添加到文檔樹(shù)，可以使用 appendChild()、insertBefore() 或 replaceChild() 方法。下面的代碼會(huì)把新創(chuàng)建的元素添加到文檔的元素中。

document.body.appendChild(div);

一旦將元素添加到文檔樹(shù)中，瀏覽器就會(huì)立即呈現(xiàn)該元素。此后，對(duì)這個(gè)元素所作的任何修改都會(huì)實(shí)時(shí)反映在瀏覽器中。

元素的子節(jié)點(diǎn)

元素可以有任意數(shù)目的子節(jié)點(diǎn)和后代節(jié)點(diǎn)，因?yàn)樵乜梢允瞧渌氐淖庸?jié)點(diǎn)。元素的 childNodes 屬性中包含了它的所有子節(jié)點(diǎn)，這些子節(jié)點(diǎn)有可能是元素、文本節(jié)點(diǎn)、注釋或處理指令。不同瀏覽器在看待這些節(jié)點(diǎn)方面存在顯著的不同，以下面的代碼為例。


    Item 1
    Item 2
    Item 3

如果是 IE8 來(lái)解析這些代碼，那么

元素。但如果是在其他瀏覽器中，
- 元素和4個(gè)文本節(jié)點(diǎn)（表示
- 元素之間的空白符）。如果像下面這樣將元素間的空白符刪除，那么所有瀏覽器都會(huì)返回相同數(shù)目的子節(jié)點(diǎn)。
```
Item 1
Item 2
Item 3
```
  對(duì)于這段代碼，

mudiyouyou

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章
閱讀更多

C++內(nèi)存管理

閱讀 2068·2021-11-19 09:40

數(shù)據(jù)的存儲(chǔ)練習(xí)題

閱讀 2030·2021-09-28 09:36

解決物體檢測(cè)中的小目標(biāo)問(wèn)題

閱讀 2365·2021-09-22 10:02

CSS引入外部字體方法，附可用demo

閱讀 2802·2019-08-30 14:00

前端每日實(shí)戰(zhàn)：33# 視頻演示如何用純 CSS 創(chuàng)作牛奶文字變換效果

閱讀 2014·2019-08-29 15:31

CSS Variables學(xué)習(xí)筆記

閱讀 2961·2019-08-29 15:11

用JS寫(xiě)一個(gè)計(jì)算器（兼容手機(jī)端）

閱讀 2970·2019-08-29 13:04

PHP常用操作類實(shí)現(xiàn)——通信數(shù)據(jù)封裝類

閱讀 1143·2019-08-27 10:55

最新活動(dòng)

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

《JavaScript 闖關(guān)記》之 DOM（下）

相關(guān)文章