亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

JS中的DOM知識概覽

renweihub / 2294人閱讀

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

1 Node類型

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

1.1 nodeName/nodeValue/nodeType 1.2 節(jié)點關(guān)系

childNodes 返回結(jié)果是Nodelist類型，不是數(shù)組。

   Nodelist是基于DOM結(jié)構(gòu)動態(tài)查詢的結(jié)果，DOM的變化能自動反映在查詢結(jié)果中?？赏ㄟ^方括號進(jìn)行訪問，也可用item(i)進(jìn)行訪問。

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

firstChild/lastChild

nextSibling/previousSibling

parentNode

ownerDocument

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

1.3 操作節(jié)點

appendChild()

insertBefore()

replaceChild()

removeChild()

1.4 新建／拷貝節(jié)點

拷貝：cloneNode()

當(dāng)參數(shù)為true時，執(zhí)行深拷貝，會將該節(jié)點的子節(jié)點也拷貝。但是這個函數(shù)不會復(fù)制添加到節(jié)點中的js屬性，例如時間處理程序，這個只復(fù)制特性、子節(jié)點（指定true時）。（IE瀏覽器中另說）
1.5 查找元素(document./element.)

getElementById()

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

getElementsByTagName()

   返回的是HTMLCollection對象，是一個動態(tài)集合。

getElementsByName()

2 Document類型

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

2.1 文檔的子節(jié)點

documentElement屬性直接指向html元素

body屬性，指向body元素

doctype屬性，指向文檔聲明標(biāo)簽

2.2 文檔信息

title

domain

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

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()

一般不要相信這個的檢測結(jié)果，因為可以自行修改結(jié)果。
2.7 文檔寫入

document.write()
document.writeln()

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

document.open()
document.close()

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

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

getAttribute()

setAttribute()

removeAttribute()

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

attributes屬性

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

繼承Node類型的childNodes等屬性和創(chuàng)建，查找，添加刪除子節(jié)點等方法。

4 Text類型

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

操作文本節(jié)點中的文本：

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

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

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

5 comment類型（注釋） 6 DocumentFragment

在文檔中沒有標(biāo)記。

文檔片段永遠(yuǎn)不會成為文檔的一部分。當(dāng)通過appendchild將文檔片段添加到文檔中時，只是將文檔片段的子節(jié)點添加到文檔中，文檔片段將會刪除這些子節(jié)點。

當(dāng)需要添加多個子節(jié)點時，如果一個一個添加，那么將會導(dǎo)致瀏覽器的反復(fù)渲染，這時可以將這些子節(jié)點添加到文檔片段中，然后再添加到文檔中。

7 動態(tài)添加腳本

7.1 動態(tài)添加腳本
7.2 動態(tài)添加樣式
7.3 操作表格
7.4 NodeList

    最好將length的值保存在一個變量中，因為length的值是動態(tài)的。
    訪問NodeList相當(dāng)于一次基于文檔的查詢，所以要少訪問NodeList，或?qū)⑵浯嬖诰彺嬷小?/pre>

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/83659.html

相關(guān)文章

  • Angular（01）-- 架構(gòu)概覽

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

    bitkylin 評論0 收藏0

  • 前端開發(fā)收集 - 收藏集 - 掘金

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

    ygyooo 評論0 收藏0

  • JavaScript - 收藏集 - 掘金

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

    izhuhaodev 評論0 收藏0

  • New Relic性能監(jiān)控（三）瀏覽器端監(jiān)控

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

    Codeing_ls 評論0 收藏0

  • New Relic性能監(jiān)控（三）瀏覽器端監(jiān)控

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

    banana_pi 評論0 收藏0

發(fā)表評論

0條評論

renweihub

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<