【JS学习笔记】JS对节点的操作（父节点，兄弟节点）

版权声明：商业转载需要经过本人同意，敬上！ https://blog.csdn.net/weixin_41835977/article/details/89006079

《HTML5权威指南》 CH25-理解DOM
文档对象模型-代表文档的众多对象组成
1，Document对象
2，Location对象
3，Windows成员
4，History对象
5，Screen对象
6，HTMLElement对象
7，Text对象
DOM中的CSS属性，事件
1，CSSStyleDeclaration对象
2，DOM的事件

Document对象

document对象中与节点操作有关的：

• childNodes：返回子元素的合集
• firstChild：返回某元素的第一个子元素
• forms：返回文中所有的forms对象
• getElementsById：
• getElementsByClassName：
• getElementsByName:
• getElementsByTagName:
• hasChildNodes()：如果有子元素则返回true
• head：返回代表head的元素
• images：返回所有代表img的对象
• lastChild：返回最后一个子元素
• links：返回所有代表文档中具备href属性的a和area元素的对象（集合）
• nextSibling：返回当前元素之后的兄弟元素（单）
• parentNode：返回父元素
• previousSibling：返回当前元素之前的兄弟元素（单）
• querySelector：返回匹配特定CSS选择器的第一个元素
• querySelectorAll：返回匹配特定CSS选择的所有元素

HTMLElement对象

• add()：给元素添加指定的类
• contains()：若含有指定类，则返回true
• remove()：移除指定类
• toggle()：如果存在则删除，不存在则添加
• dataset：返回data-开头的属性
• appendChild(HTMLElement)：将指定元素附加为当前元素的子元素
• insertBefore(,)：将第一个元素插到第二个元素之前

实战

百度前端20190402笔试第二道：
页面上存在id为JSBlink的下划线闪动节点，按照以下需求实现output函数。
1，output接收一个字符串参数，每隔200ms在闪动节点之前逐个显示字符。
2，新建span节点放置每个字符，其中必须存在class=word+随机加上color0-color23中的任一个class请使用系统随机函数。
3，在每次输出指定字符串前，请将闪动节点前的所有其他节点移除；
4，不要销毁和重建闪动节点
5，如果输出字符为空格，<，>请分别对其进行HTML转义，若是\n请直接输出

以下是代码：

function output(str) {
        var jsBlink = document.getElementById("jsBlink");
        var pre = jsBlink.previousElementSibling; //获取节点之前的兄弟元素，推荐使用循环
        while (pre) {
            var parent = pre.parentNode;
            parent.removeChild(pre);
            pre = jsBlink.previousElementSibling;
        }
        //删除所有jsBlink之前的元素
        let i = 0;
        let len = str.length;
        Interval(print, 200); //利用setTimeout实现setInterval
        function Interval(func,wait) {
            var interval = function () {
                func.call(null);
                setTimeout(interval,wait);
            };
            setTimeout(interval,wait);
        }
        function print() {
            if (i < len){
                var idColor = Math.round(Math.random()*23);
                var sp = document.createElement("span");
                sp.innerHTML = str.charAt(i);
                sp.className = "wordcolor"+ idColor;
                document.body.insertBefore(sp,jsBlink);
                i++;
            }
        }

    }
    output("Js is so cool!")