javascript获取父元素下所有节点/第一个节点

来源：互联网发布：网络固定电话编辑：程序博客网时间：2024/06/02 02:33

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><p>如何获取父元素下所以子节点？</p><p>childNodes - 获取所有子元素的[节点]</p><p>主流浏览器/IE8以上的版本 childNodes.length = 7(文本节点+元素节点)，因为浏览器将换行之间的空格视为文本节点</p><p>IE8以及以下的低版本 childNodes.length = 3(元素节点)，只获取元素节点</p><p>解决方法</p><p>如果只想获取父元素下的元素节点又能解决IE兼容性问题 - 使用 children</p><p>children - 获取所有子元素中的[元素节点] - 所有浏览器都支持(包括IE低版本)</p><p>----------------------------------------</p><p>如何获取父元素下的第一个子节点？</p><p>firstChild - 获取父元素下第一个节点</p><p>主流浏览器/IE8以上的版本 - 获取的都是文本节点</p><p>IE8以及以下的低版本 firstChild 获取的是元素节点</p><p>firstElementChild</p><p>主流浏览器/IE8以上的版本-firstElementChild-获取的是第一个元素节点</p><p>IE8以及以下的低版本不识别 firstElementChild</p><p>解决方法</p><p>children[0]-获取</p><ul id="ul1"><li>1</li><li>2</li><li>3</li></ul><script>var ul = document.getElementById('ul1');console.log(ul.childNodes.length);console.log(ul.children.length);console.log(ul.firstChild.innerText);console.log(ul.firstElementChild.innerText);console.log(ul.children[0].innerText);</script></body></html>

阅读全文

0 0