DOM-Element類型

Element類型

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、CDATASection、EntityReference、ProcessingInstruction或者Comment

要訪問元素的標(biāo)簽名，可以使用nodeName屬性、也可以使用tagName屬性；這兩個(gè)屬性會(huì)返回相同的值

1          <div id="myDiv"></div>

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

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

div.tagName實(shí)際上輸出的是大寫形式，通常轉(zhuǎn)換為小寫形式

1         if (element.tagName.toLowerCase() == "div"){//這樣最好2             //在此執(zhí)行操作3         }

1、HTML元素

所有HTML元素都由HTMLElement類型表示，不是直接通過這個(gè)類型，也是通過它的子類型來表示。每個(gè)HTML元素都存在下列標(biāo)準(zhǔn)特性：

id,元素在文檔中的唯一標(biāo)識(shí)符。
title，有關(guān)元素的附加說明信息，一般通過工具提示條顯示出來。
lang，元素內(nèi)容的語(yǔ)言代碼，很少使用。
dir，語(yǔ)言的方向
className，與元素的class特性相對(duì)應(yīng)

1         <div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>2 3         var div = document.getElementById('myDiv');4         console.log(div.id); //myDiv5         console.log(div.className); //bd6         console.log(div.title); //BOdy text7         console.log(div.lang); //en8         console.log(div.dir); //ltr

當(dāng)然也可以給他們賦予新值

2、取得特性

操作特性的DOM方法主要有三個(gè)：getAttribute()、setAttribute()、removeAttribute()

1         var div = document.getElementById('myDiv');2         console.log(div.getAttribute('id'));//myDiv3         console.log(div.getAttribute('class')); //bd4         console.log(div.getAttribute('title')); //BOdy text5         console.log(div.getAttribute('lang')); //en6         console.log(div.getAttribute('dir'));//ltr

如果給定的名稱特性不存在，則返回null;

通過getAttribute()方法也可以取得自定義特性，例如：

1         <div id="myDiv" my_special_attribute="hello!"></div>2         var value = div.getAttribute('my_special_attribute');

任何元素的所有特性，也都可以通過DOM元素本身的屬性來訪問。不過只有公認(rèn)的特性才會(huì)以屬性的形式添加到DOM對(duì)象中。

1         <div id="myDiv" align="left" my_special_attribute="hello!"></div>

因?yàn)閕d和align在HTML中是<div>公認(rèn)的特性，因此該元素的DOM對(duì)象中也將存在對(duì)應(yīng)的屬性。不過自定義特性my_special_attribute在Safari、Opera、Chrome及Firefox中是不存在的；但I(xiàn)E卻會(huì)為
自定義特性也創(chuàng)建屬性，例如：

1         console.log(div.id) //myDiv2         console.log(div.my_special_attribute) //underfined(IE除外)

有兩類特殊的特性，他們雖然有對(duì)應(yīng)的屬性名，但屬性的值與通過getAttribute()返回的值并不相同。第一類就是style,在通過getAttribute()訪問時(shí)，返回的是css文本，而通過屬性來訪問他則返回的是一個(gè)對(duì)象。第二類就是onclick這樣的時(shí)間處理程序。通過getAttribute()訪問時(shí)，返回的是相應(yīng)代碼的文本，而通過屬性來訪問時(shí)，則會(huì)返回一個(gè)JavaScript函數(shù)

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

3、設(shè)置特性

setAttribute()接受兩個(gè)參數(shù)：要設(shè)置的特姓名和值。如果特性已經(jīng)存在，setAttribute()會(huì)以指定的值替換現(xiàn)有的值；如果特性不存在則創(chuàng)建改屬性并設(shè)置相應(yīng)的值

1         div.setAttribute('id','someOtherId');2         div.setAttribute('class','ft');

所有特性都是屬性，所以可以直接給屬性賦值：

1         div.id = 'someOtherId';

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

1         div.mycolor = "red";2         console.log(div.getAttribute('mycolor')); //null(IE除外)

removeAttribute()用于徹底刪除元素的特性：

1         div.removeAttribute('class');

4、attribute屬性

Element類型是使用attribute屬性的唯一一個(gè)DOM節(jié)點(diǎn)類型。attributes屬性中包含一個(gè)NamedNodeMap，與NodeList類似，也是一個(gè)“動(dòng)態(tài)”集合。元素的每一個(gè)特性都由一個(gè)Attr節(jié)點(diǎn)表示，每個(gè)節(jié)點(diǎn)都保存在NamedNodeMap對(duì)象中。NamedNodeMap對(duì)象擁有下列方法。

getNamedItem(name):返回nodeName屬性等于name的節(jié)點(diǎn)；
removeNamedItem(name):從列表中移除nodeName屬性等于name的節(jié)點(diǎn)
setNamedItem(node):向列表中添加節(jié)點(diǎn)，以節(jié)點(diǎn)的nodeName屬性為索引
item(pos):返回位于數(shù)字pos位置處的節(jié)點(diǎn)

attributes屬性中包含一系列節(jié)點(diǎn)，每個(gè)節(jié)點(diǎn)的nodeName就是特性的名稱，而節(jié)點(diǎn)的nodeValue就是特性的值。要取得id特性，可以使用以下代碼：

1         var id = element.attributes.getNamedItem("id").nodeValue;

以下是使用方括號(hào)語(yǔ)法的簡(jiǎn)寫形式：

1         var id = element.attributes["id"].nodeValue = "someOtherId";

調(diào)用removeNamedItem()方法與在元素上調(diào)用removeAttribute()方法的效果一樣：直接刪除給定名稱的特性。他們的唯一區(qū)別就是removeNamedItem()返回表示刪除特性的Attr節(jié)點(diǎn)

以下代碼展示了如何迭代元素的每個(gè)特性，然后將他們構(gòu)造成name="value" name="value"這樣的字符串格式

 1         function outputAttributes(element){ 2             var pairs = new Array(), 3                 attrName, 4                 attrValue, 5                 i, 6                 ien; 7  8             for(i=0,len=element.attributes.length;i<len;i++){ 9                 attrName = element.attributes[i].nodeName;10                 attrValue = elemetn.attributes[i].nodeValue;11                 if(element.attributes[i].specified){12                 pairs.push(attrName + "=\"" + attrValue + "\"");13                 }14             }15             return pairs.join(" ");16         }

5、創(chuàng)建元素

使用document.createElement()方法可以創(chuàng)建新元素。這個(gè)方法只接受一個(gè)參數(shù)，即要?jiǎng)?chuàng)建元素的標(biāo)簽名。例如創(chuàng)建一個(gè)<div>元素。

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

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

1         div.id = "myNewDiv";2         dov.className = "box";

要把這些新元素添加到文檔樹中可以使用appendChild()、insetrBefore()或者replaceChild()方法。

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

元素可以由任意數(shù)目的子節(jié)點(diǎn)和后代節(jié)點(diǎn)，不同瀏覽器在看待這些節(jié)點(diǎn)方面存在顯著的不同，以下面的代碼為例：

1         <ul id="myList">2             <li>Item 1</li>3             <li>Item 2</li>4             <li>Item 3</li>5         </ul>

如果是IE累解析這些代碼，那么<ul>元素會(huì)有3個(gè)節(jié)點(diǎn)，分別是3個(gè)<li>元素。但如果是在其他瀏覽器中。<ul>元素都會(huì)有7個(gè)元素，包過3個(gè)<li>元素和4個(gè)文本節(jié)點(diǎn)（表示<li>元素之間的空白符）。
如果像下面這樣將元素間的空白符刪除，那么所有的瀏覽器都會(huì)返回相同的數(shù)目的子節(jié)點(diǎn)

        <ul id="myList"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>

如果需要通過childNodes屬性遍歷子節(jié)點(diǎn)，那么通常都要先檢查一下nodeType屬性，如下：

1         for(var i=0;len=element.childNodes.length;i<len;i++){2             if(element.childNodes[i]nodeType == 1){3                 //執(zhí)行某些操作4             }5         }

如果像通過某個(gè)特定的標(biāo)簽名取得子節(jié)點(diǎn)或后代節(jié)點(diǎn)可以使用getElementsByTagName()方法。

1         var ul = documet.getElementById('myList');2         var items = ul.getElementsByTagName('li');

要注意的是，這里<ul>的后代中只包含直接子元素。不過，如果它包含更多層次的后代元素，那么各個(gè)層次中包含的<li>元素也都會(huì)返回。