欢迎光临
我们一直在努力

JavaScript | DOM查找节点

开头一张图,后面慢慢编。

  • 父节点寻找第一个子节点:firstChild
  • 父节点寻找最后一个子节点:lastChild
  • 父节点寻找中间节点:childNodes[索引]或child.item(1)
  • 注意一下,上面的childNodes不是数组,他是一种列表或被称为类数组
  • 子节点寻找父节点:parentNode
  • 寻找下一个兄弟节点:nextSibling
  • 寻找上一个兄弟节点:previousSibling
  • 任何节点都可以查看文档节点:ownerDocument
  • 判断某个节点是不是叶子节点:hasChildNodes() 返回布尔值

代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="p">散人研Blog | 我是一个P节点</p>
    <script>
        var oHtml = document.documentElement; //获取HTML标签
        console.log(oHtml); //打印一下会看到完整的HTML标签

        //查看oHtml的第子节点
        var oHead = oHtml.firstChild;
        console.log(oHead); //成功找到head
        var oBody = oHtml.lastChild;
        console.log(oBody); //成功找到body节点

        var oText = oHtml.childNodes[1];
        console.log(oText);
        //执行上面的代码会发现找到的oText并不是body节点,而是#text
        //在新版本浏览器中,回车符会被当做文本存在childerNode列表中
        //因此想通过数childerNode找到body节点需要找childerNode[2]

        //查看兄弟节点
        //下面的打印false 因为oHead的下一个节点是#text(回车)
        oHead.nextSibling == oBody ? console.log(true) : console.log(false);
        //两次查找下一个节点会发现成功找到了oBody
        console.log(oHead.nextSibling.nextSibling);
        //同样oBody向上查找两次兄弟节点会找到oHead 将返回true
        console.log(oBody.previousSibling.previousSibling === oHead);

        //判断某个节点是不是叶子节点
        var p = document.getElementById('p');
        console.log(p.hasChildNodes());  //存在节点,因为p下有text 返回true
        console.log(p.childNodes[0].hasChildNodes()) //p下的text没有子节点了,返回false

        //通过某个节点查看文档节点
        console.log(p.ownerDocument); //输出#docum

    </script>
</body>
</html>

关于.childNode[1]出现#text的具体原理,在后面的文章讨论。

赞(0) 打赏
未经允许不得转载:散人研 » JavaScript | DOM查找节点
分享到: 更多 (0)

评论 抢沙发

1 + 4 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏