說說JavaScript中DOM的Node對象

Batkid 發(fā)布于2019-08-23 11:39 / 856人閱讀

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

Node對象 Node對象的概念

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

繼承鏈關系

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

console.log(Node.prototype inseabceof EventTarget);

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

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

測試Node對象

由于Node對象是DOM底層封裝的對象，所以我們并不能通過直接打印Node對象來查看其屬性或方法。
代碼示例

console.log(Node.prototype);

運行HTML頁面后，打開開發(fā)者工具就可以看到隱藏的屬性或方法。

判斷節(jié)點類型 判斷節(jié)點類型

Node對象提供了nodeName、nodeType和nodeValue分別可以用于獲取指定節(jié)點的節(jié)點名稱、節(jié)點類型和節(jié)點的值。
DOM節(jié)點樹結構中，我們開發(fā)常用的節(jié)點有：
1.元素節(jié)點：表示HTML頁面中的標簽或結構。
2.屬性節(jié)點：表示HTML頁面中的開始標簽包含的屬性
3.文本節(jié)點：表示HTML頁面中的標簽所包含的文本內容。

nodeName屬性

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

var str = node.nodeName;

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

nodeType屬性

Node對象的nodeType屬性用于獲取指定節(jié)點的節(jié)點類型

var type = node.nodeType;

type是一個整數，其代表的是節(jié)點類型，對不同的節(jié)點類型，nodeType返回的節(jié)點類型不同。

nodeValue屬性

Node對象的nodeValue屬性用于獲取節(jié)點的節(jié)點值

var value = node.nodeValue;

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

遍歷節(jié)點 獲取父節(jié)點

通過HTML頁面中指定元素查找父級節(jié)點，我們可以使用Node對象的parentNode屬性實現

var pNode = node.parentNode;

在一個元素節(jié)點的父節(jié)點，可能是一個元素節(jié)點，也可能是一個文檔節(jié)點。

獲取父元素節(jié)點

Node對象出了提供了parentNode屬性可以獲取指定節(jié)點的父節(jié)點之外，還提供了parentElement屬性獲取指定節(jié)點的父元素節(jié)點
在如果一個節(jié)點沒有父節(jié)點，或者父節(jié)點不是一個元素節(jié)點的話，parentElement屬性返回null。

父節(jié)點與父元素節(jié)點的區(qū)別

所謂的父節(jié)點，并沒有指定某個接待的父節(jié)點一定是哪個類型的節(jié)點。而父元素節(jié)點，指定了某個節(jié)點的父節(jié)點一定是元素節(jié)點
1.parentNode：獲取指定節(jié)點的父節(jié)點，其父節(jié)點不一定是元素節(jié)點。
2.parentElement：獲取指定節(jié)點的元素節(jié)點，其父幾點不許是元素節(jié)點
如果我們獲取元素的父節(jié)點的話，就是document文檔節(jié)點。而document文檔節(jié)點并不是一個元素節(jié)點。

獲取子節(jié)點

通過HTML頁面中指定元素查找其子節(jié)點，我們可以通過以下Node對象的屬性實現：
1.chiNode：獲取指定節(jié)點的所有子節(jié)點。
2.firstChild：獲取指定節(jié)點的第一個子節(jié)點。
3.lasrChild：獲取指定節(jié)點的最后一個子節(jié)點
Node對象提供chidNode屬性用于獲取HTML頁面中指定節(jié)點的所有子節(jié)點。

var ndList = Node.childNode;

chidNode屬性返回值ndList是一個NodeList對象，并且為只讀。該屬性獲取一個包含指定節(jié)點的所有子節(jié)點的集合。
獲取第一個子節(jié)點。

var first_child = node.firstChild;

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

var last_child = node.lastChild;

lastChild屬性返回的last_Child表示當前節(jié)點的最后一個子節(jié)點的引用

空白節(jié)點的解決方案

在開發(fā)中，空白節(jié)點的問題將DOM節(jié)點樹結構的解析及操作增加了不少的難度和麻煩，這里提供了一種比較簡單有效的解決方式：
1.棄用DOM中Node對象用于獲取指定節(jié)點的子節(jié)點和兄弟節(jié)點的屬性。
2.通過使用getElementsByTagName（）方法實現相應功能

刪除節(jié)點

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

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

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

注意事項

被刪除的節(jié)點是否從內存中被銷毀，Mozilla社區(qū)有這樣一段描述；
被溢出的這個子節(jié)點仍然存在內存中，只是內有添加到當前文檔的DOM樹中。因此，你還可以把這個節(jié)點重新添加會文檔中。

替換節(jié)點

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


    
    替換節(jié)點



    蘋果
    小米
    錘子


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

復制節(jié)點

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


    
    復制節(jié)點

注意事項

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

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

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

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

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

摘要：可能會有理解存在偏差的地方，歡迎提指出，共同學習，共同進步。這樣做減少了很多不需要的操作，大大提高了性能。當上已經綁定的時候，代表該對象已經被過了，所以創(chuàng)建一個空節(jié)點。寫在前面因為對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基礎知識總結

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

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

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

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

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

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