基本DOM節(jié)點(diǎn)操作

更新時(shí)間：2017年01月17日 15:52:55 作者：sharminKid

本文主要介紹了基本DOM節(jié)點(diǎn)操作，具有一定的參考價(jià)值，下面跟著小編一起來看下吧

1、獲取元素節(jié)點(diǎn)

getElementById()：獲取指定唯一id的元素。

getElementByTagName()：獲取指定元素標(biāo)簽名的元素?cái)?shù)組。

getElementByName()：獲取具有指定屬性name的元素?cái)?shù)組。

2、子節(jié)點(diǎn)

element.childNodes：返回該元素的子節(jié)點(diǎn)數(shù)組。注意：換行在瀏覽器中作為text節(jié)點(diǎn)，需要進(jìn)行過濾

element.firstChild：該元素的第一個(gè)子節(jié)點(diǎn)。

element.lastChild：該元素最后一個(gè)子節(jié)點(diǎn)。

3、父節(jié)點(diǎn)

element.parentNode

4、兄弟節(jié)點(diǎn)

element.previousSibling：返回相同的樹層級(jí)中的前一個(gè)節(jié)點(diǎn)，如果沒有，則為null

element.nextSibling：返回相同的樹層級(jí)中的后一個(gè)節(jié)點(diǎn)，如果沒有，則為null

5、創(chuàng)建節(jié)點(diǎn)

createElement() 按指定標(biāo)簽名創(chuàng)建節(jié)點(diǎn)

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

clonedNode = Node.cloneNode(boolean) 傳入布爾值，true表示復(fù)制該節(jié)點(diǎn)下的所有子節(jié)點(diǎn)

7、加入節(jié)點(diǎn)

parentNode.appendChild(childNode) 將新節(jié)點(diǎn)加入到子節(jié)點(diǎn)末尾

parentNode.insertBefore(newNode, targetNode) 將newNode 加入到targNode之前

8、移除目標(biāo)節(jié)點(diǎn)

parentNode.removeChild(childNode)

9、替換目標(biāo)節(jié)點(diǎn)

parentNode.replace(newNode, targetNode) 使用newNode 替換targetNode

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Layui?table.render的使用示例詳解
Layui框架的table.render方法是用于渲染表格的核心功能,通過配置對(duì)象定義表格樣式、列和數(shù)據(jù)源,cols數(shù)組中的每個(gè)對(duì)象通過field屬性與數(shù)據(jù)源綁定,指定要顯示的數(shù)據(jù)字段,本文給大家介紹Layui?table.render的使用,感興趣的朋友一起看看吧
2024-09-09
前端和后端解決跨域問題的方法詳細(xì)講解
這篇文章主要介紹了前端和后端解決跨域問題的相關(guān)資料,跨域問題主要源于瀏覽器的同源策略,為防止CSRF攻擊,可以采用多種防御措施,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-01-01
JavaScript實(shí)現(xiàn)彈出廣告功能
本文通過實(shí)例代碼給大家分享javascript實(shí)現(xiàn)彈出廣告功能，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-03-03
js下判斷 iframe 是否加載完成的完美方法
一般來說，我們判斷 iframe 是否加載完成其實(shí)與判斷JavaScript 文件是否加載完成。
2010-10-10
JS 設(shè)置Cookie 有效期檢測(cè)cookie
這篇文章主要介紹了JS 設(shè)置Cookie 有效期檢測(cè)cookie的相關(guān)資料,需要的朋友可以參考下
2017-06-06
Javarscript中模塊(module)、加載(load)與捆綁(bundle)詳解
這篇文章主要給大家介紹了關(guān)于Javarscript中模塊(module)、加載(load)與捆綁(bundle)的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。
2017-05-05
JS模擬鍵盤打字效果的方法
這篇文章主要介紹了JS模擬鍵盤打字效果的方法,涉及javascript鼠標(biāo)事件及字符串操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
一個(gè)簡單的Node.js異步操作管理器分享
這篇文章主要介紹了一個(gè)簡單的Node.js異步操作管理器分享,需要的朋友可以參考下
2014-04-04
如何通過js實(shí)現(xiàn)圖片預(yù)覽功能【附實(shí)例代碼】
如何通過js實(shí)現(xiàn)圖片預(yù)覽功能呢？下面小編就為大家?guī)硪黄胘s實(shí)現(xiàn)圖片預(yù)覽功能。給大家做個(gè)參考吧，一起跟隨小編過來看看
2016-03-03
微信小程序radio組件使用詳解
這篇文章主要為大家詳細(xì)介紹了微信小程序radio組件的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-01-01