說說JavaScript中DOM的Node對象

時間 2019-11-10

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

原文原文鏈接

Node對象

Node對象的概念

首先了解一下Node對象怎麼用。DOM的標準規範中提供了Node對象，該對象主要提供了用於解析DOM節點樹結構的屬性和方法。
DOM樹結構主要是依靠節點進行解析，成爲DOM節點樹結構。Node對象是解析DOM節點樹結構的主要入口。
Node對象提供的屬性和方法，能夠實現遍歷節點、插入節點和替換節點的操做。html

繼承鏈關係

Node對象是繼承於EvebtTarget對象的，EvebtTarget是一個用於接收事件的對象。
代碼示例node

console.log(Node.prototype inseabceof EventTarget);

DOM的標準規範中的Document對象和Element對象都是繼承於Node對象的。
代碼示例app

console.log(Document.prototype instanceof Node);
console.log(Element.prototype instanceof Node);

測試Node對象

因爲Node對象是DOM底層封裝的對象，因此咱們並不能經過直接打印Node對象來查看其屬性或方法。
代碼示例工具

console.log(Node.prototype);

運行HTML頁面後，打開開發者工具就能夠看到隱藏的屬性或方法。測試

判斷節點類型

Node對象提供了nodeName、nodeType和nodeValue分別能夠用於獲取指定節點的節點名稱、節點類型和節點的值。
DOM節點樹結構中，咱們開發經常使用的節點有：
1.元素節點：表示HTML頁面中的標籤或結構。
2.屬性節點：表示HTML頁面中的開始標籤包含的屬性
3.文本節點：表示HTML頁面中的標籤所包含的文本內容。prototype

nodeName屬性

Node對象的nodeName屬性用於獲取指定的節點名稱。code

var str = node.nodeName;

針對不一樣的節點，nodeName返回的節點名稱是不一樣的
1.Document文檔節點：#document
2.Element元素節點：元素節點的元素名
3.Attr屬性節點：屬性節點的屬性名
4.Text文本節點：#texthtm

nodeType屬性

Node對象的nodeType屬性用於獲取指定節點的節點類型對象

var type = node.nodeType;

type是一個整數，其表明的是節點類型，對不一樣的節點類型，nodeType返回的節點類型不一樣。繼承

nodeValue屬性

Node對象的nodeValue屬性用於獲取節點的節點值

var value = node.nodeValue;

value是一個包含當前節點的值的字符串
針對不一樣的節點類型，nodeValue返回的節點類型是不一樣的
1.Document文本節點返回null屬性值
2.Element元素節點返回null屬性值
3.Attr屬性節點返回屬性節點的屬性值
4.Text文本節點返回文本節點的內容

遍歷節點

獲取父節點

經過HTML頁面中指定元素查找父級節點，咱們可使用Node對象的parentNode屬性實現

var pNode = node.parentNode;

在一個元素節點的父節點，多是一個元素節點，也多是一個文檔節點。

獲取父元素節點

Node對象出了提供了parentNode屬性能夠獲取指定節點的父節點以外，還提供了parentElement屬性獲取指定節點的父元素節點
在若是一個節點沒有父節點，或者父節點不是一個元素節點的話，parentElement屬性返回null。

父節點與父元素節點的區別

所謂的父節點，並無指定某個接待的父節點必定是哪一個類型的節點。而父元素節點，指定了某個節點的父節點必定是元素節點
1.parentNode：獲取指定節點的父節點，其父節點不必定是元素節點。
2.parentElement：獲取指定節點的元素節點，其父幾點不準是元素節點
若是咱們獲取<html>元素的父節點的話，就是document文檔節點。而document文檔節點並非一個元素節點。

獲取子節點

經過HTML頁面中指定元素查找其子節點，咱們能夠經過如下Node對象的屬性實現：
1.chiNode：獲取指定節點的全部子節點。
2.firstChild：獲取指定節點的第一個子節點。
3.lasrChild：獲取指定節點的最後一個子節點
Node對象提供chidNode屬性用於獲取HTML頁面中指定節點的全部子節點。

var ndList = Node.childNode;

chidNode屬性返回值ndList是一個NodeList對象，而且爲只讀。該屬性獲取一個包含指定節點的全部子節點的集合。
獲取第一個子節點。

var first_child = node.firstChild;

firstChild屬性返回的first_child博愛是當前節點的第一個子節點的引用。
獲取最後一個子節點

var last_child = node.lastChild;

lastChild屬性返回的last_Child表示當前節點的最後一個子節點的引用

空白節點的解決方案

在開發中，空白節點的問題將DOM節點樹結構的解析及操做增長了很多的難度和麻煩，這裏提供了一種比較簡單有效的解決方式：
1.棄用DOM中Node對象用於獲取指定節點的子節點和兄弟節點的屬性。
2.經過使用getElementsByTagName（）方法實現相應功能

刪除節點

Node對象提供了removeChild()方法實現從HTML頁面中刪除之低昂節點。

var oldChild = node.removeChild(child);
element.removeChild(child);

調用removeChild（）方法的node表示child參數的父節點。
child參數表示要刪除的節點。

注意事項

被刪除的節點是否從內存中被銷燬，Mozilla社區有這樣一段描述；
被溢出的這個子節點仍然存在內存中，只是內有添加到當前文檔的DOM樹中。所以，你還能夠把這個節點從新添加會文檔中。

替換節點

Node對象提供了replaceChild（）方法實現HTMLL頁面中節點的替換功能

<head>
    <meta charset="UTF-8">
    <title>替換節點</title>
</head>
<body>
<ul id="parent">
    <li>蘋果</li>
    <li id="mi">小米</li>
    <li>錘子</li>
</ul>
<ul id="game">
    <li>星際爭霸</li>
    <li id="ms">魔獸世界</li>
    <li>王者榮耀</li>
</ul>
<script>
    // 1.獲取目標節點的父節點
    var parent = document.getElementById('parent');
    // 2.獲取目標節點
    var mi = document.getElementById('mi');
    // 3.建立新節點
    var newLi = document.createElement('li');
    var textNode = document.createTextNode('華爲');
    newLi.appendChild(textNode);

    var ms = document.getElementById('ms');

    /*
        parentNode.replaceChild(newChild,currentChild)
        * 參數
          * parentNode - 表示目標(被替換)節點的父節點
          * newChild - 表示替換(新)節點
          * currentChild - 表示目標節點
        * 狀況
          * 是新建立的節點 -> 替換
          * 是頁面已存在的節點 -> 移動+替換
     */
    parent.replaceChild(ms, mi);
</script>
</body>

複製節點

Node對象提供了cloneNode（）方法實現HTML頁面中節點的複製功能。

<head>
    <meta charset="UTF-8">
    <title>複製節點</title>
</head>
<body>
<button id="btn">按鈕</button>
<script>
    var btn = document.getElementById('btn');
    /*
        node.cloneNode(deep)
        * deep參數 - 是否複製當前節點的後代節點
          * true - 表示複製後代節點
          * false - 默認值，表示不復制後代節點
        * 注意 - 複製操做時，注意ID屬性的值
     */
    var newBtn = btn.cloneNode(true);

    var body = document.body;
    body.appendChild(newBtn);

</script>
</body>

注意事項

克隆一個元素街二店會拷貝它全部的屬性以及屬性值，固然也包括屬性上綁定的事件，但不會拷貝那些使用addEventListener（）方法或者node.onclick = fn這種JavaScript動態綁定的事件。在使用Node.appendChild（）或其餘類型的方法將拷貝的節點添加到文檔中以前，那個拷貝點並不屬於當前文檔樹的一部分。也就是說，他沒有父節點。若是deep參數設置爲false，則不會克隆它的任何子節點。該子節點所包含的全部文本也不會被克隆，由於文本自己也是一個或多個的Text節點

相關標籤/搜索

每日一句

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