成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

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

renweihub / 2297人閱讀

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

1 Node類(lèi)型

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

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

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

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

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

firstChild/lastChild

nextSibling/previousSibling

parentNode

ownerDocument

 ownerDocument：所有節(jié)點(diǎn)都有的屬性，指向表示整個(gè)文檔的文檔節(jié)點(diǎn)，任何節(jié)點(diǎn)都不能同時(shí)存在于多個(gè)文檔中。通過(guò)這個(gè)屬性可以直接訪問(wèn)文檔節(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瀏覽器中另說(shuō)）
1.5 查找元素(document./element.)

getElementById()

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

getElementsByTagName()

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

getElementsByName()

2 Document類(lèi)型

document對(duì)象是HTMLDocument類(lèi)型的一個(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

   不同子域的頁(yè)面無(wú)法通過(guò)js通信，設(shè)為相同就可互相訪問(wèn)對(duì)方的js對(duì)象了。
   域名屬性剛開(kāi)始是松散的不能將它再設(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 文檔寫(xiě)入

document.write()
document.writeln()

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

document.open()
document.close()

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

所有的元素都是通過(guò)HTMLElementle類(lèi)型或其自類(lèi)型表示的，HTMLElement類(lèi)型繼承自Element類(lèi)型。

getAttribute()

setAttribute()

removeAttribute()

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

attributes屬性

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

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

4 Text類(lèi)型

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

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

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

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

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

5 comment類(lèi)型（注釋?zhuān)?/strong> 6 DocumentFragment

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

文檔片段永遠(yuǎn)不會(huì)成為文檔的一部分。當(dāng)通過(guò)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)的。
    訪問(wèn)NodeList相當(dāng)于一次基于文檔的查詢，所以要少訪問(wèn)NodeList，或?qū)⑵浯嬖诰彺嬷小?/pre>

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

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

相關(guān)文章

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

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

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

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

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

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

  • JavaScript - 收藏集 - 掘金

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

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

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

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

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

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

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

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

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

0條評(píng)論

renweihub

男|高級(jí)講師

TA的文章

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