JS-DOM ～ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制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="image/1.jpg" alt="" width="200px"/>
        <img src="image/2.jpg" alt="" width="200px"/>
        <img src="image/3.jpg" alt="" width="200px"/>
        <img src="image/4.jpg" alt="" width="200px"/>
        <img src="image/5.jpg" alt="" 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="image/1.jpg" alt="" width="200px"/>
29         <img src="image/2.jpg" alt="" width="200px"/>
30         <img src="image/3.jpg" alt="" width="200px"/>
31         <img src="image/4.jpg" alt="" width="200px"/>
32         <img src="image/5.jpg" alt="" 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              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="image/mm.png" alt="" 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>

 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>

 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 >我是参照标签</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              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              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              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              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              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              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              195px;
 98         }
 99     </style>
100 </head>
101 <body>
102 <!--纸条墙-->
103 <div >
104     <!--纸条-->
105     <div class="tip1"  >
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="image/bpic_1.gif" alt="" 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 = parseInt(Math.random()*400);//(取值是0-1，那么乘以400,取值就是0-400)
143         var leftValue = 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              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"  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"  multiple>
74 
75     </select>
76 </body>
77 </html>

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

设置样式的两种方式

style

dom元素的创建方法

相关推荐