18 【节点的关系和内部操作】

最新推荐文章于 2024-05-23 16:08:37 发布

VIP文章 DSelegent

最新推荐文章于 2024-05-23 16:08:37 发布

阅读量455

点赞数

分类专栏： javaScript学习笔记文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/DSelegent/article/details/126502289

版权

21.节点的关系

关系	考虑所有结点
子节点	`childNodes`
父节点	`parentNode`
第一个子节点	`firstChild`
最后一个子节点	`lastChild`
前一个兄弟节点	`previousSibling`
后一个兄弟节点	`nextSibling`

【注意：文本节点也属于节点】

DOM 中，文本节点也属于节点，在使用节点的关系时一定要注意。

在标准的 W3C 规范中，空白文本节点也应该算作节点，但是在 IE8 及以前的浏览器中会有一定的兼容问题，它们不把空白文本节点当作节点。

【排除文本节点的干扰】

从 IE9 开始支持一些 “只考虑元素节点” 的属性。

如果考虑兼容性，可以通过后面的函数封装来实现。

关系	考虑所有结点	只考虑元素节点
子节点	`childNodes`	`children`
父节点	`parentNode`	同
第一个子节点	`firstChild`	`firstElementChild`
最后一个子节点	`lastChild`	`lastElementChild`
前一个兄弟节点	`previousSibling`	`previousElementSibling`
后一个兄弟节点	`nextSibling`	`nextElementSibling`

<!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>
    <div id="box">
        <p>我是段落A</p>
        <p id="para">我是段落B</p>
        <p>我是段落C</p>
    </div>

    <script>
        var box = document.getElementById('box');
        var para = document.getElementById('para');

        // 所有子节点
        console.log(box.childNodes);
        // 所有的元素子节点（IE9开始兼容）
        console.log(box.children);
        console.log(box.children.para);

        // 第一个子节点
        console.log(box.firstChild);
        console.log(box.firstChild.nodeType);
        // 第一个元素子节点（IE9开始兼容）
        console.log(box.firstElementChild);

        // 最后一个子节点
        console.log(box.lastChild);
        console.log(box.lastChild.nodeType);
        // 最后一个元素子节点（IE9开始兼容）
        console.log(box.lastElementChild);

        // 父节点
        console.log(para.parentNode);

        // 前一个兄弟节点
        console.log(para.previousSibling);
        // 前一个元素兄弟节点（IE9开始兼容）
        console.log(para.previousElementSibling);

        // 后一个兄弟节点
        console.log(para.nextSibling);
        // 后一个元素兄弟节点（IE9开始兼容）
        console.log(para.nextElementSibling);
    </script>
</body>

</html>

结果

注意：文本也算作节点（如图选中空白部分）

22.节点的内部操作

22.1 如何改变元素节点中的内容

改变元素节点中的内容可以使用两个相关属性。

innerHTML
innerText

innerHTML 属性能以 HTML 语法设置节点中的内容。

innerText 属性只能以纯文本的形式设置节点中的内容。

innerHTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box"></div>
    <script>
        var oBox = document.getElementById(