DOM选择器之元素其他节点选择器

最新推荐文章于 2021-06-21 13:58:45 发布

anhumi4350

最新推荐文章于 2021-06-21 13:58:45 发布

阅读量102

点赞数

原文链接：http://www.cnblogs.com/hy96/p/11401561.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <span>qwe</span>
    <div class="box"><span>1</span>
        <p>2</p>
        hello
        <!-- 这是注释 -->
        <em>3</em></div>
    <span>zxc</span>
</body>
<script>
     其他节点选择器:
         关系：
         父选子：
             var obox = document.querySelector(".box")
             console.log(obox.childNodes) //) [span, text, p, text, comment, text, em]
         上一个兄弟：
             var obox = document.querySelector(".box")
             console.log(obox.previousSibling)  //#text
         下一个兄弟：
             var obox = document.querySelector(".box")
             console.log(obox.nextSibling)  //#text
         第一个子：
             var obox = document.querySelector(".box")
             console.log(obox.firstChild) //<span>1</span>
         最后一个子：
             var obox = document.querySelector(".box")
             console.log(obox.lastChild) //<em>3</em>
</script>
</html>

空格注释都算节点

转载于:https://www.cnblogs.com/hy96/p/11401561.html