JS中的DOM知識概覽

renweihub 發布于2019-08-20 17:32 / 2248人閱讀

摘要：瀏覽器中另說查找元素注意及較低版本瀏覽器的怪癖會返回值為指定的元素。類型所有的元素都是通過類型或其自類型表示的，類型繼承自類型。操作文本節點中的文本當兩個文本節點相鄰時，可通過將其變成一個文本節點。

1 Node類型

除IE外所有瀏覽器都可以訪問這個類型（因為IE中的DOM對象都是以COM對象的形式實現的），而且js中的所有節點類型都繼承自Node類型。

1.1 nodeName/nodeValue/nodeType 1.2 節點關系

childNodes 返回結果是Nodelist類型，不是數組。

   Nodelist是基于DOM結構動態查詢的結果，DOM的變化能自動反映在查詢結果中。可通過方括號進行訪問，也可用item(i)進行訪問。

   可通過Array。prototype.slice.call(nodelist,0) 將Nodelist類型轉化成數組，也可以通過遍歷Nodelist將其轉化成數組。

firstChild/lastChild

nextSibling/previousSibling

parentNode

ownerDocument

 ownerDocument：所有節點都有的屬性，指向表示整個文檔的文檔節點，任何節點都不能同時存在于多個文檔中。通過這個屬性可以直接訪問文檔節點，而不必層層回溯。

1.3 操作節點

appendChild()

insertBefore()

replaceChild()

removeChild()

1.4 新建／拷貝節點

拷貝：cloneNode()

當參數為true時，執行深拷貝，會將該節點的子節點也拷貝。但是這個函數不會復制添加到節點中的js屬性，例如時間處理程序，這個只復制特性、子節點（指定true時）。（IE瀏覽器中另說）

1.5 查找元素(document./element.)

getElementById()

   注意IE7及較低版本瀏覽器的怪癖：會返回name值為指定‘ID’的input元素。

getElementsByTagName()

   返回的是HTMLCollection對象，是一個動態集合。

getElementsByName()

2 Document類型

document對象是HTMLDocument類型的一個實例，HTMLDocument繼承自Document。并且，document對象是window對象的一個屬性。

2.1 文檔的子節點

documentElement屬性直接指向html元素

body屬性，指向body元素

doctype屬性，指向文檔聲明標簽

2.2 文檔信息

title

domain

   不同子域的頁面無法通過js通信，設為相同就可互相訪問對方的js對象了。
   域名屬性剛開始是松散的不能將它再設置為緊繃的。

URL

2.4 特殊集合

document.images 所有image元素

document.links 所有有href的a元素

document.anchors 所有帶name特性的a元素

1.5 新建元素

createElement()

createTextNode()

createDocumentFragment()

createAttribute()

2.6 DOM 一致性檢測

document.implementation.hasFeature()

一般不要相信這個的檢測結果，因為可以自行修改結果。

2.7 文檔寫入

document.write()
document.writeln()

如果在文檔加載完畢后寫入會重寫整個頁面。

document.open()
document.close()

如果是在頁面加載期間寫入，則不需要用到這兩個方法。

3 Element類型

所有的元素都是通過HTMLElementle類型或其自類型表示的，HTMLElement類型繼承自Element類型。

getAttribute()

setAttribute()

removeAttribute()

   
   任何元素的所有特性，也都可以通過DOM元素的本身的屬性來訪問。
   只有公認的（不是自定義的）特性才會以屬性的形式添加到DOM對象中。
   有些特性通過屬性訪問和getAttribute（）訪問的結果可能不同，例如style特性和事件處理程序
   給元素添加自定義屬性，該屬性不會變成特性
   
   總而言之就是：自定義的特性不能通過屬性的方式訪問，自定義的屬性不能通過getAttribute訪問（應該是這樣）。

attributes屬性

  一般用來遍歷特性時使用（element.attributes.length）

繼承Node類型的childNodes等屬性和創建，查找，添加刪除子節點等方法。

4 Text類型

可通過nodeValue或data屬性訪問Text節點中包含的文本。

操作文本節點中的文本：

appendData（）
deleteData（）
replaceData（）
insertData（）
splitText（）

   當兩個文本節點相鄰時，可通過normalize()將其變成一個文本節點。normalize()是從node類型繼承的函數

分割文本節點
textnode.splitText(5) 返回一個新文本節點，且該節點與原節點的parentNode相同

5 comment類型（注釋） 6 DocumentFragment

在文檔中沒有標記。

文檔片段永遠不會成為文檔的一部分。當通過appendchild將文檔片段添加到文檔中時，只是將文檔片段的子節點添加到文檔中，文檔片段將會刪除這些子節點。

當需要添加多個子節點時，如果一個一個添加，那么將會導致瀏覽器的反復渲染，這時可以將這些子節點添加到文檔片段中，然后再添加到文檔中。

7 動態添加腳本

7.1 動態添加腳本
7.2 動態添加樣式
7.3 操作表格
7.4 NodeList

    最好將length的值保存在一個變量中，因為length的值是動態的。
    訪問NodeList相當于一次基于文檔的查詢，所以要少訪問NodeList，或將其存在緩存中。

云服務器 GPU云服務器 js dom監聽 js dom交換 js dom樣式修改 js獲取dom數據

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

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

Angular（01）-- 架構概覽

摘要：正文架構概覽正文架構概覽接觸大概一個月吧，期間寫了個項目，趁現在稍微有點時間，來回顧梳理一下。里的模塊，并不等同于項目中的模塊概念。當然，這只是我目前階段的理解。聲明本系列文章內容梳理自以下來源： Angular 官方中文版教程官方的教程，其實已經很詳細且易懂，這里再次梳理的目的在于復習和鞏固相關知識點，剛開始接觸學習 Angular 的還是建議以官網為主。因為這系列文章，更多的會...

bitkylin 2019-04-23 11:46 評論0 收藏0
前端開發收集 - 收藏集 - 掘金

摘要：責編現代化的方式開發一個圖片上傳工具前端掘金對于圖片上傳，大家一定不陌生。之深入事件機制前端掘金事件綁定的方式原生的事件綁定方式有幾種想必有很多朋友說種目前，在本人目前的研究中，只有兩種半兩種半還有半種的且聽我道來。 Ajax 與數據傳輸 - 前端 - 掘金背景在沒有ajax之前，前端與后臺傳數據都是靠表單傳輸，使用表單的方法傳輸數據有一個比較大的問題就是每次提交數據都會刷新頁面，用...

ygyooo 2019-08-20 17:15 評論0 收藏0
JavaScript - 收藏集 - 掘金

摘要：插件開發前端掘金作者原文地址譯者插件是為應用添加全局功能的一種強大而且簡單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內優雅的實現文件分片斷點續傳。 Vue.js 插件開發 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins譯者：jeneser Vue.js插件是為應用添加全局功能的一種強大而且簡單的方式。插....

izhuhaodev 2019-08-21 11:44 評論0 收藏0
New Relic性能監控（三）瀏覽器端監控

摘要：性能概覽下圖為一個監控的的性能概覽頁面該頁面主要包含下面幾個部分的內容頁面加載時間曲線得分圖各瀏覽器的吞吐量會話追蹤，錯誤，以及響應時間。吞吐量吞吐量是按瀏覽器的類型繪制的，單位是每分鐘瀏覽量。 New Relic性能監控（三）瀏覽器端監控 2018-05-02 瑯琊書生本系列文章基于公司使用New Relic的經驗，鑒于國內較少有這方面的文章，因此把我工作中了解到的知識分享給大家，希...

Codeing_ls 2019-08-26 11:53 評論0 收藏0
New Relic性能監控（三）瀏覽器端監控

摘要：性能概覽下圖為一個監控的的性能概覽頁面該頁面主要包含下面幾個部分的內容頁面加載時間曲線得分圖各瀏覽器的吞吐量會話追蹤，錯誤，以及響應時間。吞吐量吞吐量是按瀏覽器的類型繪制的，單位是每分鐘瀏覽量。 New Relic性能監控（三）瀏覽器端監控 2018-05-02 瑯琊書生本系列文章基于公司使用New Relic的經驗，鑒于國內較少有這方面的文章，因此把我工作中了解到的知識分享給大家，希...

banana_pi 2019-08-15 15:48 評論0 收藏0