DOM的Element類型
Element類型用於表現XML或HTML元素，提供了對元素的標簽名，子節點及特性訪問。
特征：
- nodeType值為1.
- nodeName的值為元素標簽名.
- nodeValue的值為null.
- parentNode可能是Document或者Element
獲取標簽名tagName 和nodeName：
var d=document.getElementById('myDiv');
alert(d.tagName); // DIV,HTML中的標簽名全部為大寫，XML中標簽名與源碼一致
alert(d.nodeName==d.tagName); // true
與標簽名比較是最好轉化一致的大小寫
if(element.tagName.toLowerCase()=="div")
1.HTML元素
每個HTML元素都有特性：
-
id:元素在文檔中的唯一標識
-
title:有關元素的附加信息
<p title="p標簽">www</p>
DOM的Element類型
Element類型用於表現XML或HTML元素，提供了對元素的標簽名，子節點及特性訪問。
特征：
- nodeType值為1.
- nodeName的值為元素標簽名.
- nodeValue的值為null.
- parentNode可能是Document或者Element
獲取標簽名tagName 和nodeName：
var d=document.getElementById('myDiv');
alert(d.tagName); // DIV,HTML中的標簽名全部為大寫，XML中標簽名與源碼一致
alert(d.nodeName==d.tagName); // true
與標簽名比較是最好轉化一致的大小寫
if(element.tagName.toLowerCase()=="div")
1.HTML元素
每個HTML元素都有特性：
-
id:元素在文檔中的唯一標識
-
title:有關元素的附加信息
<p title="p標簽">www</p>
-
lang:元素內容語言代碼
-
dir:語言方向
-
className:與class特性應
<div class="div1" id="divc">顏色</div> ... var dc=document.getElementById('divc'); dc.className="div2"; ... .div1{ color:pink; } .div2{ color:yellow; }
2.取得特性
getAttribute(),setAttribute(),removeAttribute()這三種方法。可以針對任何特性使用
<div id="myDiv" class="div3" myarrt="haha">dd</div>
...
var div=document.getElementById('myDiv');
alert(div.getAttribute("id"));//myDiv
alert(div.getAttribute("class"));//div3 這里不要用className
alert(div.getAttribute("lang"));//null
//自定義屬性
alert(div.getAttribute("myarrt"));//haha
特性名稱不分大小寫。
自定義屬性可能在一些瀏覽器上是不存在的。
3.設置特性
setAttribute()接收兩個參數：要設置的特性名和值
<div id="changDiv" class="div1">change</div>
...
var div=document.getElementById('changDiv');
div.setAttribute("class","div2");
div.setAttribute("title","change");
我們也可以這樣設置值
div.id="some";
div.title="other";
但不可以這樣為DOM元素添加自定義屬性,該屬性不會自動成為元素的特性，但是部分瀏覽器除外
div.myColor="blue";
alert(div.getAttribute("myColor"));//null
removeAttribute()這個方法用於徹底刪除屬性。
div.removeAttribute("class")
4.attributes屬性
-
lang:元素內容語言代碼
-
dir:語言方向
-
className:與class特性應
<div class="div1" id="divc">顏色</div> ... var dc=document.getElementById('divc'); dc.className="div2"; ... .div1{ color:pink; } .div2{ color:yellow; }
2.取得特性
getAttribute(),setAttribute(),removeAttribute()這三種方法。可以針對任何特性使用
<div id="myDiv" class="div3" myarrt="haha">dd</div>
...
var div=document.getElementById('myDiv');
alert(div.getAttribute("id"));//myDiv
alert(div.getAttribute("class"));//div3 這里不要用className
alert(div.getAttribute("lang"));//null
//自定義屬性
alert(div.getAttribute("myarrt"));//haha
特性名稱不分大小寫。
自定義屬性可能在一些瀏覽器上是不存在的。
3.設置特性
setAttribute()接收兩個參數：要設置的特性名和值
<div id="changDiv" class="div1">change</div>
...
var div=document.getElementById('changDiv');
div.setAttribute("class","div2");
div.setAttribute("title","change");
我們也可以這樣設置值
div.id="some";
div.title="other";
但不可以這樣為DOM元素添加自定義屬性,該屬性不會自動成為元素的特性，但是部分瀏覽器除外
div.myColor="blue";
alert(div.getAttribute("myColor"));//null
removeAttribute()這個方法用於徹底刪除屬性。
div.removeAttribute("class")
4.attributes屬性
5.創建元素
創建元素的方法是：
var newele=document.createElement("標簽名")；
另一種創建方式可以將元素的屬性添加進去
var newele=document.createElement("<div id=\"newId\"></div>")；
將新元素添加到文檔數中：
document.appendChhild(newele);
6.元素子節點
元素的childNodes屬性中包含了它所有的子節點，這些節點可能是元素，文本節點，注釋或者處理指令。但是不同瀏覽器有不同。
<ul id="aul">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
在IE的某些比較早的版本中，會認為上面的ul節點有3個li子節點，而其他瀏覽器認為有7個子節點，它們認為ul里面包括了3個li元素節點和4個文本節點
如果
<ul id="aul"><li>item 1</li><li>item 2</li><li>item 3</li></ul>
這樣所有的瀏覽器都返回的時候一樣的長度。
由上可得：我們在遍歷元素子節點時，為了能准確的對元素節點操作，我們在執行某項操作前需要檢測一下子節點的類型。
var ul=document.getElementById('aul');
alert(ul.childNodes.length);
for(var i=0;i<ul.childNodes.length;i++){
if(ul.childNodes[i].nodeType==1)
{
alert(i+":"+ul.childNodes[i].nodeName);
//1:li
//3:li
//5:li
}
}