js学习笔记15----子节点和兄弟节点的操作
生活随笔
收集整理的這篇文章主要介紹了
js学习笔记15----子节点和兄弟节点的操作
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1.元素.firstChild : 只讀屬性，第一個子節(jié)點
標(biāo)準(zhǔn)下：會包含文本類型的子節(jié)點。
非標(biāo)準(zhǔn)下：只包含元素類型子節(jié)點。
元素.firstElementChild : 只讀屬性，第一個元素子節(jié)點，等價于元素.children[0]
標(biāo)準(zhǔn)和非標(biāo)準(zhǔn)下都是獲取第一個元素子節(jié)點。
?
2.元素.lastChild : 只讀屬性，最后一個子節(jié)點
元素.lastElementChild : 只讀屬性，最后一個元素子節(jié)點
?
3.元素.nextSibling: 只讀屬性，下一個兄弟節(jié)點
元素.nextElementSibling: 只讀屬性，下一個兄弟元素節(jié)點
?
4.元素.previousSibling: 只讀屬性，上一個兄弟節(jié)點
元素.previousElementSibling: 只讀屬性，上一個兄弟元素節(jié)點
?
兼容寫法：
<!DOCTYPE html> <html> <head><title>元素兼容</title> </head> <body><ul id="ul1"><li>111111</li><li>222222</li><li>333333</li><li>444444</li></ul><script type="text/javascript">var oUl = document.getElementById('ul1'); var oFirst = oUl.firstElementChild || oUl.firstChild;var oLast = oUl.lastElementChild || oUl.lastChild ;var oNext = oFirst.nextElementSibling || oFirst.nextSibling;var oPrev = oLast.previousElementSibling || oLast.previousSibling;oFirst.style.backgroundColor = 'red';oLast.style.backgroundColor = 'blue';oNext.style.backgroundColor = 'pink';oPrev.style.backgroundColor = 'brown';</script> </body> </html>?
總結(jié)
以上是生活随笔為你收集整理的js学习笔记15----子节点和兄弟节点的操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 华为呼叫中心解决方案学习笔记一（方案概述
- 下一篇： 第一部分 Mysql的基础