DOM節點訪問關係與操作示例

阿新 • • 發佈：2019-01-13

一.DOM 訪問關係（節點的獲得）

節點的訪問關係，是以屬性的方式存在的。
DOM的節點並不是孤立的，因此可以通過DOM節點之間的相對關係對它們進行訪問。

父節點（ parentNode ）

呼叫者就是節點。一個節點只有一個父節點。呼叫方式就是節點.parentNode.

   //box1是box的父節點
    var box2 = document.getElementsByClassName("box2")   [0];
    var box2 = document.getElementById("box2")
    console.log(box2.parentNode);// 
在控制檯中列印父盒子box1

兄弟節點

Sibling就是兄弟的意思。
Next：下一個的意思。
Previous:前一個的意思。

nextSibling：呼叫者是節點。IE678中指下一個元素節點（標籤）。在火狐谷歌IE9+以後都指的是下一個節點（包括空文件和換行節點）。

nextElementSibling：在火狐谷歌IE9都指的是下一個元素節點。

總結：在IE678中用nextSibling，在火狐谷歌IE9+以後用nextElementSibling

//通常的程式碼書寫格式
下一個兄弟節點=節點.nextElementSibling || 節點.nextSibling

//nextElementSibling下一個兄弟節點
console.log(box2.nextElementSibling);

previousSibling：呼叫者是節點。IE678中指前一個元素節點（標籤）。在火狐谷歌IE9+以後都指的是前一個節點（包括空文件和換行節點）。

previousElementSibling：在火狐谷歌IE9都指的是前一個元素節點。

//通常的程式碼書寫格式
前一個兄弟節點=節點.previousElementSibling|| 節點.previousSibling

單個子節點

firstChild：呼叫者是父節點。IE678中指第一個子元素節點（標籤）。在火狐谷歌IE9+以後都指的是第一個節點（包括空文件和換行節點）。

firstElementChild:在火狐谷歌IE9都指的第一個元素節點。

//通常的程式碼書寫格式
第一個子節點=父節點.firstElementChild || 父節點.firstChild

lastChild:呼叫者是父節點。IE678中指最後一個子元素節點（標籤）。在火狐谷歌IE9+以後都指的是最後一個節點（包括空文件和換行節點）。

lastElementChild：在火狐谷歌IE9都指的最後一個元素節點。

//通常的程式碼書寫格式
第一個子節點=父節點.lastElementChild|| 父節點.lastChild

所有子節點

childNodes：它是標準屬性，它返回指定元素的子元素集合，包括HTML節點，所有屬性，文字節點（他還是W3C的親兒子）

火狐谷歌等高本版會把換行也看做是子節點
nodeType==1時才是元素節點(標籤)
nodeType == 1 表示的是元素節點記住元素就是標籤
nodeType == 2 表示是屬性節點瞭解
nodeType == 3 是文字節點瞭解

//通常的程式碼書寫格式
子節點陣列 = 父節點.childNodes;   //獲取所有節點。

children：非標準屬性，它返回指定元素的子元素集合。

但它只返回HTML節點，甚至不返回文字節點，雖然不是標準的DOM屬性，但它和innerHTML方法一樣，得到了幾乎所有瀏覽器的支援。
children在IE6/7/8中包含註釋節點
在IE678中，註釋節點不要寫在裡面。

//通常的程式碼書寫格式
子節點陣列 = 父節點.children;   //用的最多。

DOM的節點操作

獲取：getAttribute(名稱)
設定：setAttribute(名稱, 值)
刪除：removeAttribute(名稱)
注意：IE6、7不支援。
呼叫者：節點。有引數。沒有返回值。
每一個方法意義不同。

建立

var aaa = document.createElement("li");
var bbb = document.createElement("afadsfadsf");
    console.log(aaa);//box中多出li標籤
    console.log(bbb);//box中多出afadsfadsf標籤

新增

   var box1 = document.getElementsByClassName("box1")[0];
    box1.appendChild(aaa);
    box1.insertBefore(bbb,aaa);//在bbb之前新增aaa

刪除

 box1.removeChild(bbb);
    aaa.parentNode.removeChild(aaa);//自殺，自己刪除自己

克隆

var ccc = box1.cloneNode();//只克隆節點本身不克隆內容
    var ddd = box1.cloneNode(true);//克隆節點本身和節點內容
    console.log(ccc);
    console.log(ddd);

總體程式碼

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div class="box1">
    <div class="box2" id="box2"></div>
    <div class="box3"></div>
</div>

<script>

    //節點的訪問關係是以屬性形式存在

    //1.box1是box的父節點
//    var box2 = document.getElementsByClassName("box2")[0];
//    var box2 = document.getElementById("box2")
//    console.log(box2.parentNode);
//
//    //2.nextElementSibling下一個兄弟節點
//    console.log(box2.nextElementSibling);
//
//    //firstElementChild第一個子節點
//    console.log(box2.parentNode.firstElementChild);
//
//    //所有子節點
//    console.log(box2.parentNode.childNodes);
//    console.log(box2.parentNode.children);



    //節點的操作
    //1.建立
    var aaa = document.createElement("li");
    var bbb = document.createElement("afadsfadsf");
    console.log(aaa);
    console.log(bbb);

    //新增
    var box1 = document.getElementsByClassName("box1")[0];
    box1.appendChild(aaa);
    box1.insertBefore(bbb,aaa);

    //刪除
    box1.removeChild(bbb);
    aaa.parentNode.removeChild(aaa);//自殺，自己刪除自己

    //克隆
    var ccc = box1.cloneNode();//只克隆節點本身不克隆內容
    var ddd = box1.cloneNode(true);//克隆節點本身和節點內容
    console.log(ccc);
    console.log(ddd);

</script>
</body>
</html>

節點屬性的操作

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function () {

            var eleNode = document.getElementsByTagName("img")[0];

            //屬性、賦值獲取兩種方式
            //1.元素節點.屬性或者元素節點[屬性]
            eleNode.src = "image/jd2.png";
            eleNode.aaa = "bbb";
            console.log(eleNode.aaa);
            console.log(eleNode.src);
            console.log(eleNode.tagName);
            console.log(eleNode["title"]);
            console.log(eleNode["className"]);
            console.log(eleNode["alt"]);

            //2.元素節點.方法();
            console.log(eleNode.getAttribute("id"));
            eleNode.setAttribute("id","你好");
            eleNode.setAttribute("ccc","ddd");

            eleNode.removeAttribute("id");
        }
    </script>
</head>
<body>
<img src="image/jd1.png" class="box" title="圖片" alt="京東狗" id="aaa"/>
</body>
</html>