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

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

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

Element 類型

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

nodeType 的值為1；

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

nodeValue 的值為 null；

parentNode 可能是 Document 或 Element；

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

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

可以像下面這樣取得這個(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)簽名始終都以全部大寫表示；而在 XML（有時(shí)候也包括 XHTML）中，標(biāo)簽名則始終會(huì)與源代碼中的保持一致。假如你不確定自己的腳本將會(huì)在 HTML 還是 XML 文檔中執(zhí)行，最好是在比較之前將標(biāo)簽名轉(zhuǎn)換為相同的大小寫形式，如下面的例子所示：

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

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

HTML 元素

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

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

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

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

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

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

上述這些屬性都可以用來取得或修改相應(yīng)的特性值。以下面的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"

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

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

并不是對(duì)所有屬性的修改都會(huì)在頁面中直觀地表現(xiàn)出來。對(duì) id 或 lang 的修改對(duì)用戶而言是透明不可見的（假設(shè)沒有基于它們的值設(shè)置的 CSS 樣式），而對(duì) title 的修改則只會(huì)在鼠標(biāo)移動(dòng)到這個(gè)元素之上時(shí)才會(huì)顯示出來。對(duì) dir 的修改會(huì)在屬性被重寫的那一刻，立即影響頁面中文本的左、右對(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 類型屬性的形式定義的特性。來看下面的例子：

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"，后者只有在通過對(duì)象屬性訪問特性時(shí)才用。如果給定名稱的特性不存在，getAttribute() 返回 null。

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

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

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

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

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

因?yàn)?id 和 align 在 HTML 中是 div 的公認(rèn)特性，因此該元素的 DOM 對(duì)象中也將存在對(duì)應(yīng)的屬性。不過，自定義特性 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)的屬性名，但屬性的值與通過 getAttribute() 返回的值并不相同。第一類特性就是 style，用于通過 CSS 為元素指定樣式。在通過 getAttribute() 訪問時(shí)，返回的 style 特性值中包含的是CSS文本，而通過屬性來訪問它則會(huì)返回一個(gè)對(duì)象。由于 style 屬性是用于以編程方式訪問元素樣式的，因此并沒有直接映射到 style 特性。

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

由于存在這些差別，在通過 JavaScript 以編程方式操作 DOM 時(shí)，開發(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)的值。來看下面的例子：

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

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

因?yàn)樗刑匦远际菍傩裕灾苯咏o屬性賦值可以設(shè)置特性的值，如下所示。

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

不過，像下面這樣為 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)變成元素的特性，因此想通過 getAttribute() 取得同名特性的值，結(jié)果會(huì)返回 null。可是，自定義屬性在 IE 中會(huì)被當(dāng)作元素的特性，反之亦然。

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

div.removeAttribute("class");

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

創(chuàng)建元素

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

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

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

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

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

document.body.appendChild(div);

一旦將元素添加到文檔樹中，瀏覽器就會(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 來解析這些代碼，那么

元素。但如果是在其他瀏覽器中，
- 元素和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)存管理

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最新活動(dòng)

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章