【前端】【JS】前端学习之路（十）：DOM练习（五）（元素与节点/节点兼容/全选&全不选）

1.12个获取元素与节点的代码

（1）基本概念

①文档：document

②元素：页面中所有的标签，元素-----element，标签---->元素---->对象

③节点：页面中所有的内容（标签、文本（文字、换行、空格、回车）、属性），节点-----Node

④根元素：html标签

（2）节点的属性（可以使用标签--元素.出来，可以使用属性节点.出来，文本节点.出来）

①nodeType：节点的类型：1-----标签，2-----属性，3-----文本

②nodeName：节点的名字：标签节点-----大写的标签名字，属性节点-----小写的属性名字，文本节点-----#text

③nodeValue：节点的值：标签节点-----null，属性节点-----属性值，文本节点-----文本内容

    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: grey;
        }
    </style>

<div id="dv">
    <span>我是一个span</span>
    <p>这是div中的第二个元素，第一个p标签</p>
    <ul id="uu">
        <li>Chandler</li>
        <li>Monica</li>
        <li id="brother">Ross</li>
        <li>Rachel</li>
        <li>Phoebe</li>
        <li>Joey</li>
    </ul>
</div>

<script>

    //获取ul
    var dvObj = my$("uu");

    //1.获取父级节点
    console.log(dvObj.parentNode);
    //2.获取父级元素
    console.log(dvObj.parentElement);
    //3.子节点
    console.log(dvObj.childNodes);
    //4.子元素
    console.log(dvObj.children);
    //5.第一个子节点
    console.log(dvObj.firstChild);
    //6.第一个子元素
    console.log(dvObj.firstElementChild);
    //7.最后一个子节点
    console.log(dvObj.lastChild);
    //8.最后一个子元素
    console.log(dvObj.lastElementChild);
    //9.某个元素的前一个兄弟节点
    console.log(my$("brother").previousSibling);
    //10.某个元素的前一个兄弟元素
    console.log(my$("brother").previousElementSibling);
    //11.某个元素的后一个兄弟节点
    console.log(my$("brother").nextSibling);
    //12.某个元素的后一个兄弟元素
    console.log(my$("brother").nextElementSibling);


</script>

效果：

2.通过节点操作元素的背景颜色

<hr/>
<input type="button" value="变色" id="btn"/>

<div id="dv">
    <p>我是一个p</p>
    <span>我是一个span</span>
    <p>我是一个p</p>
    <span>我是一个span</span>
    <p>我是一个p</p>
    <span>我是一个span</span>
    <p>我是一个p</p>
    <span>我是一个span</span>
</div>

<script>
    var pObj = my$("dv").childNodes;

    my$("btn").onclick = function () {
        for (var i = 0; i < pObj.length; i++) {
            if (pObj[i].nodeName == "P" && pObj[i].nodeType == "1") {
                pObj[i].style.backgroundColor = "red";
            } else if (pObj[i].nodeName == "SPAN" && pObj[i].nodeType == "1") {
                pObj[i].style.backgroundColor = "yellow";
            }
        }
    }
</script>

点击前：

点击后：

3.节点操作隔行变色

<hr/>
<input type="button" value="变色" id="btn"/>
<ul id="uu">
    <li>Chandler</li>
    <li>Ross</li>
    <li>Phoebe</li>
    <li>Rachel</li>
    <li>Monica</li>
    <li>Joey</li>
</ul>

<script>
    var list = my$("uu").childNodes;

    my$("btn").onclick = function () {
        var count = 0;
        for (var i = 0; i < list.length; i++) {
            if (list[i].nodeName == "LI" && list[i].nodeType == "1") {
                list[i].style.backgroundColor = count % 2 ? "red" : "yellow";
                count++;
            }
        }
    };
</script>

点击前：

点击后：

4.节点兼容代码

    第一个节点和第一个元素的获取的代码在IE8中会出现不兼容的情况，如下：
    element.firstChild--->谷歌和火狐获取的是第一个 子节点
    element.firstChild--->IE8获取的是第一个 子元素
    element.firstElementChild------>谷歌和火狐是第一个子元素, IE8不支持

    就说明我们需要设置一个函数用来解决这种兼容问题，获取第一个子元素的兼容函数

<ul id="uu">
    <li>Chandler</li>
    <li>Ross</li>
    <li>Phoebe</li>
    <li>Rachel</li>
    <li>Monica</li>
    <li>Joey</li>
</ul>

<script>

    //获取任意一个父级元素的第一个子级元素

    //首先是传入一个元素，然后获取其中的子元素
    function getFirstElement(element) {
        if (element.firstElementChild) { //如果为true------支持，如果为false------不支持
            return element.firstElementChild;
        } else {
        //return element.firstChild;
        //以上这种方法如果遇上不支持firstElementChild且认为firstChild获取的是子节点的话就不通用了
        //所以需要以下方式：
            var ele = element.firstChild;
        //循环判定ele是否是一个元素，如果不是则选择其下一个兄弟节点
            while (ele && ele.nodeType != 1) {
                ele = ele.nextSibling;
            }
        //跳出循环即说明已经获取到第一个元素，则返回
            return ele;
        }

    }


    function getLastElement(element) {
        if (element.lastElementChild) { //如果为true说明浏览器支持，如果为false说明不支持
            return element.lastElementChild;
        } else {
        //return element.lastChild;
        //以上这种方法如果遇上不支持lastElementChild且认为lastChild获取的是子节点的话就不通用了
        //所以需要以下方式：
            var ele = element.lastChild;
        //循环判定ele是否是一个元素，如果不是则选择其下一个兄弟节点
            while (ele && ele.nodeType != 1) {
                ele = ele.previousSibling;
            }
        //跳出循环即说明已经获取到第一个元素，则返回
            return ele;
        }

    }

    var a = getFirstElement(my$("uu"));

    var b = getLastElement(my$("uu"));

    console.log("我是第一个元素:" + a.innerText);
    console.log("我是最后一个元素:" + b.innerText);

</script>

效果：

5.为网页设置背景图片

    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            background-image: url("images/1.jpg");
        }

        #mask {
            background-color: rgba(255, 255, 255, 0.3);
            height: 200px;
            text-align: center;
        }

        #mask img {
            width: 200px;
            margin-top: 35px;
            cursor: pointer;
        }

    </style>

<!--这个案例为body加上了id="bd"-->


<div id="mask">
    <img src="images/1.jpg" alt="">
    <img src="images/2.jpg" alt="">
    <img src="images/3.jpg" alt="">
</div>

<script>
    //首先需要获取img，同时为img注册点击事件
    var imgObj = my$("mask").getElementsByTagName("img");

    for (var i = 0; i < imgObj.length; i++) {
        imgObj[i].onclick = function () {
        //获取body，然后为body设置背景图片
            document.body.style.backgroundImage = "url(" + this.src + ")";
        //设置的格式是关键，需要牢记！！
        }
    }
</script>

重点牢记一下背景图片的设置格式

效果：

点击其他图片：

6.通过节点解决全选和全不选问题

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="j_cbAll"/>
            </th>
            <th>菜名</th>
            <th>饭店</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>红烧肉</td>
            <td>田老师</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>西红柿鸡蛋</td>
            <td>田老师</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>油炸榴莲</td>
            <td>田老师</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>清蒸助教</td>
            <td>田老师</td>
        </tr>

        </tbody>
    </table>
</div>

<script>
    //1.首先是点击全选按钮就全选四个，取消全选按钮就四个都取消选择

    //获取总复选框
    var BiObj = my$("j_cbAll");
    //获取小复选框
    var LiObj = my$("j_tb").getElementsByTagName("input");

    //为总复选框注册点击事件

    BiObj.onclick = function () {
//console.log(this.checked);
        for (var i = 0; i < LiObj.length; i++) {
            LiObj[i].checked = this.checked;
        }
    };

    //2.然后是点击满四个就全选


    //首先遍历四个按钮来分别注册点击事件

    for (var j = 0; j < LiObj.length; j++) {

        LiObj[j].onclick = function () {

            var flag = true; //设定一个复选框的条件，并且默认复选框是被选中的

            for (var k = 0; k < LiObj.length; k++) {
                //循环遍历判断四个小复选框有没有被选中
                if (!LiObj[k].checked) {
                    //如果没有被选中，就设flag为false
                    //并且用break跳出for循环
                    flag = false;
                    break;
                }
            }
            //如果全部被选中，则flag默认为true，则总复选框会被选中
            //如果有一个或多个没有被选中，flag会被设置为false，则复选框不会被选中
            BiObj.checked = flag;

        };
    }

</script>