js——DOM的Element類型（四）

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
            }
        }