DOM案例（4）

最新推荐文章于 2022-05-30 20:49:56 发布

_有光

最新推荐文章于 2022-05-30 20:49:56 发布

阅读量171

点赞数

本文链接：https://blog.csdn.net/youguang_/article/details/84779457

版权

（1）封装节点兼容代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
</head>
<body>
<!--====================封装节点兼容代码=============-->
    <ul id="uu">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
    <script src="H1.js"></script>
    <script>
        //第一个节点和第一个元素的获取的代码在IE8中可能不支持

        //element.firstChild--->谷歌和火狐获取的是第一个子几点
        //element.firstChile--->IE8获取的是第一个子元素
        //element.firstElementChild------>谷歌和火狐是第一个子元素,IE8不支持
        //获取任意一个父级元素的第一个子级元素

        function getElementChid(element) {
            if (element.firstElementChild){
                return element.firstElementChild;
            } else{
                return element.firstChild;
                var node = element.firstChild; // 第一个节点
                while (node && node.nodeType != 1){
                    node = node.nextSibling;
                }
                return node;
            }
        }
        //获取任意一个父级元素的最后一个子级元素
        function getElementLastChid(element) {
            if (element.lastElementChild){
                return element.lastElementChild;
            } else{
                return element.lastChild;
                var node = element.lastChild; // 第一个节点
                while (node && node.nodeType != 1){
                    node = node.previousSibling;
                }
                return node;
            }
        }
        console.log(getElementChid(my$("uu")).innerText);
        console.log(getElementLastChid(my$("uu")).innerText);
    </script>
        
</body>
</html>

（2）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background: url("image/11.jpg") no-repeat center 300px;
          
        }
        #mask {
            background-color: rgba(255,255,255,0.3);
            height: 200px;
            text-align: center;
        }
        #mask img {
            width: 200px;
            margin-top: 35px;
            cursor: pointer;
        }
    </style>
</head>
<body id="bd">
    <div id="mask">
        <img src="image/11.jpg" alt="">
        <img src="image/22.jpg" alt="">
        <img src="image/33.jpg" alt="">
        <img src="image/44.jpg" alt="">
    </div>
    <script src="H1.js"></script>
    <script>
        var imgObj = my$("mask").children;
        for (var i=0;i<imgObj.length;i++){
            imgObj[i].onclick = function () {
                document.body.style.backgroundImage = "url("+this.src+")";
            }
        }
    </script>
</body>
</html>

（3） <!--==============全选和全不选=================-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            margin: 100px auto 0;
            width: 300px;
            text-align: center;
        }
        thead {
            background-color: #2288f6;
        }
        tbody {
            background-color: #ccc;
        }
    </style>
</head>
<body id="bd">
    <table border="1">
        <thead>
            <tr>
                <th>
                    <input type="checkbox" id="id1">
                </th>
                <th>菜名</th>
                <th>饭店</th>
            </tr>
        </thead>
        <tbody id="id2">
           <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>
    <script src="H1.js"></script>
    <script>
        //获取全选的这个复选框
        var ckAll = my$("id1");
        //获取tbody中所有的复选框
        var cmObj = my$("id2").getElementsByTagName("input");
        //点击全选的这个复选框,获取他当前的状态,然后设置tbody中所有复选框的状态
        ckAll.onclick = function () {
                for (var i=0;i<cmObj.length;i++){
                    cmObj[i].checked = this.checked;
                }
            };
            //获取tbody中所有的复选框,分别注册点击事件
            for (var i=0;i<cmObj.length;i++){
                cmObj[i].onclick = function () {
                    var flag = true;
                    //判断是否所有的复选框都选中
                    for (var j=0;j<cmObj.length;j++){
                        //没选中就进来了
                        if (! cmObj[j].checked){
                            flag = false;
                            break;
                        }
                    }
                    //全选的这个复选框的状态就是flag这个变量的值
                    ckAll.checked = flag;
                }
            }
    </script>
</body>
</html>
（4）动态创建列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div1{
            width: 200px;
            height: 200px;
            border: 2px solid pink;
        }
    </style>
</head>
<body>

    <input type="button" value="创建一个对象" id="btn">
    <div id="div1"></div>
    <script src="H1.js"></script>
    <script>
        var names = ["1","2","3","4","5","6"];
        my$("btn").onclick= function () {
            var str = "<ul style='list-style-type: none;cursor: pointer'>";
            //根据循环创建对应对数的li
            for (var i=0;i<names.length;i++){
                str += "<li>"+names[i]+"</li>";
            }
            str += "</ul>";
            my$("div1").innerHTML = str;
            //代码执行到这里,li已经有了
            //获取所有的li,遍历,添加鼠标进入事件,鼠标离开事件
        var liObj = my$("div1").getElementsByTagName("li");
        for (var i=0;i<liObj.length;i++){
            liObj[i].onmouseover = function () {
                this.style.backgroundColor = "yellow";
            };
            //鼠标离开
            liObj[i].onmouseout = function () {
               this.style.backgroundColor = "";
            };
          }
        };
    </script>
</body>
</html>

（5）动态创建列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div1{
            width: 200px;
            height: 200px;
            border: 2px solid pink;
        }
    </style>
</head>
<body>
    <input type="button" value="创建元素" id="btn">
    <div id="div1"></div>
    <script src="H1.js"></script>
    <script>
        var kongfu = ["1","2","3","4","5","6","7","8"];
        //点击按钮动态的创建列表,把列表加到div中
        my$("btn").onclick = function () {
            //创建ul,把ul立刻加入到父级元素div中
            var ulObj = document.createElement("ul");
            my$("div1").appendChild(ulObj);
            // 动态的创建li，加到ul中
            for (var i=0;i<kongfu.length;i++){
                var liObj = document.createElement("li");
                //设置li中间的文字内容
                liObj.innerHTML = kongfu[i];
                ulObj.appendChild(liObj);
                //为li添加鼠标进入事件
                liObj.onmouseover = mouseover;
                //为li添加鼠标离开事件
                liObj.onmouseout = mouseout;
            }
        };
        //此位置.按钮的点击事件的外面
        function mouseover() {
            this.style.backgroundColor = "red";
        }
        function mouseout() {
            this.style.backgroundColor = "";
        }
    </script>
</body>
</html>
（6）动态案例创建表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div1{
            width: 200px;
            height: 200px;
            border: 2px solid pink;
        }
    </style>
</head>
<body>
    <input type="button" value="创建表格" id="btn">
    <div id="div1"></div>
    <script src="H1.js"></script>
    <script>
        var arr = [
            {name: "百度", href:"http://www.baidu.com"},
            {name: "京东", href:"http://www.jingdong.com"},
            {name: "淘宝", href:"http://www.taobao.com"},
            {name: "爱奇艺", href:"http://www.aiqiyi.com"},
            {name: "土豆", href:"http://www.tudou.com"}
        ];
        //点击按钮创建表格
        my$("btn").onclick = function () {
        //创建table加入到div中
            var tableObj = document.createElement("table");
            tableObj.border = "1";
            tableObj.cellPadding ="0";
            tableObj.cellSpacing = "0";
            my$("dv").appendChild(tableObj);
            //创建行,把行加入到table中
            for (var i=0;i<arr.length;i++){
                var dt = arr[i];
                var trObj = document.createElement("tr");
                tableObj.appendChild(trObj);
                //创建第一个列,然后加入到行中
                var td1 = document.createElement("td");
                td1.innerText = dt.name;
                trObj.appendChild(td1);
                //创建第二个列,然后加入到行中
                var td2 = document.createElement("td");
                td2.innerText = "<a href="+dt.href+">"+dt.name+"</a>";
                trObj.appendChild(td2);
            }
        }
    </script>
</body>
</html>
（7）只创建一个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div1{
            width: 200px;
            height: 200px;
            border: 2px solid pink;
        }
    </style>
</head>
<body>
    <input type="button" value="创建表格" id="btn">
    <div id="div1"></div>
    <script src="H1.js"></script>
    <script>
        //有则删除,无则创建
        //先判断有没有,有就删除,然后再创建
        my$("btn").onclick = function () {
            //判断,div中有没有这个按钮,有就删除
            //判断这个按钮的子元素是否存在
            if (my$("btn2")) {
                my$("div1").removeChild(my$("btn2"));
                iObj.value = "按钮";
                iObj.id = "btn2";
                my$("div1").appendChild(iObj);
            }
        };
        // 无则创建
        // my$("btn").onclick = function () {
        //     //判断,div中有没有这个按钮,有就删除
        //     //判断这个按钮的子元素是否存在
        //     if( !my$("btn2")){
        //         var iObj = document.createElement("input");
        //         iObj.type = "button";
        //         iObj.value = "按钮";
        //         iObj.id="btn2"
        //         my$("div1").appendChild(iObj);
        //     }
        // }
    </script>
</body>
</html>
（8）// 为任意元素绑定任意事件兼容代码
function addEvertListener(element,type,fn) {
    if (element.addEventListener){
        element.addEventListener(type,fn,false);
    } else if (element.attachEvent){
        element.attachEvent("on"+type,fn);
    } else{
        element["on"+type]=fn;
    }
}

_有光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM案例（4）

（1）封装节点兼容代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style type="text/css"&am
复制链接

扫一扫