DOM总结

前言
DOM总结笔记篇仅是记载本人学习过程中的一些总结，为了梳理一下知识点，督促自己不断加强学习。文中有些是源自官网，有些是搜集资料，有些是个人观点，难免存在某些知识点疏漏或者是有错误的地方，如果错误之处，希望看到的小伙伴能及时提个醒，避免误导其他小伙伴，也希望我的总结能帮助到正在学或者是将要学习DOM的小伙伴们！大家一起努力，早日成为IT界的大神！

一、DOM

1.DOM（Document Object Model）

2.DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象集合。也有人称DOM是对HTML以及XML的标准编程接口。

XML-XHTML-HTML

XML可自定义标签
 <student>
    <name>ahh</name>
</student>

 
        //创建一个div
        var div = document.createElement('div');
        document.body.appendChild(div);
        

        // 切换div的颜色
        var div = document.getElementsByTagName('div')[0];
        div.style.backgroundColor = 'red';

        var count = 0;
        div.onclick = function () {
            count ++;
            if (count % 2 == 1) {
                this.style.backgroundColor = 'red';
                console.log(count);
            } else {
                this.style.backgroundColor = 'green';
                console.log(count);
            }
        }
        

    <!-- 选项卡功能 -->
    <div class="wrapper">
        <button class="active">按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <div style="display:block" class="content">
            我是内容一
        </div>
        <div class="content">
            我是内容二
        </div>
        <div class="content">
            我是内容三
        </div>
    </div>

    <script>
        var btn = document.getElementsByTagName("button");
        var div = document.getElementsByClassName("content");

        for (var i = 0; i < btn.length; i++) {
            (function (n) {
                btn[n].onclick = function () {
                for (var j = 0; j < btn.length; j++) {
                    btn[j].className = "";
                    div[j].style.display = "none";
                }
                this.className = "active";
                div[n].style.display = "block";
            }
            }(i))
        }
      

        // 利用定时器控制小方块运动
        var div = document.createElement("div");
        document.body.appendChild(div);

        div.style.width = "200px";
        div.style.height = "200px";
        div.style.background = "red";
        div.style.position = "absolute";
        div.style.top = 0;
        div.style.left = 0;

        setInterval(function () {
            div.style.left = parseInt(div.style.left) + 1 + "px";
            div.style.top = parseInt(div.style.top) + 1 + "px";
        }, 100)
        

二、DOM基本操作

（一）节点

1.遍历节点树

（1）parentNode -> 父节点 （最顶端的parentNode为#document）

（2）childNodes -> 子节点们

（3）firstChild -> 第一个子节点

（4）lastChild -> 最后一个子节点

（5）nextSibling -> 后一个兄弟节点 previousSibling -> 前一个兄弟节点

2.基于元素节点树的遍历

（1）parentElement -> 返回当前元素的父元素节点（IE不兼容）

（2）children -> 只返回当前元素的元素子节点

（3）node.childElementCount === node.children.length 当前元素节点的子元素

（4）firstElementChild -> 返回的是第一个元素节点（IE9及IE9以下不兼容）

（5）.lastElementChild -> 返回的是最后一个元素节点（IE不兼容）

（6）nextElementSibling / previousElementSibling -> 返回后一个/前一个兄弟元素

3.节点的四个属性

（1）nodeName：元素的标签名，以大写形式表示，只读。

（2）nodeValue：Text节点或Comment节点的文本内容，可写。

（3）nodeType：该节点的类型，只读。

（4）attributes：Element节点的属性集合。

4.节点的一个方法

（1）Node.hasChildNodes();

5.节点的类型

（1）元素节点 - 1

（2）属性节点 - 2

（3）文本节点 - 3

（4）注释节点 - 8

（5）document - 9

（6）DocumentFragment - 11

（二）

1.增加

（1）document.createElement();

（2）document.createTextNode();

（3）document.createComment();

（4）document.createDocumentFragment();

2.插入

（1）parentNode.appendChild();

（2）parentNode.insertBefore(a, b); //insert a before b

3.查看

（1）documentj代表整个文档

（2）getElementById（）； //元素id在ie8以下的浏览器，不区分id大小写，而且返回匹配内容的元素

（3）getElementsByTagName（）； //标签名

（4）getElementsByClassName（）；//类名 ie8和ie8以下的ie版本中没有，可以多个class一起

（5）getElementsByName（）； //需注意，只有部分标签name可生效（表单、表单元素、img、iframe）

（6）querySelector(); //可添加css选择器，但在ie和ie7以下的版本中没有，不实时。

（7）querySelectorAll（）； //可添加css选择器，选出来的是一组，但在ie和ie7以下的版本中没有，静态的（保存的是父本）。

4.删除

（1）parent.removeChild();

（2）child.remove();

5.替换

（1）parent.replaceChild(new, origin);

（三）

1.Element节点的一些属性

（1）innerHTML

（2）innerText(火狐不兼容）/ textContent（老版本IE不好使）

2.Element节点的一些方法

（1）ele.setAttribute()

（2）ele.getAttribute()

Test:

1.遍历元素节点树（在原型链上编程）

        
        // 遍历节点树，在原型链上编程
        var div = document.getElementsByTagName('div')[0];
        var span = document.getElementsByTagName('span')[0];

        HTMLElement.prototype.myTree = function (ele) {
            var arr = [];
            for (var i = 0; i < this.childNodes.length; i++) {
                arr.push(this.childNodes[i]);
            }
            return arr;
        }
        

2.封装函数，返回元素e的第n层祖先元素节点

        
        // 封装函数，返回元素e的第n层祖先元素节点
        function retBytes (ele, n) {
            while (ele && n) {
                ele = ele.parentElement;
                n --;
            }
            return ele;
        }
        

3.封装函数，返回元素e的第n个兄弟元素节点，n为正，返回后面的兄弟元素节点，n为负，返回前面的，n为0，返回自己。

        // 不考虑IE9及IE9以下兼容
        function myRet (ele, n) {
            while (ele && n) {
                if (n > 0) {
                    ele = ele.nextElementSibling;
                    n --;
                } else if (n < 0) {
                    ele = ele.previousElementSibling;
                    n ++;
                }
            }
            return ele;
        }
        

        // 考虑IE兼容
        function myRet (e, n) {
            while (e && n) {
                if (n > 0) {
                    if (0 && e.nextElementSibling) {
                        e = e.nextElementSibling;
                    } else {
                        for (e.nextSibling; e && e.nodeType != 1; e.nextSibling);
                    }
                } else {
                    if (e.previousElementSibling) {
                        e = e.previousElementSibling;
                    } else {
                        for (e.previousSibling; e && e.nodeType != 1; e.previousSibling);
                    }
                }
            }
            return e;
        }
        

4.编辑函数，封装myChildren功能，解决以前部分浏览器的兼容性问题。

        // 编辑函数，封装myChildren功能，解决以前部分浏览器的兼容性问题。
        // children -> 只返回当前元素的元素子节点
        Element.prototype.myChild = function () {
            var child = this.childNodes,
                len = childNodes.length,
                arr = [];
            
            for (var i = 0; i < len; i++) {
                if (child[i].nodeType == 1) {
                    arr.push(child[i]);
                }
            }
            return arr;
        }

5.自己封装hasChildren（）方法，不可用children属性。

        // children -> 只返回当前元素的元素子节点
        Element.prototype.myChild = function () {
            var child = this.childNodes,
                len = childNodes.length,
                arr = [];
            
            for (var i = 0; i < len; i++) {
                if (child[i].nodeType == 1) {
                    return true;
                }
            }
            return false;
        }

6.封装函数insertAfter(),功能类似insertBefore();

        // 封装函数insertAfter(),功能类似insertBefore();
        Element.prototype.insertAfter = function (targetNode, originNode) {
            var beforeNode = originNode.nextElementSibling;
            if (beforeNode == null) {
                this.appendChild(targetNode);
            } else {
                this.insertBefore(targetNode, beforeNode);
            }
        }

        var div = document.getElementsByTagName('div')[0];
        var span = document.getElementsByTagName('span')[0];
        var i = document.createElement('i');

7.// 将目标节点内部的顺序逆序

8.

        // 定时器，三分钟停止
        var minutesNode = document.getElementsByTagName('input')[0];
        var secondsNode = document.getElementsByTagName('input')[1];

        var minutes = 0,
            seconds = 0;

        var timer = setInterval(function () {
            seconds ++;
            if (seconds == 60) {
                seconds = 0;
                minutes ++;
            }

            secondsNode.value = seconds;
            minutesNode.value = minutes;

            if (minutes == 3) {
                clearInterval(timer);
            }
        }, 100)
        

文章持续更新中加粗样式，敬请关注，谢谢阅读！