JavaScript原生節(jié)點(diǎn)操作小結(jié)
前言:原生是Javascript的基礎(chǔ),還是需要多多重視,時(shí)間長都忘記了,現(xiàn)在整理一下。
獲取子節(jié)點(diǎn)
children 不是標(biāo)準(zhǔn)的dom屬性,但是幾乎被所有瀏覽器支持。不包含文本節(jié)點(diǎn).
注意:在IE中,children包含注釋節(jié)點(diǎn)。
childNodes 是標(biāo)準(zhǔn)屬性。返回所有子節(jié)點(diǎn)。包括文本節(jié)點(diǎn)。
獲取第一個(gè)子節(jié)點(diǎn)
1.firstChild
document.getElementById('b_pole').childNodes[0].childNodes[0].firstChild
獲取最后一個(gè)子節(jié)點(diǎn)
1.lastChild
document.getElementById('b_pole').childNodes[0].childNodes[0].lastChild
判斷是否有子節(jié)點(diǎn)
1.hasChildNodes()
document.getElementById('b_pole').childNodes[0].childNodes[0].hasChildNodes()
判斷節(jié)點(diǎn)類型與節(jié)點(diǎn)名稱
1.nodeType
1:元素
2:屬性
3:文本
2.nodeName
document.getElementById('b_pole').childNodes[0].childNodes[0].nodeType //1 document.getElementById('b_pole').childNodes[0].childNodes[0].nodeName //UL
創(chuàng)建DOM結(jié)構(gòu)
1.創(chuàng)建元素節(jié)點(diǎn) createElement
2.創(chuàng)建文本節(jié)點(diǎn) createTextNode
document.createElement('div') document.createTextNode('ok')
插入節(jié)點(diǎn)
1.insertBefore
2.appendChild
document.getElementById('b_pole').insertBefore(document.createTextNode('div'),document.getElementById('b_pole').firstChild)
document.getElementById('b_tween').childNodes[0].nextSibling.previousSibling.appendChild(document.createTextNode('ZQZQZQZQZ'))
移除節(jié)點(diǎn)
1.removeChild
document.getElementById('b_pole').removeChild(document.getElementById('b_pole').childNodes[0])
并返回被刪除的節(jié)點(diǎn)dom
獲取元素的下一個(gè)節(jié)點(diǎn)(同胞)
1.nextSibling
document.getElementById('b_pole').nextSibling
獲取元素的上一個(gè)節(jié)點(diǎn)(同胞)
1.previousSibling
document.getElementById('b_pole').previousSibling
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!
- JavaScript DOM節(jié)點(diǎn)操作方法總結(jié)
- Javascript的各種節(jié)點(diǎn)操作實(shí)例演示代碼
- JavaScript 節(jié)點(diǎn)操作 以及DOMDocument屬性和方法
- js操作DOM--添加、刪除節(jié)點(diǎn)的簡單實(shí)例
- JavaScript操作HTML DOM節(jié)點(diǎn)的基礎(chǔ)教程
- JavaScript節(jié)點(diǎn)及列表操作實(shí)例小結(jié)
- Js操作樹節(jié)點(diǎn)自動(dòng)折疊展開的幾種方法
- 使用js完成節(jié)點(diǎn)的增刪改復(fù)制等的操作
- js和jquery對(duì)dom節(jié)點(diǎn)的操作(創(chuàng)建/追加)
- javascript學(xué)習(xí)筆記(十九) 節(jié)點(diǎn)的操作實(shí)現(xiàn)代碼
- javascript dom操作之cloneNode文本節(jié)點(diǎn)克隆使用技巧
相關(guān)文章
JS控件autocomplete 0.11演示及下載 1月5日已更新
JS控件autocomplete 0.11演示及下載 1月5日已更新...2007-01-01JS實(shí)現(xiàn)可自定義大小,可雙擊關(guān)閉的彈出層效果
這篇文章主要介紹了JS實(shí)現(xiàn)可自定義大小,可雙擊關(guān)閉的彈出層效果,涉及JavaScript定時(shí)函數(shù)及頁面元素動(dòng)態(tài)操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10小程序中this.setData的使用和注意事項(xiàng)
這篇文章主要介紹了微信小程序中this.setData的使用和注意事項(xiàng),非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08Javascript中浮點(diǎn)數(shù)相乘的一個(gè)解決方法
這篇文章主要介紹了Javascript中浮點(diǎn)數(shù)相乘的一個(gè)解決方法,需要的朋友可以參考下2014-06-06將\u8BF7\u9009\u62E9 這樣的字符串轉(zhuǎn)為漢字的代碼
如何把 \u8BF7\u9009\u62E9 這樣的字符串轉(zhuǎn)為漢字,喜歡的朋友可以參考下。2010-11-11javascript 實(shí)現(xiàn)雙擊才能打開鏈接的方法
javascript 實(shí)現(xiàn)雙擊才能打開鏈接的方法...2007-08-08解決bootstrap模態(tài)框數(shù)據(jù)緩存的問題方法
今天小編就為大家分享一篇解決bootstrap模態(tài)框數(shù)據(jù)緩存的問題方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08velocity.js實(shí)現(xiàn)頁面滾動(dòng)切換效果
這篇文章主要介紹了velocity.js實(shí)現(xiàn)頁面滾動(dòng)切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10