Dom

文档对象模型
Dom是关于创建，修改，插入，删除页面元素的标准
Dom赋予我们操作操作页面的能力

页面的内容都是字符串，js会把这些字符串转换成DOM树，DOM树会把字符串转换成节点，其实我们操作DOM的根本就是操作节点

Dom结构

在这里插入图片描述

DOM节点

            var box = document.getElementById("box");
            var attr = box.attributes;//元素属性节点的集合
            console.log(attr);
            console.log(attr[0]);//id=box

            var child = box.childNodes;//元素子节点的集合
            console.log(child);

            //元素节点,(常用)
            console.log(box.nodeName); //div
            console.log(box.nodeType);  //1

            //属性节点
            console.log(attr[0].nodeName);//id
            console.log(attr[0].nodeType); //2

            //文本节点
            console.log(child[0].nodeName);//#text
            console.log(child[0].nodeType);//3

            //注释节点
            console.log(child[3].nodeName);//#comment
            console.log(child[3].nodeType);//8


            //文档节点
            console.log(document.nodeName);//#document
            console, log(document.nodeType);//9

arrtibutes
属性节点，返回元素身上的所有属性节点，每个属性都会有一个自己对应的下标
其中length属性代表元素身上有多少个属性节点
childNodes
元素身上的第一层子节点，返回元素身上的所有子节点的集合（第一层）
nodeName
节点的名称
任何一个节点都会有这个属性
nodeType
节点的类型,返回的是一个数字

nodeName与tagName的区别

    <script>
        window.onload = function () {
            var box = document.getElementById("box");//元素节点

            console.log(box.nodeName);//div
            console.log(box.tagName);//div

            console.log(document.nodeName);//#document
            console.log(document.tagName);//undefined
        }
    </script>

nodeName节点名称，任何一个节点都有节点名称
tagName 标签名称，只有元素节点才有这个属性

点击子节点隐藏父节点

<body>

    <script>
        /**
         * 点击span隐藏li
         * **/
        window.onload = function () {
            var spans = document.querySelectorAll("span");
            var lis = document.querySelectorAll("li");

            for (var i = 0; i < spans.length; i++) {
                spans[i].index = i;
                spans[i].onclick = function () {
                    lis[this.index].style.display = 'none';
                }
            }
        }
    </script>
    <ul>
        <li><span>隐藏1</span></li>
        <li><span>隐藏2</span></li>
        <li><span>隐藏3</span></li>
        <li><span>隐藏4</span></li>
        <li><span>隐藏5</span></li>
    </ul>
</body>

查找节点

parentNode
元素的父节点
属性节点是没有父节点的

<body>
    <script>
        window.onload = function () {
            var box = document.getElementById("box");
            var p = box.querySelector('p');//元素节点

            console.log(p.parentNode);//div

            var attr = p.attributes;//属性节点
            console.log(attr[0].parentNode);//null


            //属性不能找父级节点，属性属于标签
            //注释是由父节点的
            var child = box.childNodes; //box里所有的子节点
            console.log(child[3].parentNode);//div#box
        };
    </script>
    <div id="box">
        <p style="width:100px;"></p>
        <!--  -->
    </div>
</body>

使用元素父节点完成【点击子元素隐藏父节点】

<body>

    <script>
        /**
         * 点击span隐藏li
         * **/
        window.onload = function () {
            var spans = document.querySelectorAll("span");


            for (var i = 0; i < spans.length; i++) {
                spans[i].onclick = function () {
                    this.parentNode.style.display = 'none';
                    //this.parentNode                   //li
                    //this.parentNode.parentNode        //ul
                    //this.parentNode.parentNode.parentNode //body
                    //之后的父级html,#document,null
                }
            }
        }
    </script>
    <ul>
        <li><span>隐藏1</span></li>
        <li><span>隐藏2</span></li>
        <li><span>隐藏3</span></li>
        <li><span>隐藏4</span></li>
        <li><span>隐藏5</span></li>
    </ul>
</body>

children（非标准）
父级.children
获取到父级下的第一层子元素，它是一个集合,代表所有的子元素，每个子元素都有一个对应下标
它还有一个length属性，代表子元素的个数
childrenNodes
获取元素的第一层的所有子节点，包括文本注释

<body>
    <script>
        window.onload = function () {
            var ul = document.querySelector("ul");
            console.log(ul.children);

            function getChild(parent) {
                var child = parent.childNodes;
                var arr = [];

                for (var i = 0; i < child.length; i++) {
                    if (child[i].nodeType == 1) {
                        arr.push(child[i]);
                    }
                }
                return arr;
            }
            var lis = getChild(ul);
            console.log(lis);
        }

    </script>
</body>

previousElementSibling
找到上一个兄弟节点，找不到就返回null

    <script>
        window.onload = function () {
            var lis = document.querySelectorAll("li");

            lis[3].previousElementSibling.style.background = 'red';

            console.log(lis[0].previousElementSibling);//null
            lis[0].previousElementSibling.style.background = 'red';//error
        }
    </script>
    <ul>
        <li><span>隐藏1</span></li>
        <li><span>隐藏2</span></li>
        <li><span>隐藏3</span></li>
        <li><span>隐藏4</span></li>
        <li><span>隐藏5</span></li>
    </ul>

nextElementSibling
找下一个兄弟节点，找不到返回null
firstElementChild
父级.firstElementChild
找到第一个子节点

    <script>
        window.onload = function () {
            var lis = document.querySelectorAll("li");
            var ul = document.querySelector("ul");

            ul.firstElementChild.style.background = 'red';
        }
    </script>
    <ul>
        <li><span>隐藏1</span></li>
        <li><span>隐藏2</span></li>
        <li><span>隐藏3</span></li>
        <li><span>隐藏4</span></li>
        <li><span>隐藏5</span></li>
    </ul>

找第一个兄弟节点的代码运行效果