【JavaScript】DOM之Node對象

時間 2019-12-09

標籤 JavaScript dom node 對象欄目 JavaScript 简体版

原文原文鏈接

Node對象

Node對象是什麼

該對象封裝DOM的底層對象，
該對象只是提供了操做屬性和方法，並不能直接打印操做屬性和方法html

<body>
<button id="btn"></button>
<script>
    console.log(document);
    var btnElement = document.getElementById('btn');
    console.log(btnElement instanceof HTMLButtonElement);
    console.log(btnElement instanceof Node);//true
//    定位月面元素其實就是Node對象-爲元素節點
    console.log(Node.prototype);

    var btn = document.createElement('button');
    console.log(btn instanceof Node);//true
</script>
</body>

繼承鏈關係

Node對象繼承與EventTarget對象node

<body>
<script>
console.log(Node.prototype instanceof EventTarget);// true

console.log(Document.prototype instanceof Node);// true
console.log(Element.prototype instanceof Node);// true
</script>
</body>

判斷節點類型

以nodeName，nodeType和nodeValue用於獲取節點名稱和節點類型還有節點的值瀏覽器

body>
<button id="btn" class="cls">按鈕</button>
<script>
    var btnElement = document.getElementById('btn');
    console.log(btnElement.nodeName);
    console.log(btnElement.nodeType);
    console.log(btnElement.nodeValue);

    var textNode = btnElement.firstChild;
    console.log(textNode.nodeName);
    console.log(textNode.nodeType);
    console.log(textNode.nodeValue);

    textNode.nodeValue = '新按鈕';

    var attrNode = btnElement.getAttributeNode('class');
    console.log(attrNode.nodeName);
    console.log(attrNode.nodeType);
    console.log(attrNode.nodeValue);

</script>
</body>

遍歷節點

獲取父節點

以parentNode屬性來獲取頁面中父節點網絡

<body>
<ul id="parent">
    <li>單機遊戲</li>
    <li id="wl">網絡遊戲</li>
    <li>手機遊戲</li>
</ul>
<script>
    var wl = document.getElementById("wl");
    var parent1 =wl.parentNode;
    console.log(parent1);
    var parent2 =wl.parentNode;
    console.log(parent2);

    var html = document.documentElement;
    console.log(html.parentNode);
    console.log(html.parentElement);
</script>
</body>

獲取子節點

經過childNodes屬性來獲取頁面中全部的子節點
注意：childNode [s]
經過firstChind屬性來獲取頁面中第一個子節點
經過lastChind屬性來獲取頁面中最後一個子節點app

<body>
<ul id="parent">
    <li>單機遊戲</li>
    <li id="wl">網絡遊戲</li>
    <li>手機遊戲</li>
</ul>
<script>
    var parent = document.getElementById('parent');
    var chldren = myToole.childNodes(parent);
    console.log(chldren);

    var firstChild = myTools.firstChild(parent);
    console.log(firstChild);

    var lastChild = parent.lastChild;
    lastChild = lastChild.previousSibling;
    console.log(lastChild);
</script>
</body>

空白節點

瀏覽器解析頁面樹結構，會產生空文本的空白節點，是由其換行引發的prototype

獲取相鄰兄弟節點
經過以nextSibling屬性來獲取節點的後相鄰兄弟節點code

<script>
    var tjElement = document.getElementById('tj');

    console.log(tjElement.previousElementSibling);
    console.log(tjElement.nextElementSibling);

    var parent = document.getElementById('city');
    var children = parent.children;

    console.log(children);

    /*var index = children.indexOf(tjElement);
    console.log(index);*/

    /*var arr = [];
    for (var i=0; i<children.length; i++) {
        arr.push(children[i]);
    }
    console.log(arr);

    var index = arr.indexOf(tjElement);
    console.log(index);*/

    var index = 0;
    for (var i=0; i<children.length; i++) {
        if (children[i] === tjElement) {
            index = i;
        }
    }
    console.log(index)

</script>
</body>

插入節點

appendChid()方法

指定子節點列表中最後增添個新子節點htm

<body>
<ul id="yx">
    <li>單機遊戲</li>
    <li id="wl">網絡遊戲</li>
    <li>手機遊戲</li>
</ul>
<script>
    var yx = document.getElementById('yx');
    var newLi = document.createElement('li');
    var textNode = document.createTextNode('網頁遊戲');
    newLi.appendChild(textNode);

    yx.appendChild(newLi);

</script>
</body>

insertBefore()方法

<body>
<ul id="dm">
    <li>鳴人</li>
    <li id="zz">佐助</li>
    <li>小櫻</li>
</ul>
<script>
    var dm = document.getElementById('dm');
    // 獲取指定父節點
    var newLi = document.createElement('li');
    // 建立新子節點
    var textNode = document.createTextNode('雛田');
    newLi.appendChild(textNode);
    // 獲取目標節點
    var zz = document.getElementById('zz');

    dm.insertBefore(newLi, zz);
    // DOM中的Node對象並無提供 insertAfter() 方法
</script>

刪除節點

經過removeChild()方法來刪除在頁面中指定的節點
child參數表示要刪除的節點對象

<body>
<ul id="yx">
    <li>單機遊戲</li>
    <li id="wl">網絡遊戲</li>
    <li>手機遊戲</li>
</ul>
<li id="wy">網頁遊戲</li>
<script>
    var yx = document.getElementById('yx');
    var wl = document.getElementById('wl');
    yx.removeChild(wl);

    var wy = document.getElementById('wy');
    yx.removeChild(wy);
</script>
</body>

替換節點

經過removeChild()方法來替換在頁面中指定的節點
oldChild參數表示要替換的節點繼承

<body>
<ul id="yx">
    <li>單機遊戲</li>
    <li id="wl">網絡遊戲</li>
    <li>手機遊戲</li>
</ul>
<ul id="dm">
    <li>鳴人</li>
    <li id="zz">佐助</li>
    <li>小櫻</li>
</ul>
<script>
    var yx = document.getElementById('yx');
    var wl = document.getElementById('wl');
    var newLi = document.createElement('li');
    var textNode =document.createTextNode('網頁遊戲');
    newLi.appendChild(textNode);
    var zz = document.getElementById('zz');
    yx.replaceChild(zz,wl);
</script>
</body>

複製節點

經過cloneNode()方法來複制在頁面中指定的節點
參數deep表示是否執行深度克隆，若是爲true，則會克隆該節點的全部後代節點
若是爲false，則會克隆節點自己

<body>
<button id="btn">按鈕</button>
<script>
    var btn = document.getElementById('btn');
    var newBtn = btn.choneNodes(true);
    var body = document.body;
    body.appendChild(newBtn);
</script>
</body>

textContent屬性

是指在頁面中指定的節點和其後代節點的文本內容

<body>
<script>
    var pElement = document.getElementById('p1');

    // 節點方式進行解析
    /*var textNode = pElement.firstChild;
    var content = textNode.nodeValue;*/

    /*
       textContent屬性
     * 設置或獲取指定節點的文本內容
     * 具備瀏覽器兼容問題(IE 6/7/8不支持)
     */
    var content;
    if (pElement.textContent === undefined) {
        content = pElement.innerText;
        // IE 6/7/8不支持
    } else {
        content = pElement.textContent;
        // 其餘瀏覽器支持
    }

    console.log(content);

</script>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。