JS常見(jiàn)DOM節(jié)點(diǎn)操作示例【創(chuàng)建 ,插入,刪除,復(fù)制,查找】
本文實(shí)例講述了JS常見(jiàn)DOM節(jié)點(diǎn)操作。分享給大家供大家參考,具體如下:
DOM含義:DOM是文檔對(duì)象模型(Document Object Model,是基于瀏覽器編程的一套API接口,是W3C出臺(tái)的推薦標(biāo)準(zhǔn)。其賦予了JS操作節(jié)點(diǎn)的能力。當(dāng)網(wǎng)頁(yè)被加載時(shí),瀏覽器就會(huì)創(chuàng)建頁(yè)面的文檔對(duì)象模型。
節(jié)點(diǎn):根據(jù) W3C 的 HTML DOM 標(biāo)準(zhǔn),HTML 文檔中的所有內(nèi)容都是節(jié)點(diǎn):
1、整個(gè)文檔時(shí)一個(gè)文檔節(jié)點(diǎn)。
2、每個(gè)HTML元素是元素節(jié)點(diǎn)。
3、HTML元素內(nèi)的文本是文本節(jié)點(diǎn)。
4、每個(gè)HTML屬性是屬性節(jié)點(diǎn)。
5、每個(gè)注釋是注釋節(jié)點(diǎn)。
所以HTML DOM 將 HTML 文檔視作樹(shù)結(jié)構(gòu),這種結(jié)構(gòu)被稱(chēng)為節(jié)點(diǎn)樹(shù)。通過(guò) HTML DOM,節(jié)點(diǎn)樹(shù)中的所有節(jié)點(diǎn)都可以通過(guò) JS 進(jìn)行訪問(wèn)。所有 HTML 元素(節(jié)點(diǎn))均可被修改。
一、創(chuàng)建節(jié)點(diǎn)、追加節(jié)點(diǎn)
1、createElement(標(biāo)簽名)
創(chuàng)建一個(gè)元素節(jié)點(diǎn)(具體的一個(gè)元素)。
2、appendChild(節(jié)點(diǎn))
追加一個(gè)節(jié)點(diǎn)。
3、createTextNode(節(jié)點(diǎn)文本內(nèi)容)
創(chuàng)建一個(gè)文本節(jié)點(diǎn)
var oDiv = document.createElement("div");//創(chuàng)建一個(gè)div元素,因?yàn)槭莇ocument對(duì)象的方法。 var oDivText = document.createTextNode("666");//創(chuàng)建一個(gè)文本節(jié)點(diǎn)內(nèi)容是“666”,因?yàn)槭莇ocument對(duì)象的方法。 oDiv.appendChild(oDivText);//父級(jí).appendChild(子節(jié)點(diǎn));在div元素中添加“666” document.body.appendChild(oDiv);//父級(jí).appendChild(子節(jié)點(diǎn));;document.body是指向<body>元素 document.documentElement.appendChild(createNode);//父級(jí).appendChild(子節(jié)點(diǎn));;document.documentElement是指向<html>元素
二、插入節(jié)點(diǎn)
1、appendChild(節(jié)點(diǎn))
也是一種插入節(jié)點(diǎn)的方式,還可以添加已經(jīng)存在的元素,會(huì)將其元素從原來(lái)的位置移到新的位置。
2、insertBefore(a,b)
是參照節(jié)點(diǎn),意思是a節(jié)點(diǎn)會(huì)插入b節(jié)點(diǎn)的前面。
var oDiv = document.createElement("div");//創(chuàng)建一個(gè)div元素,因?yàn)槭莇ocument對(duì)象的方法。 var oDiv1 = document.getElementById("div1"); document.body.insertBefore(oDiv,oDiv1);//在oDiv1節(jié)點(diǎn)前插入新創(chuàng)建的元素節(jié)點(diǎn) ul.appendChild(ul.firstChild); //把ul的第一個(gè)元素節(jié)點(diǎn)移到ul子節(jié)點(diǎn)的末尾
三、刪除、移除節(jié)點(diǎn)
1、removeChild(節(jié)點(diǎn))
刪除一個(gè)節(jié)點(diǎn),用于移除刪除一個(gè)參數(shù)(節(jié)點(diǎn))。其返回的被移除的節(jié)點(diǎn),被移除的節(jié)點(diǎn)仍在文檔中,只是文檔中已沒(méi)有其位置了。
var removeChild = document.body.removeChild(div1);//移除document對(duì)象的方法div1
四、替換節(jié)點(diǎn)
1、replaceChild(插入的節(jié)點(diǎn),被替換的節(jié)點(diǎn))
,用于替換節(jié)點(diǎn),接受兩個(gè)參數(shù),第一參數(shù)是要插入的節(jié)點(diǎn),第二個(gè)是要被替換的節(jié)點(diǎn)。返回的是被替換的節(jié)點(diǎn)。
var replaceChild= document.body.replaceChild(div1,div2); //將div1替換div2
五、查找節(jié)點(diǎn)
1、childNodes 包含文本節(jié)點(diǎn)和元素節(jié)點(diǎn)的子節(jié)點(diǎn)。
for (var i = 0; i < oList.childNodes.length; i++) {//oList是做的ul的對(duì)象。 //nodeType是節(jié)點(diǎn)的類(lèi)型,利用nodeType來(lái)判斷節(jié)點(diǎn)類(lèi)型,再去控制子節(jié)點(diǎn) //nodeType==1 是元素節(jié)點(diǎn) //nodeType==3 是文本節(jié)點(diǎn) if (oList.childNodes[i].nodeType == 1) {//查找到oList內(nèi)的元素節(jié)點(diǎn) console.log(oList.childNodes[i]);//在控制器日志中顯示找到的元素節(jié)點(diǎn) } }
2、
A、children也可以獲取子節(jié)點(diǎn),而且兼容各種瀏覽器。包括IE6-8
B、parentNode:獲取父節(jié)點(diǎn)
var oList = document.getElementById('list');//oList是做的ul的對(duì)象 var oChild=document.getElementById('child');//oChild是做的ul中的一個(gè)li的對(duì)象 //通過(guò)子節(jié)點(diǎn)查找父節(jié)點(diǎn)//parentNode:獲取父節(jié)點(diǎn) console.log(oChild.parentNode);//在控制器日志中顯示父節(jié)點(diǎn) console.log(oList.children);//在控制器日志中顯示oList子節(jié)點(diǎn) console.log(children.length)//子節(jié)點(diǎn)的個(gè)數(shù)
3、
A、firstChild ; firstElementChild查找第一個(gè)子節(jié)點(diǎn)。此存在瀏覽器兼容問(wèn)題:firstChild是IE兼容,firstElementChild是非IE兼容。
//查找第一個(gè)子節(jié)點(diǎn)的封裝函數(shù) function firstChild(ele) { if (ele.firstElementChild) {//如果該條件是true則在該瀏覽器(IE或非IE)中兼容 return ele.firstElementChild; } else { return ele.firstChild; } } firstChild(oList).style.background = 'red';//將獲得的節(jié)點(diǎn)的背景變成紅色
B、lastChild ; lastElementChild查找最后一個(gè)子節(jié)點(diǎn)。此存在瀏覽器兼容問(wèn)題:lastChild 是IE兼容,lastElementChild是非IE兼容。
//查找最后一個(gè)子節(jié)點(diǎn)的封裝函數(shù) function lastChild(ele) { if (ele.lastElementChild) {//如果該條件是true則在該瀏覽器(IE或非IE)中兼容 return ele.lastElementChild; } else { return ele.lastChild; } } lastChild(oList).style.background = 'red';//將獲得的節(jié)點(diǎn)的背景變成紅色
C、nextSibling ; nextElementSibling查找下一個(gè)兄弟節(jié)點(diǎn)。也是存在兼容性問(wèn)題。
//查找下一個(gè)兄弟節(jié)點(diǎn)的封裝函數(shù) function nextSibling(ele) { if (ele.nextElementSibling) { return ele.nextElementSibling; } else { return ele.nextSibling; } } nextSibling(oMid).style.background = 'red';
D、previousSibling ; previousElementSibling查找上一個(gè)兄弟節(jié)點(diǎn)。也是存在兼容性問(wèn)題。
//查找上一個(gè)兄弟節(jié)點(diǎn)的封裝函數(shù) function previousSibling(ele) { if (ele.nextElementSibling) { return ele.previousElementSibling; } else { return ele.previousSibling; } } previousSibling(oMid).style.background = 'red';
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《JavaScript操作DOM技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
微信小程序訪問(wèn)mysql數(shù)據(jù)庫(kù)流程詳解
日常我們?cè)陂_(kāi)發(fā)小程序的時(shí)候,總是希望把數(shù)據(jù)提交回?cái)?shù)據(jù)庫(kù)進(jìn)行存儲(chǔ),那在小程序中該如何訪問(wèn)數(shù)據(jù)庫(kù)呢?本篇我們就介紹一下具體的思路2022-08-08web 頁(yè)面分頁(yè)打印的實(shí)現(xiàn)
網(wǎng)上找的,經(jīng)我整理添加demo如下2009-06-06javascript 模擬坦克大戰(zhàn)游戲(html5版)附源碼下載
這篇文章主要介紹了javascript 模擬坦克大戰(zhàn)游戲關(guān)鍵點(diǎn)和遇到的問(wèn)題及實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-04-04JS回調(diào)函數(shù) callback的理解與使用案例分析
這篇文章主要介紹了JS回調(diào)函數(shù) callback的理解與使用,結(jié)合具體案例形式分析了javascript回調(diào)函數(shù)的功能、原理、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-09-09利用ajaxfileupload插件實(shí)現(xiàn)文件上傳無(wú)刷新的具體方法
利用ajaxfileupload插件實(shí)現(xiàn)文件上傳無(wú)刷新的具體方法,需要的朋友可以參考一下2013-06-06微信小程序使用第三方庫(kù)Underscore.js步驟詳解
大家都知道Underscore.js是一個(gè) JavaScript 工具庫(kù),它提供了一整套函數(shù)式編程的實(shí)用功能,但是沒(méi)有擴(kuò)展任何 JavaScript 內(nèi)置對(duì)象。那么這篇文章我們就來(lái)學(xué)習(xí)下微信小程序如何使用第三方庫(kù)Underscore.js,有需要的可以參考學(xué)習(xí)。2016-09-09JS實(shí)現(xiàn)秒殺倒計(jì)時(shí)特效
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)秒殺倒計(jì)時(shí)特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01OpenCV.js實(shí)現(xiàn)喬丹動(dòng)圖素描效果圖文教程
這篇文章主要為大家介紹了OpenCV.js實(shí)現(xiàn)喬丹動(dòng)圖素描效果的圖文教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08