国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JS中的DOM知識(shí)概覽

renweihub / 2250人閱讀

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

1 Node類型

除IE外所有瀏覽器都可以訪問這個(gè)類型（因?yàn)镮E中的DOM對(duì)象都是以COM對(duì)象的形式實(shí)現(xiàn)的），而且js中的所有節(jié)點(diǎn)類型都繼承自Node類型。

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

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

   Nodelist是基于DOM結(jié)構(gòu)動(dòng)態(tài)查詢的結(jié)果，DOM的變化能自動(dòng)反映在查詢結(jié)果中。可通過方括號(hào)進(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é)點(diǎn)都有的屬性，指向表示整個(gè)文檔的文檔節(jié)點(diǎn)，任何節(jié)點(diǎn)都不能同時(shí)存在于多個(gè)文檔中。通過這個(gè)屬性可以直接訪問文檔節(jié)點(diǎn)，而不必層層回溯。

1.3 操作節(jié)點(diǎn)

appendChild()

insertBefore()

replaceChild()

removeChild()

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

拷貝：cloneNode()

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

getElementById()

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

getElementsByTagName()

   返回的是HTMLCollection對(duì)象，是一個(gè)動(dòng)態(tài)集合。

getElementsByName()

2 Document類型

document對(duì)象是HTMLDocument類型的一個(gè)實(shí)例，HTMLDocument繼承自Document。并且，document對(duì)象是window對(duì)象的一個(gè)屬性。

2.1 文檔的子節(jié)點(diǎn)

documentElement屬性直接指向html元素

body屬性，指向body元素

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

2.2 文檔信息

title

domain

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

URL

2.4 特殊集合

document.images 所有image元素

document.links 所有有href的a元素

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

1.5 新建元素

createElement()

createTextNode()

createDocumentFragment()

createAttribute()

2.6 DOM 一致性檢測(cè)

document.implementation.hasFeature()

一般不要相信這個(gè)的檢測(cè)結(jié)果，因?yàn)榭梢宰孕行薷慕Y(jié)果。
2.7 文檔寫入

document.write()
document.writeln()

如果在文檔加載完畢后寫入會(huì)重寫整個(gè)頁面。

document.open()
document.close()

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

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

getAttribute()

setAttribute()

removeAttribute()

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

attributes屬性

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

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

4 Text類型

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

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

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

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

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

5 comment類型（注釋） 6 DocumentFragment

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

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/83659.html

相關(guān)文章

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

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

    bitkylin 評(píng)論0 收藏0

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

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

    ygyooo 評(píng)論0 收藏0

  • JavaScript - 收藏集 - 掘金

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

    izhuhaodev 評(píng)論0 收藏0

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

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

    Codeing_ls 評(píng)論0 收藏0

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

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

    banana_pi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

renweihub

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<