成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

DOM里面的Node對(duì)象和Element對(duì)象的區(qū)別

qieangel2013 / 1739人閱讀

摘要：對(duì)象的標(biāo)準(zhǔn)規(guī)范中提供了對(duì)象，該對(duì)象主要提供了用于解析節(jié)點(diǎn)樹結(jié)構(gòu)的屬性和方法，樹結(jié)構(gòu)主要是依靠節(jié)點(diǎn)進(jìn)行解析，成為節(jié)點(diǎn)樹結(jié)構(gòu)，對(duì)象是解析節(jié)點(diǎn)樹結(jié)構(gòu)的主要入口，對(duì)象提供的屬性和方法，可以實(shí)現(xiàn)遍歷節(jié)點(diǎn)插入節(jié)點(diǎn)等操作判斷節(jié)點(diǎn)類型元素名得到標(biāo)簽名稱大

Node對(duì)象

Dom的標(biāo)準(zhǔn)規(guī)范中提供了Node對(duì)象，該對(duì)象主要提供了用于解析DOM節(jié)點(diǎn)樹結(jié)構(gòu)的屬性和方法，DOM樹結(jié)構(gòu)主要是依靠節(jié)點(diǎn)進(jìn)行解析，成為DOM節(jié)點(diǎn)樹結(jié)構(gòu)，Node對(duì)象是解析DOM節(jié)點(diǎn)樹結(jié)構(gòu)的主要入口，Node對(duì)象提供的屬性和方法，可以實(shí)現(xiàn)遍歷節(jié)點(diǎn)、插入節(jié)點(diǎn)等操作

判斷節(jié)點(diǎn)類型

元素名.nodeName; - 得到標(biāo)簽名稱(大寫)
元素名.nodeType; - 得到元素的類型
元素名.nodeValue; - 得到元素的文本內(nèi)容

獲取父節(jié)點(diǎn)

節(jié)點(diǎn)名.parentNode; - 獲取子節(jié)點(diǎn)的父節(jié)點(diǎn)
節(jié)點(diǎn)名.parentElement; - 獲取其父元素節(jié)點(diǎn)

獲取子節(jié)點(diǎn)

節(jié)點(diǎn)名.childNodes; - 獲取父節(jié)點(diǎn)下的所有子節(jié)點(diǎn)
節(jié)點(diǎn)名.firstChild; - 獲取父節(jié)點(diǎn)下第一個(gè)子節(jié)點(diǎn)
節(jié)點(diǎn)名.lastChild; - 獲取父節(jié)點(diǎn)下最后一個(gè)子節(jié)點(diǎn)

獲取相鄰兄弟節(jié)點(diǎn)

節(jié)點(diǎn)名.previousSibling; - 獲取上一個(gè)兄弟元素
節(jié)點(diǎn)名.nextSibling; - 獲取下一個(gè)兄弟元素

appendChild()方法

父節(jié)點(diǎn).appendChild(子節(jié)點(diǎn)); - 向父節(jié)點(diǎn)添加子節(jié)點(diǎn)，默認(rèn)從最后面添加
父節(jié)點(diǎn).insertBefore(新創(chuàng)建的節(jié)點(diǎn),頁(yè)面中的舊節(jié)點(diǎn)); - 向父元素中的指定子節(jié)點(diǎn)在其前面添加

刪除節(jié)點(diǎn)

父節(jié)點(diǎn).removeChild(子節(jié)點(diǎn)); - 刪除指定的子節(jié)點(diǎn)

替換節(jié)點(diǎn)

父節(jié)點(diǎn).replaceChild(新的子節(jié)點(diǎn),目標(biāo)節(jié)點(diǎn)); - 可以替換掉父節(jié)點(diǎn)中被選中的目標(biāo)子節(jié)點(diǎn)

復(fù)制節(jié)點(diǎn)

被復(fù)制的目標(biāo)節(jié)點(diǎn).cloneNode(true); - true為深度克隆，會(huì)將節(jié)點(diǎn)的所有東西克隆過去，false為非深度克隆，不會(huì)克隆文本，默認(rèn)為false

textContent屬性

節(jié)點(diǎn).textContent; - 輸出節(jié)點(diǎn)里面的文本內(nèi)容

Element對(duì)象

DOM的標(biāo)準(zhǔn)規(guī)范中提供了Element對(duì)象，該對(duì)象提供了HTML頁(yè)面中所有元素所具有的屬性和方法，DOM標(biāo)準(zhǔn)規(guī)范中提供了Node對(duì)象，主要是依靠DOM節(jié)點(diǎn)樹結(jié)構(gòu)訪問和更新HTML頁(yè)面的內(nèi)容。而DOM標(biāo)準(zhǔn)規(guī)范中提供了Element對(duì)象，主要是依靠DOM元素樹結(jié)構(gòu)訪問和更新HTML頁(yè)面內(nèi)容，所有的HTML頁(yè)面的元素都是HTMLElement對(duì)象，而這個(gè)對(duì)象又是繼承于Element對(duì)象的

獲取子元素

父元素.firstElementChild; - 獲取父元素中第一個(gè)子元素
父元素.lastElementChild; - 獲取父元素中最后一個(gè)子元素

獲取相鄰兄弟元素

元素.previousElementSibling; - 獲取元素的上一個(gè)兄弟元素
元素.nextElementSibling; - 獲取元素的下一個(gè)兄弟元素

屬性操作

元素.getAttribute("屬性名稱"); - 獲取指定元素的指定屬性
元素.setAttribute("屬性名稱","屬性值") - 設(shè)置指定元素的屬性名稱以及屬性值
元素.removeAttribute("屬性名稱"); - 刪除指定元素的屬性
元素.hasAttribute("屬性名稱"); - 判斷指定元素指定屬性是否存在，結(jié)果返回布爾值

innerHTML屬性

元素.innerHTML; - 獲取指定元素的HTML代碼
父元素.innerHTML=HTML代碼; - 給父元素添加HTML代碼，直接把html代碼寫在字符串中，但是這個(gè)方法具有安全問題

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97215.html

相關(guān)文章

  • HTMLCollection與NodeList

    摘要：唯一要注意的是返回的雖然是，但是實(shí)際上是元素集合，并且是靜態(tài)的其他接口返回的和都是的。與相同的是它也是一個(gè)動(dòng)態(tài)的集合，與不同的是，中保存的是一組無(wú)序的屬性節(jié)點(diǎn)的集合。及以下版本瀏覽器中，注釋屬于算作因此會(huì)出現(xiàn)在里。而且是元素的集合。 NodeList v.s. HTMLCollection 主要有兩個(gè)方面不一樣1.包含節(jié)點(diǎn)的類型2.使用方法 1.包含節(jié)點(diǎn)的類型不同(重要) (1)Nod...

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

  • HTMLCollection與NodeList

    摘要：唯一要注意的是返回的雖然是，但是實(shí)際上是元素集合，并且是靜態(tài)的其他接口返回的和都是的。與相同的是它也是一個(gè)動(dòng)態(tài)的集合，與不同的是，中保存的是一組無(wú)序的屬性節(jié)點(diǎn)的集合。及以下版本瀏覽器中，注釋屬于算作因此會(huì)出現(xiàn)在里。而且是元素的集合。 NodeList v.s. HTMLCollection 主要有兩個(gè)方面不一樣1.包含節(jié)點(diǎn)的類型2.使用方法 1.包含節(jié)點(diǎn)的類型不同(重要) (1)Nod...

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

  • angularjs特效之分散的字符串--解析compile link $compile $inter

    摘要：效果預(yù)覽來(lái)自的效果預(yù)覽引用了，已被墻，請(qǐng)謹(jǐn)慎預(yù)覽轉(zhuǎn)載聲明這篇文章其實(shí)源自的博客。主要內(nèi)容整個(gè)效果都建立在的里面。為了彌補(bǔ)這個(gè)缺陷，我決定改成在函數(shù)中對(duì)進(jìn)行操作。重點(diǎn)來(lái)了，是和初始位置的相對(duì)位置。就是元素的初始值。 效果預(yù)覽 來(lái)自codepen的效果預(yù)覽：（引用了angularjs，已被墻，請(qǐng)謹(jǐn)慎預(yù)覽）http://codepen.io/flybywind/pen/aNjxJa 轉(zhuǎn)載聲明...

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

  • angularjs特效之分散的字符串--解析compile link $compile $inter

    摘要：效果預(yù)覽來(lái)自的效果預(yù)覽引用了，已被墻，請(qǐng)謹(jǐn)慎預(yù)覽轉(zhuǎn)載聲明這篇文章其實(shí)源自的博客。主要內(nèi)容整個(gè)效果都建立在的里面。為了彌補(bǔ)這個(gè)缺陷，我決定改成在函數(shù)中對(duì)進(jìn)行操作。重點(diǎn)來(lái)了，是和初始位置的相對(duì)位置。就是元素的初始值。 效果預(yù)覽 來(lái)自codepen的效果預(yù)覽：（引用了angularjs，已被墻，請(qǐng)謹(jǐn)慎預(yù)覽）http://codepen.io/flybywind/pen/aNjxJa 轉(zhuǎn)載聲明...

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

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

0條評(píng)論

閱讀需要支付1元查看
<