【备战春招】第1天 前端工程师2022版

课程名称：节点的关系、封装节点关系函数

课程章节：JS函数与DOM

课程讲师： 未知

课程内容：

1. 节点之间的关系

   1-1

    1-2

2. 注意：文本节点也属于节点

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

            在标准的W3C规范中，空白文本节点也算作节点。IE8及以前浏览器例外。

3. 排除文本节点的干扰

4.代码演示

// html
<div id="box">
    <p>我是段落A</p>
    <p id="para">我是段落B</p>
    <p>我是段落B</p>
</div>

// js
var box = document.geElementById('box')
var para = document.geElementById('para')
console.log(box.childNodes);
// NodesList(7) [text, p, text, p#para, text, p, text]
// 上面text为空文本
console.log(box.children); // (IE9开始兼容)
// HTMLCollection(3) [p, p#para, p, para: p#para]

// 第一个子节点
console.log(box.firstChild) // #text (空白文本节点)
console.log(box.firstChild.nodeType) // 3
console.log(box.firstElementChild) // <p>我是段落A</p>

// 父节点
console.log(para.parentNode) // <div id="box">...</div>

// 前一个兄弟节点
console.log(para.previousSibling) // #text (空白文本节点)
console.log(para.previousElementSibling) // <p>我是段落A</p>

5. 书写常见的节点关系函数

         5-1  书写IE6也能兼容的“寻找所有元素子节点”函数

         5-2  书写IE6也能兼容的“寻找前一个元素兄弟节点”函数

         5-3  如何编写函数，获得某元素的所有兄弟节点？

6. 代码演示

    <div id="box">
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
        <p id="fpara">我是段落fpara</p>
        我是文本
        <!-- 我是注释 -->
        <p id="para">
            我是段落para
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </p>
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
    </div>

        var box = document.getElementById('box');
        var para = document.getElementById('para');
        var fpara = document.getElementById('fpara');

        // 封装一个函数，这个函数可以返回元素的所有子元素节点（兼容到IE6），类似children的功能
        function getChildren(node) {
            // 结果数组
            var children = [];
            // 遍历node这个节点的所有子节点，判断每一个子节点的nodeType属性是不是1
            // 如果是1，就推入结果数组
            for (var i = 0; i < node.childNodes.length; i++) {
                if (node.childNodes[i].nodeType == 1) {
                    children.push(node.childNodes[i]);
                }
            }
            return children;
        }

        console.log(getChildren(box));
        console.log(getChildren(para));

        // 封装一个函数，这个函数可以返回元素的前一个元素兄弟节点（兼容到IE6），类似previousElementSibling的功能
        function getElementPrevSibling(node) {
            var o = node;
            // 使用while语句
            while (o.previousSibling != null) {
                if (o.previousSibling.nodeType == 1) {
                    // 结束循环，找到了
                    return o.previousSibling;
                }

                // 让o成为它的前一个节点，就有点“递归”的感觉
                o = o.previousSibling;
            }
            return null;
        }

        console.log(getElementPrevSibling(para));
        console.log(getElementPrevSibling(fpara));

        // 封装第三个函数，这个函数可以返回元素的所有元素兄弟节点
        function getAllElementSibling(node) {
            // 前面的元素兄弟节点
            var prevs = [];
            // 后面的元素兄弟节点
            var nexts = [];
            var o = node;
            // 遍历node的前面的节点
            while (o.previousSibling != null) {
                if (o.previousSibling.nodeType == 1) {
                    prevs.unshift(o.previousSibling);
                }
                o = o.previousSibling;
            }

            o = node;

            // 遍历node的后面的节点
            while (o.nextSibling != null) {
                if (o.nextSibling.nodeType == 1) {
                    nexts.push(o.nextSibling);
                }
                o = o.nextSibling;
            }

            // 将两个数组进行合并，然后返回
            return prevs.concat(nexts);
        }

        console.log(getAllElementSibling(para));

课程收获：

老师讲的非常细致，内容虽然多，但好在易于理解。DOM基础之前看过一遍，现在再拿出来学习感觉理解起来更容易一点了，现在还只是简单的基础知识，只要记忆就行，基本上看完视频，自己练几遍就能记住。希望后面做到相关练习时，能有自己的思路，不再是依样画瓢，加油！