javaScript操作節點(Element)

firstElementChild跟firstChild的區別在於，有Element代表元素，firstElementChild是元素選擇器，非元素他是不會選擇到的，如文字節點之類的。而firstChild是所有都選擇所有節點，包括文字。

注意：IE8以上的不支援元素選擇器。

一、常用方法：

            元素物件.parentNode    返回節點的父節點

            元素物件.childNodes       返回節點的子節點集合

            元素物件.firstchild     獲得第一個子節點

            元素物件.lastchild      獲得最後一個子節點

            元素物件.previousSlibing    獲取上一個節點的內容

            元素物件.nextsSlibing    獲取下一個節點的內容

            元素物件.childNodes     獲取所有子節點的集合

.firstchild     .lastchild    注：一般不用這兩個方法來獲取物件的子節點，因為無論是空格還是換行都會被計算到物件的節點中，所以獲取到的即使是文字節點也算一個節點。

二、一般我們使用獲取節點的方法，一般是獲取它的元素節點，方法為

元素物件

.firstElementChild   

元素物件.lastElementChild

元素物件.previousSlibing

元素物件.nextSlibing

三、建立，新增，替換，刪除 節點

1.建立一個新的節點

var element  =  document.creatElement( "標籤型別" )

2.將B標籤新增到A標籤的子節點裡，成為子節點

A.appendChild( B )

3.刪除一個節點（首先呼叫它的父節點，然後通過父節點來刪除該節點）

元素物件.parentNode.removeChild( node )

4.替換一個節點（首先也是呼叫它的父節點，然後通過父節點來替換該節點）

例項程式碼：

建立：

<input type="button" onclick="book()" value="確定">
<div></div>
<script type="text/javascript">
    function book() {
        //獲取div容器
       var tv_div= document.getElementsByTagName("div")[0];
       //建立節點
      var tv_img=  document.createElement("img");
      //賦值
        tv_img.setAttribute("src","../images/logo.png");
        tv_img.setAttribute("alt","圖片無法顯示");
       //追加
        tv_div.appendChild(tv_img);

    }
刪除和替換

<input type="button" value="刪除"  onclick="del()" >
<img src="../images/logo.png" id="first">

<input type="button" value="更換圖片"  onclick="update()" >
<img src="../images/logo.png" id="two">

<script type="text/javascript">
    //刪除節點
  function del() {
      var first=document.getElementById("first");
      first.parentNode.removeChild(first);
  }
  //替換節點
 function update() {

     var old_img=document.getElementById("two");
    /* old_img.setAttribute("src","../images/login-icons.png")*/
     //建立一個新節點
     var  new_img=document.createElement("img");
     new_img.setAttribute("src","../images/dd_logo.jpg");
     //替換
     old_img.parentNode.replaceChild(new_img,old_img);
 }

</script>

四、獲得節點的nodeName，nodeValue，nodeType

1.節點的型別nodeType

元素節點 element返回值1   

屬性節點 attr返回值2  

文字節點 text返回值3  

註釋節點 comments 返回值8  

文件 document 返回值9   

這個可以通過節點型別(nodeType)來獲取，後期一般用這個來判斷該物件是什麼型別

2.nodeVlue 節點值 對文字節點有用，假如我們需要獲得一個文字節點，可以他通過child方法來獲取陣列，跟據文字節點的下標用nodeVlue的方法來獲取這個文字資訊，同時nodeVlue對元素節點沒用，都會返回null

3.nodeName  返回元素的標籤名，以大寫形式表示

nodeName 屬性指定節點的節點名稱。

如果節點是元素節點，則 nodeName 屬性返回標籤名。

如果節點是屬性節點，則 nodeName 屬性返回屬性的名稱。

文字節點就返回#text，元素節點就返回該元素標籤的大寫名稱如   （SCRIPT  P)

nodeType  該節點的型別，返回的會根據不同型別返回不同的數值（數值在上面有寫）

五、操作節點的屬性

元素物件.getAttribute(" 屬性名 ")      獲取節點的屬性資訊

元素物件.setAttribute( "屬性名 " ，”屬性值“)       設定節點的屬性資訊

六、操作節點的樣式

通過ID獲得該節點並設定其樣式的方法

document.getElementById(“tv_div" ) . style="blackground-color : red ”；

通過點style 的方法直接給它 新增 樣式型別

document.getElementById（“tv_div" ). classNode="樣式名稱";

也可以直接新增class樣式，輸入class樣式名，就能將當前的樣式覆蓋原來的class樣式，請注意，是覆蓋，不是新增

獲取元素的樣式

alert   (   document.getElementById( " tv_div" ).style.display   )

不相容ie的話，就用下面的方法

alert   (   document.getElementById( " tv_div" ).currentstyle.display   )

例項程式碼：

設定樣式：

<div id="tv_div">
    當前字型樣式
</div>
<input type="button" value="確" onclick="showStyle()">

<script type="text/javascript">
    function showStyle() {
       var tv_div=document.getElementById("tv_div");
        tv_div.style.color="red";
        tv_div.style.fontSize="80px";
        tv_div.style.fontStyle="italic";
        tv_div.style.fontFamily="微軟雅黑"
}
</script>

獲取樣式：

<div id="one_div" style="font-size: 80px;background-color: #0000FF;color: red;">加油</div>

<script type="text/javascript">
    alert(document.getElementById("one_div").style.color)
    alert(document.getElementById("one_div").style.backgroundColor)
    alert(document.getElementById("one_div").style.fontSize)
</script>

更改樣式：

<script type="text/javascript">
    //移入滑鼠
function over() {
       document.getElementById("cartList").className="cartOver";
       document.getElementById("cartList").className="cartListOver";
   }
    function out() {
        //移除滑鼠
document.getElementById("cartList").className="cartOut";
        document.getElementById("cartList").className="cartListOut";
    }


</script>

七、觸發事件型別

onclick  點選觸發

onmouseover    當滑鼠移到某元素之上

onmouseout      當滑鼠從某元素移開

onmousedown   滑鼠按鈕被按下

---------------------------------------------------------------------

1,方法，div.parentNode   返回節點的父節

            div.childNodes      返回節點的子節點集合

            div.firstchild     獲得第一個子節點

            div.lastchild     獲得最後一個子節點

            div.previousSlibing    獲取上一個節點的內容

            div.nextsSlibing    獲取下一個節點的內容

            div.childNodes     獲取所有子節點的集合

div.firstchild     獲得第一個子節點                  div.lastchild      獲得最後一個子節點

注：一般不用這兩個方法來獲取物件的子節點，因為無論是空格還是換行都會被計算到物件的節點中，多以獲取到的即使是文字節點也算一個節點，

2一般我們使用獲取節點的方法，一般是獲取它的元素節點，方法為

div.firstElementChild

div.lastElementChild

div.previousSlibing

div.nextSlibing

他只會獲取物件子節點中的元素節點

3建立，新增，替換，刪除

建立一個新的節點

var element  =  document.creatElement( "標籤型別" )

將B標籤新增到A標籤的子節點集合的

A.appendChild( B )

刪除一個節點（首先呼叫它的父節點，然後通過父節點來刪除該節點）

div.parentNode.removeChild( node )

替換一個節點（首先也是呼叫它的父節點，然後通過父節點來替換該節點）

div.parentNode.replaceChild( newnode, oldnode)

4獲得節點的nodeName，nodeValue，nodeType

nodeType根據型別不同就返回

1==元素element，

2==屬性attr，

3==文字text，

8==註釋comments，

9==文件document

注：這些返回的數字我們可以配套 i f 判斷來進行別的操作

nodeVlue對文字節點有用，假如我們需要獲得一個文字節點，可以他通過child方法來獲取陣列，跟據文字節點的下標用nodeVlue的方法來獲取這個文字資訊，同時nodeVlue對元素節點沒用，都會返回null

nodeName會返回對應節點的name資訊，假如是

文字節點就返回#text

元素節點就返回該元素標籤的大寫名稱如   （SCRIPT  UL  LI.....)

5操作節點的屬性

相關推薦