DOM整理

peixn 發布于2019-08-20 18:34 / 1299人閱讀

摘要：元素節點類型節點類型數值元素節點屬性節點文本節點文檔節點和屬性元素節點的始終為，始終保存元素的標簽名。返回類數組對象。

1.元素節點類型

節點類型	數值
元素節點	1
屬性節點	2
文本節點	3
文檔節點	9

2.nodeName和nodeValue屬性
元素節點的nodeValue始終為null，nodeName始終保存元素的標簽名。
3.childNodes
element.childNodes返回類數組對象。
4.Document類型

屬性	值
nodeType	9
nodeName	"#document"
nodeValue	null
parentNode	null

5.document.referrer // 取得來源頁面的URL
6.Element類型

屬性	值
nodeType	1
nodeName	元素標簽名
nodeValue	null
parentNode	Document和Element
子節點	Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference
attributes	標簽屬性集合

訪問元素標簽名，也可以通過tagName訪問

7.Text類型

屬性	值
nodeType	3
nodeName	"#text"
nodeValue	節點所包含的文本
parentNode	一個Element
子節點	無

附：匯總

方法	說明
element.childNodes	獲取元素所有子節點
element.nodeType	獲取元素節點類型
element.nodeName	獲取元素節點名稱
element.parentNode	獲取元素父節點
element.previousSibling	獲取元素上一個兄弟節點
element.nextSibling	獲取元素下一個兄弟節點
element.firstChild	獲取元素第一個子節點
element.lastChild	獲取元素最后一個子節點
element.hasChildNodes()	獲取元素是否存在子節點，存在返回true
element.ownerDocument	獲取整個文檔的文檔節點document
element.appendChild(newNode)	向元素最后位置添加子元素，如果newNode已經是文檔中一部分，那么只是該節點變成最后一個子節點
element.insertBefore(newNode, null)	向元素指定位置(參照元素前)添加子元素，第一個參數為新元素，第二個參數為參照元素，如果第二個參數為null，那么該方法相當于appendChild
element.replaceChild(newNode, oldNode)	替換子節點
element.removeChild(someNode)	移除子節點，該方法返回被移除的節點
element.cloneNode(true)	克隆節點，如果方法內參數為true，則復制節點及其所有子節點，如果為false，則復制節點
element.setAttribute()	設置特性
element.removeAttribute()	移除特性
element.getAttribute()	獲取特性
document.createTextNode("hello world!")	創建文本節點
document.createElement("div")	創建元素節點
document.createDocumentFragment()	創建文檔片段，該片段繼承了Node所有方法，通常用來執DOM操作

GPU云服務器云服務器機柜整理整理收集整理資料顏色整理

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

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

DOM知識整理

摘要：繼承接口對象不僅實現了接口，也實現了接口，用來標識當前窗口內的文檔節點。繼承接口描述了所有相同種類的元素所普遍具有的方法和屬性。由于工作中一直在用框架來解決問題，在平時對dom的關注也比較少（特別像angular這種自己封裝了一層視圖層的框架，并不建議直接操作DOM），所以dom相關的知識也忘的差不多了,這次做公司產品的官網，沒有太多的交互和功能，直接用了原生js，正好借此整理一下遺...

huayeluoliuhen 2019-08-23 13:51 評論0 收藏0
HTML DOM 知識點整理（一）—— Document對象

摘要：提示對象是對象的一部分，可通過屬性對其進行訪問。方法返回布爾值，用于檢測文檔或文檔內的任一元素是否獲取焦點。布爾值，指定事件是否在捕獲或冒泡階段執行。向元素添加事件句柄移除元素的事件句柄方法級元素參數類型描述對象必須。一、DOM對象 DOM對象整體包括： HTML DOM Document對象 HTML DOM 元素對象 HTML DOM 屬性對象 HTML DOM 事件對象 HTML D...

xiaochao 2019-04-23 13:09 評論0 收藏0
DOM疑惑點整理（三）

摘要：好的，這些是眾所周知的。和兩者最大區別就是是否會改變調用它們的節點自身，類似上面與的其二中所描述。并未寫入規范，不建議使用，而且會導致調用它的節點自身消失。兩者可能因為瀏覽器不同，輸出的文本格式略有差別 innerHTML和outerHTML 先說一個幾乎眾所周知的，innerHTML和outerHTML中的內容都會被解析為DOM子樹，其二就是， let txt = doc...

高勝山 2019-08-22 16:34 評論0 收藏0
DOM疑惑點整理（二）內聯、嵌入、外聯樣式訪問

摘要：內聯樣式外聯樣式樣式屬性，寫在外部文件，通過鏈接導入。內聯樣式注意點樣式的應用，采取就近原則，因此一般情況優先級是內聯樣式嵌入樣式外聯樣式。中有新的方式去查看完整的屬性某元素內聯外聯嵌入樣式合起來計算后的屬性。訪問的style屬性為空？有時候，直接通過某元素的style屬性去查看相關信息時，會發現查看到的是空的屬性。原因很簡單，style屬性只能訪問內聯樣式，而你把css寫在了外部...

Lucky_Boy 2019-08-22 16:19 評論0 收藏0
DOM疑惑點整理（三）

摘要：好的，這些是眾所周知的。和兩者最大區別就是是否會改變調用它們的節點自身，類似上面與的其二中所描述。并未寫入規范，不建議使用，而且會導致調用它的節點自身消失。兩者可能因為瀏覽器不同，輸出的文本格式略有差別 innerHTML和outerHTML 先說一個幾乎眾所周知的，innerHTML和outerHTML中的內容都會被解析為DOM子樹，其二就是， let txt = doc...

lucas 2019-08-02 10:15 評論0 收藏0