目录

1.DOM的简介

2.节点获取

1）.获取子节点

2）.节点属性

3）.获取父节点

4).获取相邻节点

 3）.节点的操作

1.节点的创建

2.节点的添加

3.节点的插入

4.节点的删除

5.节点替换

6.节点克隆

练习发表评论

4）.获取元素的其它方式

5）.操作元素结构上的属性

 案例：发送验证码状态

1.DOM的简介

• DOM：Document Object Model 文档对象模型 （创建，添加，删除，替换，查找，获取）

• DOM树：浏览器在解析html文档的时候，为了让他们的层次更明显，将html解析成DOM树的形式

• 节点：组成DOM树的所有内容，都称之为节点

2.节点获取

规律：获取到了是具体的节点，获取不到就是null,获取到了是一个集合,获取不到就是空集合

1）.获取子节点

• 父节点.children;获取直接元素子节点

  • 存在兼容问题：IE8及以下不兼容 包含注释节点

  var child = box.children;

        console.log(child); //HTMLCollection(3)

• 父节点.childNodes; 获取直接子节点

  • 存在兼容问题：IE8及以下不将换行及空格作为文本节点

  var nodes = box.childNodes;

console.log(nodes); //NodeList(9) [text, comment, text, p, text, ul, text, h2, text] //在标准浏览器下会把换行及空格当做文本节点

2）.节点属性

<div id="box">
        <!-- 我是注释 -->
        <p>我是p</p>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <h2>我是h2</h2>
        的即可拉伸及打开拉斯就立刻到
    </div>
    <script>
        var box = document.getElementById("box");

        var nodes = box.childNodes; //获取直接子节点
        console.log(nodes);

        console.log(nodes[3].nodeType, nodes[3].nodeName, nodes[3].nodeValue);
        console.log(nodes[0].nodeType, nodes[0].nodeName, nodes[0].nodeValue);
        console.log(nodes[1].nodeType, nodes[1].nodeName, nodes[1].nodeValue);
        console.log(document.nodeType, document.nodeName, document.nodeValue);



        /* 
            作用：获取直接元素子节点,传递第二个参数可以进行过滤
            参数：
                parentEle  父元素
                [tagName]  是否进行过滤
            返回值：数组
        */
        function getChild(parentEle, tagName) {
            // 获取直接子节点
            var nodes = parentEle.childNodes,
                arr = [];
            // 获取当前节点
            for (var i = 0; i < nodes.length; i++) {
                var curNode = nodes[i];
                // 判断
                if (tagName) { //传递了第二个参数
                    // 节点类型必须是1  节点名称必须等于传递tagName的值
                    if (curNode.nodeType === 1 && curNode.nodeName.toLowerCase() == tagName.toLowerCase()) { //元素节点
                        arr.push(curNode);
                    }
                } else {
                    if (curNode.nodeType === 1) { //元素节点
                        arr.push(curNode);
                        console.log(curNode.nodeName);
                    }
                }
            }
            return arr;
        }
        var res = getChild(box, "ul");
        console.log(res);
    </script>

3）.获取父节点

parentNode是指定节点的父节点.一个元素节点的父节点可能是一个元素(``Element )节点,也可能是一个文档(``Document )节点,或者是个文档碎片(DocumentFragment)节点.

• parentNode; 获取父节点 文档节点没有父节点返回值是null

   var li = document.getElementById("li");
        // parentNode; 获取父节点  文档节点没有父节点返回值是null
        console.log(li.parentNode);//ul

4).获取相邻节点

• 父元素.firstChild; 获取第一个子节点

  • 兼容：IE8及以下不将换行及空格作为文本节点

• 父元素.firstElementChild; 获取第一个元素子节点

  • 兼容：IE8及以下没有这个属性;

• 父元素.lastChild;获取最后一个子节点

  • 兼容：IE8及以下不将换行及空格作为文本节点

• 父元素.lastElementChild; 获取第一个元素子节点

  • 兼容：IE8及以下没有这个属性;

• 节点.previousSibling; 获取上一个兄弟节点

  • 兼容：IE8及以下不将换行及空格作为文本节点

• 节点.previousElementSibling; 获取上一个元素兄弟节点

  • 兼容：IE8及以下没有这个属性;

• 节点.nextSibling; 获取下一个兄弟节点

  • 兼容：IE8及以下不将换行及空格作为文本节点

• 节点.nextElementSibling; 获取下一个元素兄弟节点

  • 兼容：IE8及以下没有这个属性;  

    <ul id="box">
        <li>1</li>
        <li>2</li>
        <!-- 我是列表标签 -->
        <li id="test">3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        var box = document.getElementById("box");
        // 获取到了是具体的节点，获取不到就是null,获取到了是一个集合,获取不到就是空集合
       console.log(box.childNodes);
       //NodeList(13) [text, li, text, li, text, comment, text, li#test, text, li, text, li, text]

        console.log(box.firstChild);//text

        console.log(box.firstElementChild);//li

        console.log(box.lastChild);//text

        console.log(box.lastElementChild);//li

        var test = document.getElementById("test");
        console.log(test.previousSibling);//text

        console.log(test.previousElementSibling);//li

        console.log(test.nextSibling);//text

        console.log(test.nextElementSibling);//li

 3）.节点的操作

 操作已经存在的节点发生物理偏移

1.节点的创建

创建出来的节点都是对象

• 创建元素节点

  • document.createElemet(“标签名”);

• 创建文本节点

  • document.createTextNode("文本");

 var div = document.createElement("div");
        div.innerHTML = "我是DIV";
        console.log(div);

        
        var h2 = document.createElement("h2");
        var text = document.createTextNode("哈哈哈哈哈");

2.节点的添加

• 父节点.appendChild(子节点); 在父节点的末尾进行添加

      // 获取元素
        var ul = document.getElementById("ul");

        // 父节点.appendChild(子节点);  在父节点的末尾进行添加
        // 创建元素节点
        var li = document.createElement("li");
        li.innerHTML = "我是Li";

        // 创建文本节点
        var txt = document.createTextNode("我是Li");
        // 将文本节点添加到li中 
        li.appendChild(txt);
        console.log(li);

        // 将li添加到ul中
        ul.appendChild(li);

        // 操作已经存在的节点发生物理偏移
        console.log(ul.children);
        ul.appendChild(ul.children[0]);
      /*   2
        我是Li我是Li
        1 */

3.节点的插入

• 父元素.insertBefore(newEle,refEele); 在参考节点之前进行插入

  • newEle:要插入的节点

  • refEele：参考节点

      /* 
            父元素.insertBefore(newEle,refEele); 在参考节点之前进行插入
            - newEle:要插入的节点
            - refEele：参考节点
        */

        var ul = document.getElementById("ul");


        // 插入新的节点
        // 创建
        var li = document.createElement("li");
        li.innerHTML = "<a href='https://www.baidu.com'>我是Li</a>";
        console.log(li);

        // 没有参考元素,直接在最后面插入
        // ul.insertBefore(li,null);

        // 有参考元素
        ul.insertBefore(li,ul.children[1]);

        
        // 操作已经存在的节点发生物理偏移
        console.log(ul.children);
        // 将第一个元素节点插入到最后一个元素节点之前
        ul.insertBefore(ul.children[0],ul.children[ul.children.length-1]);

4.节点的删除

• 删除节点本身

  • 节点.remove();

• 删除子节点

  • 父元素.removeChild(子节点)；

    var ul = document.getElementById("ul");
        //  删除节点本身
        // ul.remove();

        // 删除子节点
        ul.removeChild(ul.children[1]);

5.节点替换

• 父元素.replaceChild(newEle,refEele);

  • newEle：替换节点

  • refEele：被替换节点

 /* 
            父元素.replaceChild(newEle,refEele);
            - newEle：替换节点
            - refEele：被替换节点
        */
        var ul = document.getElementById("ul");

        // 创建节点
        var h2 = document.createElement("h2");
        h2.innerText = "我是H2";

        // 用新的节点进行替换
        ul.replaceChild(h2,ul.children[1]);


        // 用已经存在的节点进行替换
        // 操作已经存在的节点发生物理偏移
        ul.replaceChild(ul.children[2],ul.children[0]);

6.节点克隆

• 节点.cloneNode([false]);

  • [false]->默认值是false,可以省略 只克隆节点本身不包含内容

  • true:将内容一起克隆

   var ul = document.getElementsByTagName("ul")[0];

        //    var res = ul.cloneNode();
        //    var res = ul.cloneNode(false);
        var res = ul.cloneNode(true);
        console.log(res);

练习发表评论

      // 获取元素
        var input = document.getElementsByTagName("input")[0];
        var button = document.getElementsByTagName("button")[0];
        var ul = document.getElementsByTagName("ul")[0];

        // 绑定事件
        button.onclick = function () {
            // 创建li
            var li = document.createElement("li");
            // 赋值内容
            li.innerHTML = input.value;

            // 创建button
            var btn = document.createElement("button");
            btn.innerText = "删除";

            // 将btn添加到li中
            li.appendChild(btn);

            // 将li插入到ul中
             //在最后面插入
            // ul.appendChild(li)
               //在最前面插入
            //    ul.insertBefore(li,ul.children[0]);
            ul.insertBefore(li, ul.firstElementChild);


            // 给btn绑定事件
            btn.onclick = function () {
                this.parentNode.remove();
            }
        }

4）.获取元素的其它方式

• context.querySelector(“css选择器”);

  • 获取到了返回具体的元素，如果有很多符合获取条件，只返回第一个，获取不到返回null

• context.querySelectorAll("css选择器");

  • 获取到了是一个节点集合，获取不到是一个空集合

context：在这里表示限定获取范围，可以是document也可以自己去限定（context:必须是具体的元素）  不兼容：IE7及以下没有这个属性

 var ul = document.querySelector("ul");
        var ul = document.querySelector("#box");
 var oLis = ul.querySelectorAll("li");
        console.log(oLis); //NodeList(10) [li, li, li, li, li, li, li, li, li, li]

        // 全部的li
        console.log(document.querySelectorAll('li'));
        //className名为box下的li
        var allLis = document.querySelectorAll("ul.box li");
        console.log(allLis);

5）.操作元素结构上的属性

天生自带的和自定义的

• 设置：元素节点.setAttribute(attr,val);

• 获取：元素节点.getAttribute(attr);

• 移除：元素节点.removeAttribute(attr);

  // 操作元素结构上的属性（天生自带的和自定义的）
        var div = document.querySelector("div");

        // 设置
        // 元素节点.setAttribute(attr,val);
        div.setAttribute("class", "box");
        div.setAttribute("id", "myBox");
        div.setAttribute("hello", "哈喽");
        div.setAttribute("trueSrc", "./img/2.jpg");

        // 获取
        // 元素节点.getAttribute(attr);
        console.log(div.getAttribute("id"));
        console.log(div.getAttribute("trueSrc"));
        console.log(div.getAttribute("hello"));

        // 移除
        // 元素节点.removeAttribute(attr);
        document.onclick = function () {
            div.removeAttribute("id");
            div.removeAttribute("class");
            div.removeAttribute("trueSrc");
        }

 案例：发送验证码状态

ody>
    <button>发送验证码</button>
    <script>
        // 获取元素
        var btn  = document.querySelector("button");

        // 绑定事件
        btn.onclick = function(){
            //点击禁用按钮
            this.setAttribute("disabled","disabled");
            // 重新赋值
            this.innerHTML = "5秒钟后重新发送";
            var n = 5;
            // 设置定时器  将定时器的返回值保存到自定义属性timer
            this.timer = setInterval(function(){
                // this->window
                // n自身减1
                n--;
                // 重新赋值
                btn.innerHTML = n+"秒钟后重新发送";
                // n的值是0
                if(n===0){
                    // 清除定时器
                    clearInterval(btn.timer);
                    // 重新赋值
                    btn.innerHTML = "发送验证码";
                    // 移除disabled属性
                    btn.removeAttribute("disabled");
                }
            },1000);
        }
    </script>