JS-DOM ～ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

首页 > 代码库 > JS-DOM ～ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

JS-DOM ～ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

2024-09-11 02:36:33 218人阅读

带有Element和不带的区别

　　　　a) 带Element的获取的是元素节点

　　　　b) 不带可能获取文本节点和属性节点

获取所以子节点

　　　　a) . childNodes

　　　　b) . children

　　　　c) . parentNode . children [索引]

. children：获取所有子节点
opacity：0-1；透明度
alpha（opacity：百分数）；IE6/7/8透明度
先绑定事件再进行循环
previousNode（）上一个兄弟节点
alert（变量名）可测试变量名是否可以使用
获取body，var body = document.body；

设置样式的两种方式

style

行内式可以获取打印出来
内嵌和外链的获取不了
样式少的时候使用
驼峰命名规则
style属性是对象属性
值是字符串类型，没设置的时候是“空字符串”
.style. cssText = “字符串形式的样式”

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         #list li {
  8             list-style-type: none;
  9             width: 80px;
 10             height: 30px;
 11             line-height: 30px;
 12             background-color:beige;
 13             text-align: center;
 14             float: left;
 15             margin-left: 5px;
 16         }
 17 
 18         #list li.current {
 19             background-color: burlywood;
 20         }
 21 
 22         #list li a {#list li {
 23             list-style-type: none;
 24             width: 80px;
 25             height: 30px;
 26             line-height: 30px;
 27             background-color:beige;
 28             text-align: center;
 29             float: left;
 30             margin-left: 5px;
 31         }
 32 
 33         #list li.current {
 34             background-color: burlywood;
 35         }
 36 
 37         #list li a {
 38             text-decoration: none;
 39         }#list li {
 40             list-style-type: none;
 41             width: 80px;
 42             height: 30px;
 43             line-height: 30px;
 44             background-color:beige;
 45             text-align: center;
 46             float: left;
 47             margin-left: 5px;
 48         }
 49 
 50         #list li.current {
 51             background-color: burlywood;
 52         }
 53 
 54         #list li a {
 55             text-decoration: none;
 56         }#list li {
 57             list-style-type: none;
 58             width: 80px;
 59             height: 30px;
 60             line-height: 30px;
 61             background-color:beige;
 62             text-align: center;
 63             float: left;
 64             margin-left: 5px;
 65         }
 66 
 67         #list li.current {
 68             background-color: burlywood;
 69         }
 70 
 71         #list li a {
 72             text-decoration: none;
 73         }#list li {
 74             list-style-type: none;
 75             width: 80px;
 76             height: 30px;
 77             line-height: 30px;
 78             background-color:beige;
 79             text-align: center;
 80             float: left;
 81             margin-left: 5px;
 82         }
 83 
 84         #list li.current {
 85             background-color: burlywood;
 86         }
 87 
 88         #list li a {
 89             text-decoration: none;
 90         }
 91             text-decoration: none;
 92         }
 93     </style>
 94     <script src="http://www.mamicode.com/tools.js"></script>
 95     <script>
 96         window.onload = function () {
 97             //需求：点击a链接，让a链接对应的li标签添加类。
 98             //思路：点击a链接，让他的父亲添加类，其他的li标签类名清空。
 99             //步骤：
100             //1.获取事件源
101             //2.绑定事件
102             //3.书写事件驱动程序
103 
104 
105             //1.获取事件源
106             var ul = getEle("list");
107             var aArr = ul.getElementsByTagName("a");
108 
109             for(var i=0;i<aArr.length;i++){
110                 aArr[i].onclick = function () {
111                     //点击哪个a链接，让他的父亲添加类
112                     this.parentNode.className = "current";
113                     //设置他的父元素的其他所有兄弟节点类名为空
114                     var otherArr = getAllSiblings(this.parentNode);
115                     for(var j=0;j<otherArr.length;j++){
116                         otherArr[j].className = "";
117                     }
118                 }
119             }
120 
121 //            //1.获取事件源
122 //            var ul = getEle("list");
123 //            var liArr = ul.children;
124 //            //2.绑定事件
125 //            for(var i=0;i<liArr.length;i++){
126 //                var a = getFirstNode(liArr[i]);
127 //                a.onclick = function () {
128 //                    //3.书写事件驱动程序
129 //                    //排他思想
130 //                    for(var j=0;j<liArr.length;j++){
131 //                        liArr[j].className = "";
132 //                    }
133 //                    this.parentNode.className = "current";
134 //                }
135 //            }
136         }
137     </script>
138 </head>
139 <body>
140 
141     <div id="menu">
142         <ul id="list">
143             <li class="current"><a href="http://www.mamicode.com/#">首页</a></li>
144             <li><a href="javascript:void(0)">播客</a></li>
145             <li><a href="javascript:void(0)">博客</a></li>
146             <li><a href="javascript:void(0)">相册</a></li>
147             <li><a href="javascript:void(0)">关于</a></li>
148             <li><a href="javascript:void(0)">帮助</a></li>
149         </ul>
150     </div>
151 
152 </body>
153 </html>

菜单的简单练习

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         #list li {
  8             list-style-type: none;
  9             width: 80px;
 10             height: 30px;
 11             line-height: 30px;
 12             background-color:beige;
 13             text-align: center;
 14             float: left;
 15             margin-left: 5px;
 16         }
 17 
 18         #list li.current {
 19             background-color: burlywood;
 20         }
 21 
 22         #list li a {#list li {
 23             list-style-type: none;
 24             width: 80px;
 25             height: 30px;
 26             line-height: 30px;
 27             background-color:beige;
 28             text-align: center;
 29             float: left;
 30             margin-left: 5px;
 31         }
 32 
 33         #list li.current {
 34             background-color: burlywood;
 35         }
 36 
 37         #list li a {
 38             text-decoration: none;
 39         }#list li {
 40             list-style-type: none;
 41             width: 80px;
 42             height: 30px;
 43             line-height: 30px;
 44             background-color:beige;
 45             text-align: center;
 46             float: left;
 47             margin-left: 5px;
 48         }
 49 
 50         #list li.current {
 51             background-color: burlywood;
 52         }
 53 
 54         #list li a {
 55             text-decoration: none;
 56         }#list li {
 57             list-style-type: none;
 58             width: 80px;
 59             height: 30px;
 60             line-height: 30px;
 61             background-color:beige;
 62             text-align: center;
 63             float: left;
 64             margin-left: 5px;
 65         }
 66 
 67         #list li.current {
 68             background-color: burlywood;
 69         }
 70 
 71         #list li a {
 72             text-decoration: none;
 73         }#list li {
 74             list-style-type: none;
 75             width: 80px;
 76             height: 30px;
 77             line-height: 30px;
 78             background-color:beige;
 79             text-align: center;
 80             float: left;
 81             margin-left: 5px;
 82         }
 83 
 84         #list li.current {
 85             background-color: burlywood;
 86         }
 87 
 88         #list li a {
 89             text-decoration: none;
 90         }
 91             text-decoration: none;
 92         }
 93     </style>
 94     <script src="http://www.mamicode.com/tools.js"></script>
 95     <script>
 96         window.onload = function () {
 97             //需求：点击a链接，让a链接对应的li标签添加类。
 98             //思路：点击a链接，让他的父亲添加类，其他的li标签类名清空。
 99             //步骤：
100             //1.获取事件源
101             //2.绑定事件
102             //3.书写事件驱动程序
103 
104 
105             //1.获取事件源
106             var ul = getEle("list");
107             var aArr = ul.getElementsByTagName("a");
108 
109             for(var i=0;i<aArr.length;i++){
110                 aArr[i].onclick = function () {
111                     //点击哪个a链接，让他的父亲添加类
112                     this.parentNode.className = "current";
113                     //设置他的父元素的其他所有兄弟节点类名为空
114                     var otherArr = getAllSiblings(this.parentNode);
115                     for(var j=0;j<otherArr.length;j++){
116                         otherArr[j].className = "";
117                     }
118                 }
119             }
120 
121 //            //1.获取事件源
122 //            var ul = getEle("list");
123 //            var liArr = ul.children;
124 //            //2.绑定事件
125 //            for(var i=0;i<liArr.length;i++){
126 //                var a = getFirstNode(liArr[i]);
127 //                a.onclick = function () {
128 //                    //3.书写事件驱动程序
129 //                    //排他思想
130 //                    for(var j=0;j<liArr.length;j++){
131 //                        liArr[j].className = "";
132 //                    }
133 //                    this.parentNode.className = "current";
134 //                }
135 //            }
136         }
137     </script>
138 </head>
139 <body>
140 
141     <div id="menu">
142         <ul id="list">
143             <li class="current"><a href="http://www.mamicode.com/#">首页</a></li>
144             <li><a href="javascript:void(0)">播客</a></li>
145             <li><a href="javascript:void(0)">博客</a></li>
146             <li><a href="javascript:void(0)">相册</a></li>
147             <li><a href="javascript:void(0)">关于</a></li>
148             <li><a href="javascript:void(0)">帮助</a></li>
149         </ul>
150     </div>
151 
152 </body>
153 </html>

style属性的练习

 1 <body>
 2 <div style="width: 100px;height: 100px;background-color: pink;"></div>
 3 <script>
 4 
 5     var div = document.getElementsByTagName("div")[0];
 6     div.onmouseover = function () {
 7         div.style.width = "200px";
 8         div.style.height = "200px";
 9         div.style.backgroundColor = "black";
10         div.style.opacity = "0.2";
11         div.style.filter = "alpha(opacity=20)";
12     }
13 
14 </script>
15 
16 </body>

改变盒子的大小和透明度

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         input {
 8             display: block;
 9         }
10     </style>
11 </head>
12 <body>
13 <ul>
14     <input type="text"/>
15     <input type="text"/>
16     <input type="text"/>
17     <input type="text"/>
18     <input type="text"/>
19     <button>设置</button>
20 </ul>
21 <script>
22     //需求：点击设置按钮，让所有的input标签获取焦点后高亮显示
23     //步骤：
24     //1.获取事件源
25     //2.绑定事件
26     //3.书写事件驱动程序
27 
28     //1.获取事件源
29     var inpArr = document.getElementsByTagName("input");
30     var button = inpArr[inpArr.length-1].nextElementSibling || inpArr[inpArr.length-1].nextSibling ;
31     //2.绑定事件
32     button.onclick = function () {
33         //3.书写事件驱动程序
34         for(var i=0;i<inpArr.length;i++){
35             //当button按钮被点击以后，所有的input标签被绑定事件，onfocus事件
36             inpArr[i].onfocus = function () {
37                 this.style.border = "2px solid red";
38                 this.style.backgroundColor = "#ccc";
39             }
40             //绑定onblur事件，取消样式
41             inpArr[i].onblur = function () {
42                 this.style.border = "";
43                 this.style.backgroundColor = "";
44             }
45         }
46     }
47 
48 
49 
50 </script>
51 </body>
52 </html>

文本框获取焦点高亮显示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
            text-align: center;
        }

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

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

        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;
            cursor: pointer;
        }
        
        .current {
            background-color: red!important;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>课程</th>
                    <th>成绩</th>
                </tr>
            </thead>
            <tbody id="target">
                <tr>
                    <td>
                        1
                    </td>
                    <td>吕不韦</td>
                    <td>语文</td>
                    <td>100</td>

                </tr>
                <tr>
                    <td>
                        2
                    </td>
                    <td>吕布</td>
                    <td>日语</td>
                    <td>100</td>
                </tr>
                <tr>
                    <td>
                        3
                    </td>
                    <td>吕蒙</td>
                    <td>营销学</td>
                    <td>100</td>
                </tr>
                <tr>
                    <td>
                        4
                    </td>
                    <td>吕尚</td>
                    <td>数学</td>
                    <td>100</td>
                </tr>
                <tr>
                    <td>
                        5
                    </td>
                    <td>吕雉</td>
                    <td>英语</td>
                    <td>100</td>
                </tr>
                <tr>
                    <td>
                        6
                    </td>
                    <td>吕超</td>
                    <td>体育</td>
                    <td>100</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        //需求：让tr各行变色，鼠标放入tr中，高亮显示。

        //1.隔行变色。
        var tbody = document.getElementById("target");
        var trArr = tbody.children;
        //循环判断并各行赋值属性（背景色）
        for(var i=0;i<trArr.length;i++){
            if(i%2!==0){
                trArr[i].style.backgroundColor = "#a3a3a3";
            }else{
                trArr[i].style.backgroundColor = "#ccc";?
            }

            //鼠标进入高亮显示
            //难点：鼠标移开的时候要回复原始颜色。
            //计数器（进入tr之后，立刻记录颜色，然后移开的时候使用记录好的颜色）
            var color = "";
            trArr[i].onmouseover = function () {
                //赋值颜色之前，先记录颜色
                color = this.style.backgroundColor;
                this.style.backgroundColor = "#fff";
            }
            trArr[i].onmouseout = function () {
                this.style.backgroundColor = color;
            }
        }


    </script>


</body>
</html>

高级隔行变色

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            background: url(image/1.jpg) no-repeat;
        }
        .box {
            height: 165px;
            padding-top: 35px;
            text-align: center;
            background: rgba(255,255,255,0.3);
        }
        img {
            cursor: pointer;
            margin: 0 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="http://www.mamicode.com/image/1.jpg"  width="200px"/>
        <img src="http://www.mamicode.com/image/2.jpg"  width="200px"/>
        <img src="http://www.mamicode.com/image/3.jpg"  width="200px"/>
        <img src="http://www.mamicode.com/image/4.jpg"  width="200px"/>
        <img src="http://www.mamicode.com/image/5.jpg"  width="200px"/>
    </div>

    <script>
        //需求：点击图片，body的背景图修改。
        //步骤：
        //1.获取事件源
        //2.绑定事件
        //3.书写事件驱动程序

        //1.获取事件源
        var box = document.getElementsByTagName("div")[0];
        //body的获取js内部帮我们优化完毕
        var body = document.body;
        var imgArr = box.children;
        //2.绑定事件
        for(var i=0;i<imgArr.length;i++){
            imgArr[i].index = i;
            imgArr[i].onclick = function () {
                //3.书写事件驱动程序
                //改body的背景
//                body.style.backgroundImage = "url(image/"+(this.index+1)+".jpg)";
                body.style.backgroundImage = "url("+this.src+")";
            }
        }
    </script>

</body>
</html>

百度皮肤

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         * {
 8             padding: 0;
 9             margin: 0;
10         }
11         body {
12             background: url(image/1.jpg) no-repeat;
13         }
14         .box {
15             height: 165px;
16             padding-top: 35px;
17             text-align: center;
18             background: rgba(255,255,255,0.3);
19         }
20         img {
21             cursor: pointer;
22             margin: 0 10px;
23         }
24     </style>
25 </head>
26 <body>
27     <div class="box">
28         <img src="http://www.mamicode.com/image/1.jpg"  width="200px"/>
29         <img src="http://www.mamicode.com/image/2.jpg"  width="200px"/>
30         <img src="http://www.mamicode.com/image/3.jpg"  width="200px"/>
31         <img src="http://www.mamicode.com/image/4.jpg"  width="200px"/>
32         <img src="http://www.mamicode.com/image/5.jpg"  width="200px"/>
33     </div>
34 
35     <script>
36         //需求：点击图片，body的背景图修改。
37         //步骤：
38         //1.获取事件源
39         //2.绑定事件
40         //3.书写事件驱动程序
41 
42         //1.获取事件源
43         var box = document.getElementsByTagName("div")[0];
44         //body的获取js内部帮我们优化完毕
45         var body = document.body;
46         var imgArr = box.children;
47         //2.绑定事件
48         for(var i=0;i<imgArr.length;i++){
49             imgArr[i].index = i;
50             imgArr[i].onclick = function () {
51                 //3.书写事件驱动程序
52                 //改body的背景
53 //                body.style.backgroundImage = "url(image/"+(this.index+1)+".jpg)";
54                 body.style.backgroundImage = "url("+this.src+")";
55             }
56         }
57     </script>
58 
59 </body>
60 </html>

隐藏盒子的方式

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         div {
 8             margin-top: 20px;
 9             width: 200px;
10             height: 200px;
11             background-color: red;
12             position: absolute;
13             top: 100px;
14             left: 10px;
15             z-index: 1;
16         }
17         img {
18             position: absolute;
19             top: 100px;
20             left: 10px;
21         }
22     </style>
23 </head>
24 <body>
25     <button>进化吧，皮卡丘！！！</button>
26     <div></div>
27     <img src="http://www.mamicode.com/image/mm.png"  width="200px"/>
28 
29     <script>
30         //需求：点击按钮，让盒子和图片同事移开，并且，图片压住盒子.
31         var btn = document.getElementsByTagName("button")[0];
32         var div = document.getElementsByTagName("div")[0];
33         var img = document.getElementsByTagName("img")[0];
34 
35         //绑定事件
36         btn.onclick = function () {
37             div.style.top = "300px";
38             div.style.left = "300px";
39 
40             img.style.top = "300px";
41             img.style.left = "300px";
42             img.style.zIndex = "2";
43         }
44     </script>
45 
46 </body>
47 </html>

定位和层级

dom元素的创建方法

　　1.documrnt.write（“<li></li>”）

　　　　　　A) script写在那就创建在那

　　　　　　B) 会被覆盖

　　2.parentNode.innerHTML += “<li></li>”

　　3.已有节点.appendChild（创建的节点）；追加新节点到已有节点的最后面

　　4.已有节点.insertBefore（创建的节点，已有节点的子节点节点）；在已有节点的子节点之前创建一个新的节点

var ul = document.getElementsByTagName(‘ul‘)[0];                 //获取已有元素
var li = document.createElement(‘li‘);                         　　   //创建一个li标签
var liText = document.createTextNode(‘我是一个LI标签‘); //创建一个文本节点
li.appendChild(liText); //把文本节点追加到li标签中
var list = document.getElementsByTagName(‘li‘)[2]; //获取ul的一个子节点
ul.insertBefore(li,list);                                          //添加在list标签之前

　　5.删除 父节点.removeChild（要删除的子节点）；

A) var ul = document.getElementsByTagName(‘ul‘)[0]; //获取已有元素
var li = document.createElement(‘li‘); //创建一个li标签
var liText = document.createTextNode(‘我是一个LI标签‘); //创建一个文本节点
var list = document.getElementsByTagName(‘li‘)[2]; //获取ul的一个子节点
ul.removeChild(list); //删除ul里的list节点

list.parentNode.removeChild(list); //现照到list的父元素，在进行删除，可以不定义父元素

　　6.替换父节点.replaceChild（新节点，老节点）；

A) var ul = document.getElementsByTagName(‘ul‘)[0]; //创建一个文本节点
var li = document.createElement(‘li‘); //创建一个li标签
var liText = document.createTextNode(‘我是一个LI标签‘); //创建一个文本节点
li.appendChild(liText); //把文本节点追加到li标签中
var list = document.getElementsByTagName(‘li‘)[2]; //replaceChild 替换节点
ul.replaceChild(liText,list); //liText替换叼list

　　7.克隆 var 变量 = 被克隆的节点.cloneNode（true）；（如果true改为false，那么将克隆一个空节点）

var newNode = li.cloneNode(true); //克隆一个li节点给变量newNode

ul.appendChild (newNode); //将克隆的节点添加到ul之后

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <button>创建</button>
 9 <ul>
10     aaaaa
11 </ul>
12 <script>
13     //第一种创建方式：document.write();
14     document.write("<li>我是document.write创建的</li>");
15 
16     var btn = document.getElementsByTagName("button")[0];
17     var ul = document.getElementsByTagName("ul")[0];
18 //    btn.onclick = function () {
19 //        document.write("<li>我是document.write创建的</li>");
20 //    }
21 
22     //第二种：直接利用元素的innerHTNL方法。（innerText方法不识别标签）
23     ul.innerHTML += "<li id=‘li1‘>我是innerHTML创建的</li>";
24 
25 
26     //第三种：利用dom的api创建元素
27     var newLi = document.createElement("li");
28     newLi.innerHTML = "我是createElement创建的";
29 //    console.log(newLi);
30     //在父元素的最后面添加元素。
31 //    ul.appendChild(newLi);
32     //指定位置添加
33     var li1 = document.getElementById("li1");
34     ul.insertBefore(newLi,li1);
35 
36 
37 </script>
38 
39 
40 </body>
41 </html>

dom元素的创建

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <ul>
 9     <li id="li1">我是参照标签</li>
10 </ul>
11 
12 <script>
13     //document.write();不常用，因为容易覆盖原来的页面。
14     //innerHTML;用的比较多。绑定属性和内容比较方便。(节点套节点)
15     //document.createElement;也是比较多的，指定数量的时候一般用它。
16 
17     var ul = document.getElementsByTagName("ul")[0];
18     var li1 = document.getElementById("li1");
19 
20     //创建，添加，删除，替换
21     var li2 = document.createElement("li");
22     li2.innerText = "我是createElement创建的标签，用的是appendChild的方法添加的";
23     ul.appendChild(li2);
24     //用insertBefore添加
25     var li3 = document.createElement("li");
26     li3.innerText = "我是createElement创建的标签，用的是insertBefore的方法添加的"
27     //父节点.insertBefore(新节点，参照节点);
28     ul.insertBefore(li3,li1);
29 
30 
31     //删除，替换
32     ul.removeChild(li3);
33     //父节点.replaceChild(newNode,oldNode);
34     ul.replaceChild(li3,li2);
35 
36     //克隆node.cloneNode(true);深层复制。
37     for(var i=0;i<=3;i++){
38         var newLi = li3.cloneNode(true);
39         ul.appendChild(newLi);
40     }
41 
42 
43 </script>
44 </body>
45 </html>

元素的操作

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        li {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button>创建列表</button>
    <ul></ul>

    <script>
        //需求：点击列表，添加四大名人，然后鼠标放到谁上面，谁高亮显示。
        //思路：创建一个数组，添加内容。利用for循环穿件li标签在添加内容，高亮显示。
        //步骤：（指定多少个元素的创建最好用for循环）
        //老三步
        var btn = document.getElementsByTagName("button")[0];
        //获取相关元素并定义内容
        var arr = ["黑崎一护","乌尔奇奥拉","冰轮丸","名侦探柯南"];
        var ul = document.getElementsByTagName("ul")[0];
        btn.onclick = function () {
//            ul.innerHTML = "";
            for(var i=0;i<arr.length;i++){
                //创建li元素
                var newLi = document.createElement("li");
               newLi.innerHTML += "<li>"+arr[i]+"</li>";
                //添加到ul中
                ul.appendChild(newLi);
            }
            //获取所有的li标签然后，为他绑定事件，排他思想，高亮显示
            var liArr = ul.children;
            //为所有的li绑定事件
            for(var i=0;i<liArr.length;i++){
                liArr[i].onmouseover = function () {
                    //排他思想，高亮显示
                    for(var j=0;j<liArr.length;j++){
                        liArr[j].style.backgroundColor = "";
                    }
                    this.style.backgroundColor = "red";
                }
            }
        }


    </script>


</body>
</html>

创建列表，高亮显示

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         body {
  8             margin: 0 auto;
  9             padding: 0px;
 10             font-size: 12px;
 11             background: url(image/bg.gif) repeat center 36px;
 12             text-align: center;
 13             background-color: #c30230;
 14         }
 15         #content {
 16             margin: 0 auto;
 17             width: 960px;
 18             background: url(image/content_bg.jpg) no-repeat left top;
 19             height: 627px;
 20             position: relative;
 21         }
 22 
 23         #content .tip1, #content .tip2, #content .tip3, #content .tip4, #content .tip5, #content .tip6, #content .tip7, #content .tip8 {
 24             position: absolute;
 25             width: 227px;
 26             left: 200px;
 27             top: 100px;
 28         }
 29 
 30         #content .tip1 .tip_h {
 31             background: url(image/tip1_h.gif) no-repeat left top;
 32         }
 33 
 34         #content .tip1 .tip_h, #content .tip2 .tip_h, #content .tip3 .tip_h, #content .tip4 .tip_h, #content .tip5 .tip_h, #content .tip6 .tip_h, #content .tip7 .tip_h, #content .tip8 .tip_h {
 35             width: 227px;
 36             padding-top: 45px;
 37             height: 23px;
 38             text-align: left;
 39             cursor: move;
 40         }
 41         #content .tip1 .tip_c {
 42             background: url(image/tip1_c.gif) repeat-y;
 43         }
 44 
 45         #content .tip1 .tip_c, #content .tip2 .tip_c, #content .tip3 .tip_c, #content .tip4 .tip_c, #content .tip5 .tip_c, #content .tip6 .tip_c, #content .tip7 .tip_c, #content .tip8 .tip_c {
 46             width: 200px;
 47             padding-left: 12px;
 48             padding-right: 15px;
 49             min-height: 40px;
 50             text-align: left;
 51             line-height: 20px;
 52             max-height: 160px;
 53             word-wrap: break-word;
 54             word-break: break-all;
 55             overflow: hidden;
 56         }
 57 
 58         #content .tip1 .tip_f {
 59             background: url(image/tip1_f.gif) no-repeat left top;
 60         }
 61 
 62         #content .tip1 .tip_f, #content .tip2 .tip_f, #content .tip3 .tip_f, #content .tip4 .tip_f, #content .tip5 .tip_f, #content .tip6 .tip_f, #content .tip7 .tip_f, #content .tip8 .tip_f {
 63             width: 227px;
 64             height: 53px;
 65             padding-top: 20px;
 66         }
 67         #content .close, #content .close2 {
 68             float: left;
 69             font-size: 12px;
 70             cursor: pointer;
 71             color: #000000;
 72         }
 73         .clr {
 74             clear: both;
 75             overflow: auto;
 76             display: block;
 77             height: 0px;
 78         }
 79         #content .icon {
 80             float: left;
 81             width: 35px;
 82             padding-left: 15px;
 83             height: 35px;
 84             text-align: center;
 85         }
 86         #content .name {
 87             float: right;
 88             padding-right: 15px;
 89             text-align: right;
 90             font-size: 14px;
 91             line-height: 35px;
 92             color: #C0F;
 93         }
 94         #content .num {
 95             float: left;
 96             padding-left: 7px;
 97             width: 195px;
 98         }
 99     </style>
100 </head>
101 <body>
102 <!--纸条墙-->
103 <div id="content">
104     <!--纸条-->
105     <div class="tip1" id="tip" >
106         <div class="tip_h" title="双击关闭纸条">
107             <div class="num">第[49568]条 2016-07-7 22:51:52</div>
108             <div class="close" title="关闭纸条" >×</div>
109             <div class="clr"></div>
110         </div>
111         <div class="tip_c">
112             普天同庆，天下大同！
113         </div>
114         <div class="tip_f">
115             <div class="icon">
116                 <img src="http://www.mamicode.com/image/bpic_1.gif"  title="">
117             </div>
118             <div class="name">不愿意透露姓名的吕先生</div>
119             <div class="clr"></div>
120         </div>
121     </div>
122 </div>
123 
124 <script>
125     //需求：克隆盒子，然后随机位置，点击纸条的时候压住其他的纸条。
126     //思路：获取纸条，克隆，随机数值绑定到纸条上，添加到父盒子中，然后绑定事件层级最高。
127     //步骤：
128     //1.获取纸条，克隆
129     //2.随机数值绑定到纸条上
130     //3.添加到父盒子中
131     //4.然后绑定事件层级最高
132 
133     //0.创建多张纸条
134     for(var i=1;i<=10;i++){
135         //1.获取纸条，克隆
136         var tip = document.getElementById("tip");
137         var content = document.getElementById("content");
138         var newTip = tip.cloneNode(true);
139         //问题：id问题。
140         newTip.id = newTip.id+i;
141         //2.随机数值绑定到纸条上(top不要超过400，left不要超过700)
142         var topValue = http://www.mamicode.com/parseInt(Math.random()*400);//(取值是0-1，那么乘以400,取值就是0-400)
143         var leftValue = http://www.mamicode.com/parseInt(Math.random()*700);//小数取整
144         newTip.style.top = topValue+"px";
145         newTip.style.left = leftValue+"px";
146         //3.添加到父盒子中
147         content.appendChild(newTip);
148 
149         //4.然后绑定事件层级最高
150         newTip.onclick = fn;
151     }
152     //tip本身有问题，没有绑定事件。（1.删除。   2.在绑定一次）
153     tip.onclick = fn;
154 //    tip.parentNode.removeChild(tip);
155     //获取所有类名叫做的tip1标签，然后绑定事件。
156     var index = 1;
157     function fn() {
158         //计数器
159         this.style.zIndex = index;
160         index++;
161     }
162 
163      
164     // 点击关闭 隐藏盒子
165 
166     var close = document.getElementsByClassName("close");
167     for (i=0;i<close.length;i++) {
168         close[i].onclick = function () {
169             this.parentNode.parentNode.style.display = "none";
170         }
171     }
172 
173 </script>
174 
175 
176 
177 </body>
178 </html>

祝愿墙

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         select {
 8             width: 180px;
 9             height: 240px;
10             font-size: 16px;
11             background-color: #7dff51;
12         }
13     </style>
14     <script>
15         window.onload = function () {
16             //需求：点击>>>左边的所有选项全部进入右边，
17                  //点击<<<右边的所有选项全部进入左边。
18             //思路：获取所有的子元素，然后直接添加到另一侧。
19 
20             //获取相关元素
21             var sel1 = document.getElementById("sel1");
22             var sel2 = document.getElementById("sel2");
23             var btnArr = document.getElementsByTagName("button");
24 
25             //绑定事件
26             btnArr[0].onclick = function () {
27                 //获取左侧的select标签的所有子元素
28                 var arr = sel1.children;
29                 //遍历添加到右侧(随着左侧标签内元素的减少，数组的长度也会减少，那么)
30                 for(var i=arr.length-1;i>=0;i--){
31                     //push()是操作数组的。要往一个标签中添加元素，要用appendChild();
32                     //而往另外一个标签中添加元素原来的数组长度容易变化，为了防止跳出循环，我们使用反向遍历数组
33                     sel2.appendChild(arr[arr.length-1-i]);
34                 }
35             }
36 
37            btnArr[1].onclick = function () {
38                //获取左侧的select标签的所有子元素
39                var arr = sel2.children;
40                //遍历添加到右侧(随着左侧标签内元素的减少，数组的长度也会减少，那么)
41                for(var i=arr.length-1;i>=0;i--){
42                    //push()是操作数组的。要往一个标签中添加元素，要用appendChild();
43                    //而往另外一个标签中添加元素原来的数组长度容易变化，为了防止跳出循环，我们使用反向遍历数组
44                    sel1.appendChild(arr[arr.length-1-i]);
45                }
46            }
47 
48                btnArr[2].onclick = function () {
49                 var arr = sel1.children;
50                 sel2.appendChild(arr[arr.length-1]);
51             };
52             btnArr[3].onclick = function () {
53                 var arr = sel2.children;
54                 sel1.appendChild(arr[arr.length-1]);
55             }
56 
57 
58         }
59     </script>
60 </head>
61 <body>
62 <!--   multiple -->
63     <select name="" size="10" id="sel1" multiple>
64         <option value="">香蕉</option>
65         <option value="">苹果</option>
66         <option value="">鸭梨</option>
67         <option value="">葡萄</option>
68     </select>
69     <button>>>></button>
70     <button><<<</button>
71     <button>></button>
72     <button><</button>
73     <select name="" size="10" id="sel2" multiple>
74 
75     </select>
76 </body>
77 </html>

选择水果

JS-DOM ～ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > JS-DOM ～ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性