DOM-Element類型

Element類型

Element類型用于表現XML或HTML元素，提供了對元素標簽名、子節點及特性的訪問。Element節點具有以下特征：

nodeType的值為1
nodeName的值為元素的標簽名
nodeValue的值為null
parentNode的值為Document或Element
其子節點可能是Element、Text、CDATASection、EntityReference、ProcessingInstruction或者Comment

要訪問元素的標簽名，可以使用nodeName屬性、也可以使用tagName屬性；這兩個屬性會返回相同的值

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

可以像下面這樣取得這個元素以及標簽名

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

div.tagName實際上輸出的是大寫形式，通常轉換為小寫形式

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

1、HTML元素

所有HTML元素都由HTMLElement類型表示，不是直接通過這個類型，也是通過它的子類型來表示。每個HTML元素都存在下列標準特性：

id,元素在文檔中的唯一標識符。
title，有關元素的附加說明信息，一般通過工具提示條顯示出來。
lang，元素內容的語言代碼，很少使用。
dir，語言的方向
className，與元素的class特性相對應

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

當然也可以給他們賦予新值

2、取得特性

操作特性的DOM方法主要有三個：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元素本身的屬性來訪問。不過只有公認的特性才會以屬性的形式添加到DOM對象中。

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

因為id和align在HTML中是<div>公認的特性，因此該元素的DOM對象中也將存在對應的屬性。不過自定義特性my_special_attribute在Safari、Opera、Chrome及Firefox中是不存在的；但IE卻會為
自定義特性也創建屬性，例如：

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

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

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

3、設置特性

setAttribute()接受兩個參數：要設置的特姓名和值。如果特性已經存在，setAttribute()會以指定的值替換現有的值；如果特性不存在則創建改屬性并設置相應的值

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

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

1         div.id = 'someOtherId';

不過，像下面這樣為DOM元素添加一個自定義的屬性，該屬性不會自動成為元素的特性

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

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

1         div.removeAttribute('class');

4、attribute屬性

Element類型是使用attribute屬性的唯一一個DOM節點類型。attributes屬性中包含一個NamedNodeMap，與NodeList類似，也是一個“動態”集合。元素的每一個特性都由一個Attr節點表示，每個節點都保存在NamedNodeMap對象中。NamedNodeMap對象擁有下列方法。

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

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

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

以下是使用方括號語法的簡寫形式：

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

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

以下代碼展示了如何迭代元素的每個特性，然后將他們構造成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、創建元素

使用document.createElement()方法可以創建新元素。這個方法只接受一個參數，即要創建元素的標簽名。例如創建一個<div>元素。

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

在使用createElement()方法創建新元素的同時，也為新元素設置了ownerDocuemnt屬性。此時，還可以操作元素的特性，為它添加更多的子節點，以及執行其他的操作

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

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

6、元素的子節點

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

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

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

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

如果需要通過childNodes屬性遍歷子節點，那么通常都要先檢查一下nodeType屬性，如下：

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

如果像通過某個特定的標簽名取得子節點或后代節點可以使用getElementsByTagName()方法。

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

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