js中的節點屬性 和上下級訪問關系


一、節點屬性

1、nodeType:用於檢測節點的類型

返回值為:1、元素節點  2、屬性節點  3、文本節點

2、nocdName :返回節點的標簽名為全大寫 ;如 DIV;

3、nodeValue :對於元素來說nodeValue返回值為null;

 

二、節點訪問關系

<div id="fa">
        <div id="box">
            <p>這是p標簽</p>
            <span>這是span</span>
        </div>
</div>
var box = document.getElementById('box');
獲取box的父節點,獲取結果包含文本節點
box.parentNode;
 
獲取box的所有子節點;,獲取結果包含文本節點
box.childNodes
 
獲取box的所有  元素  子節點;(非常好用);
box.children;
 
獲取box的第一個子元素;ie9以下不支持
box.firstChild;
 
獲取box的最后一個子節點;ie9以下不支持
box.lastChild;
 
同級訪問關系;
獲取下一個兄弟節點,會獲取到文本節點;
box.nextSibling;
 
獲取下一個同級元素節點,ie9以下不支持
box.nextElementSibling
 
獲取上一個同級兄弟節點,會獲取到文本節點;
box.previousSibling;
 
獲取上一個元素兄弟節點、ie9以下不支持
box.previousElementSibling;
 
同級節點如果無法獲取對應節點返回 null
 
三、節點的移動方式
 
1、父節點.appendChild(要移動的節點);此方法 會將子節點移動到父節點所有子元素之后;
 
2、父節點.insertBefore(要移動的節點,參考節點);插入子節點會被添加的參考節點的最前面;
當參考節點為null或undefined時 此方法和 appendChild方法相同;
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM