說說JavaScript中DOM的Node對象

Batkid 發布于2019-08-23 11:39 / 848人閱讀

摘要：對象對象的概念首先了解一下對象怎么用。對象是解析節點樹結構的主要入口。繼承鏈關系對象是繼承于對象的，是一個用于接收事件的對象。代碼示例的標準規范中的對象和對象都是繼承于對象的。屬性對象的屬性用于獲取指定的節點名稱。參數表示要刪除的節點。

Node對象 Node對象的概念

首先了解一下Node對象怎么用。DOM的標準規范中提供了Node對象，該對象主要提供了用于解析DOM節點樹結構的屬性和方法。
DOM樹結構主要是依靠節點進行解析，成為DOM節點樹結構。Node對象是解析DOM節點樹結構的主要入口。
Node對象提供的屬性和方法，可以實現遍歷節點、插入節點和替換節點的操作。

繼承鏈關系

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

console.log(Node.prototype inseabceof EventTarget);

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

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頁面中的標簽所包含的文本內容。

nodeName屬性

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

var str = node.nodeName;

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

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：獲取指定節點的元素節點，其父幾點不許是元素節點
如果我們獲取元素的父節點的話，就是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頁面中節點的替換功能


    
    替換節點



    蘋果
    小米
    錘子


    星際爭霸
    魔獸世界
    王者榮耀

復制節點

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


    
    復制節點

注意事項

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

GPU云服務器云服務器 javascript的dom對象 javascript的dom編程刪除dom對象 dom對象操作

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97275.html

說說VNode節點(Vue.js實現)

摘要：可能會有理解存在偏差的地方，歡迎提指出，共同學習，共同進步。這樣做減少了很多不需要的操作，大大提高了性能。當上已經綁定的時候，代表該對象已經被過了，所以創建一個空節點。寫在前面因為對Vue.js很感興趣，而且平時工作的技術棧也是Vue.js，這幾個月花了些時間研究學習了一下Vue.js源碼，并做了總結與輸出。文章的原地址：https://github.com/answershuto...

cncoder 2019-08-21 16:24 評論0 收藏0
說說對JSX的認識

摘要：認識引子最近幾個月做的一個項目，使用了技術體系，自然而然的用到了。下面就總結一下自己對的認識。而這無疑增加了框架的門檻和復雜度。在被渲染之前，所有的數據都被轉義成為了字符串處理。以避免跨站腳本攻擊。表示對象將編譯成調用。 JSX認識引子最近幾個月做的一個項目，使用了react技術體系，自然而然的用到了JSX。下面就總結一下自己對JSX的認識。什么是JSX 即JavaScript...

clasnake 2019-08-20 16:20 評論0 收藏0
JavaScript基礎知識總結

摘要：字面量方式這是最簡單最基本的一種方法。簡單的構造函數方式通過這樣的形式創建對象。結合上面的簡單構造函數和原型，一個完整的構造函數應該是這樣的還有一種方法就是提供的簡單實現下中的，，創建一個對象談談對象的理解。避免使用表達式又稱動態屬性。要點：數據類型、面向對象、繼承、閉包、插件、作用域、跨域、原型鏈、模塊化、自定義事件、異步裝載回調、模板引擎、Nodejs等。 JS基本類型有什么？引...

lakeside 2019-08-19 17:40 評論0 收藏0
2019前端面試那些事兒

摘要：雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總新特性，語義化瀏覽器的標準模式和怪異模式和的區別使用的好處標簽廢棄的標簽，和一些定位寫法放置位置和原因什么是漸進式渲染模板語言原理盒模型，新特性，偽雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總1.HTMLHTML5新特性，語義化瀏覽器的標準模式和怪...

JeOam 2019-08-02 14:28 評論0 收藏0
2019前端面試那些事兒

摘要：雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總新特性，語義化瀏覽器的標準模式和怪異模式和的區別使用的好處標簽廢棄的標簽，和一些定位寫法放置位置和原因什么是漸進式渲染模板語言原理盒模型，新特性，偽雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總1.HTMLHTML5新特性，語義化瀏覽器的標準模式和怪...

QLQ 2019-08-26 13:33 評論0 收藏0