-
DOM
的节点我们一般分为常用的三大类 元素节点 / 文本节点 / 属性节点
元素节点
<body>
<div>
<p>hello</p>
</div>
<script>
// 这个 oDiv 获取的是页面中的 div 元素,就是一个元素节点
var oDiv = document.querySelector('div')
console.log(oDiv.childNodes)
/*
NodeList(3) [text, p, text]
0: text
1: p
2: text
length: 3
__proto__: NodeList
*/
</script>
</body>
-
我们会发现,拿到以后是一个伪数组,里面有三个节点
-
这个时候就能看到我们有不同的节点类型了
-
children
:获取某一节点下所有的子一级 元素节点
<body> <div> <p>hello</p> </div> <script> // 这个 oDiv 获取的是页面中的 div 元素,就是一个元素节点 var oDiv = document.querySelector('div') console.log(oDiv.children) /* HTMLCollection [p] 0: p length: 1 __proto__: HTMLCollection */ </script> </body>
-
我们发现只有一个节点了,因为
children
只要元素节点 -
div 下面又只有一个元素节点,就是
p
-
children
:获取某一节点下所有的子一级 元素节点 -
第一个就是
<div> 一直到 <p>
的那个换行和空格,是个文本节点
<body>
<div>
<p>hello</p>
</div>
<script>
// 这个 oDiv 获取的是页面中的 div 元素,就是一个元素节点
var oDiv = document.querySelector('div')
console.log(oDiv.lastChild) // #text
</script>
</body>
-
<body> <ul> <li id="a">hello</li> <li id="b">world</li> <li id="c">!!!</li> </ul> <script> // 这个 oLi 获取的是页面中的 li 元素,就是一个元素节点 var oLi = document.querySelector('#b') console.log(oLi.nextSibling) // #text </script> </body>
- 只获取一个节点,不在是伪数组
-
prevIoUsSibling
:获取某一个节点的 上一个兄弟节点<body> <ul> <li id="a">hello</li> <li id="b">world</li> <li id="c">!!!</li> </ul> <script> // 这个 oLi 获取的是页面中的 li 元素,就是一个元素节点 var oLi = document.querySelector('#b') console.log(oLi.prevIoUsSibling) // #text </script> </body>
原文地址:https://www.jb51.cc/wenti/3282496.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。