其实这里主要介绍5个属性啊
调用者是节点
注意这里是元素的遍历 元素啊!字眼啊!
这里5个属性分别是:
childElementCount
//获取到元素的个数
---------------------------------1
firstElementChild
//获取到第一个元素
可以说是 firstChild 的元素版
---------------------------------2
lastElementChild
//获取到最后一个元素
可以说是 lastChild 的元素版
---------------------------------3
previousElementSibling
//获取到前一个同辈元素
可以说是 previousSibling 的元素版
---------------------------------4
nextElementSibling
//获取到后一个同辈元素
可以说是 nextSibling 的元素版
---------------------------------5
来个例子你就懂了啊!
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <p>我是傻逼</p> <hr> <div id="bihu"> <a href="https://www.baidu.com/">百度一下</a> <a href="https://www.baidu.com/">程序员的路</a> <a href="https://www.baidu.com/">入门到入坟</a> <a href="https://www.baidu.com/">兴趣到迷茫</a> <a href="https://www.baidu.com/">跳槽到歇逼</a> </div> <hr> <p>我快歇逼</p> <hr> <script type="text/javascript"> var div = document.getElementById('bihu'); //先获取到div的节点 document.write(div.childElementCount + "<pre> </pre>"); //获取到元素的个数 document.write(div.firstElementChild + "<pre> </pre>"); //获取到第一个元素 document.write(div.lastElementChild + "<pre> </pre>"); //获取到最后一个元素 document.write(div.previousElementSibling + "<pre> </pre>"); //获取到前一个同辈元素 document.write(div.nextElementSibling + "<pre> </pre>"); //获取到后一个同辈元素 /*-------用 console.log()看 这里 write 只显示他的地址....*/ </script> </body> </html>