继续JS之DOM对象二

前面在JS之DOM中我们知道了属性操作，下面我们来了解一下节点操作。很重要！！

一、节点操作

创建节点：var ele_a = document.createElement('a');
添加节点：ele_parent.appendChild(ele_img);
删除节点：ele_parent.removeChild(ele_p);
替换节点：ele_parent.replaceChild(新标签,旧标签);
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>节点操作</title>
  6     <style>
  7         .c1 {
  8             width: 300px;
  9             height: 200px;
 10             border: 1px solid red;
 11         }
 12     </style>
 13 </head>
 14 <body>
 15 <div class="c1">
 16     <p id="p1">年后</p>
 17     <p id="p2">hello</p>
 18 </div>
 19 <button class="addBtn">ADD</button>
 20 <button class="delBtn">DEL</button>
 21 <button class="replaceBtn">Replace</button>
 22 <ul>
 23     <li>创建节点：var ele_a = document.createElement('a');</li>
 24     <li>添加节点：ele_parent.appendChild(ele_img);</li>
 25     <li>删除节点：ele_parent.removeChild(ele_p);</li>
 26     <li>替换节点：ele_parent.replaceChild(新标签,旧标签);</li>
 27 </ul>
 28 <table border="1">
 29     <tbody id="t1">
 30         <tr>
 31             <td><input type="checkbox"></td>
 32             <td><input type="text"></td>
 33             <td><button class="delbtn">del1</button></td>
 34         </tr>
 35         <tr>
 36             <td><input type="checkbox"></td>
 37             <td><input type="text"></td>
 38             <td><button class="delbtn">del2</button></td>
 39         </tr>
 40         <tr>
 41             <td><input type="checkbox"></td>
 42             <td><input type="text"></td>
 43             <td><button class="delbtn">del3</button></td>
 44         </tr>
 45         <tr>
 46             <td><input type="checkbox"></td>
 47             <td><input type="text"></td>
 48             <td><button class="delbtn">del4</button></td>
 49         </tr>
 50     </tbody>
 51 </table>
 52 <script>
 53     var ele_add = document.getElementsByClassName('addBtn')[0];
 54     var ele_del = document.getElementsByClassName('delBtn')[0];
 55     var ele_repleace = document.getElementsByClassName('replaceBtn')[0];
 56     console.log(ele_add);
 57     //绑定的添加节点的事件
 58     ele_add.onclick = function () {
 59         //先创建一个标签
 60         var ele_a = document.createElement('a');
 61         console.log(ele_a); //<a></a>
 62         ele_a.innerHTML = '点击'; //<a>点击</a>
 63         ele_a.href = 'http://www.baidu.com'; //<a href='http://www.baidu.com'>点击</a>
 64         //先创建一个标签
 65         var ele_img = document.createElement('img');
 66         ele_img.src = '1.png';
 67         ele_img.width = 50;
 68         ele_img.height = 50;
 69         //找到父标签
 70         var ele_parent = document.getElementsByClassName('c1')[0];
 71         //然后添加
 72         ele_parent.appendChild(ele_a);
 73         ele_parent.appendChild(ele_img);
 74     };
 75     //绑定的删除节点的事件
 76     ele_del.onclick = function () {
 77         //先获取要删除的元素
 78         var ele_p = document.getElementById('p1');
 79         //获取它的父元素
 80         var ele_parent = document.getElementsByClassName('c1')[0];
 81         //然后删除（注意是父元素删除子元素）
 82         ele_parent.removeChild(ele_p)
 83     };
 84     //绑定的替换节点的事件
 85     ele_repleace.onclick = function () {
 86         //找被替换的标签（旧标签）
 87         var ele_p = document.getElementById('p2');
 88         //创建一个替换后的标签（新标签）
 89         var ele_img = document.createElement('img');
 90         ele_img.src = '2.png';
 91         ele_img.width = 100;
 92         ele_img.height = 50;
 93         //找到父节点
 94         var ele_parent = document.getElementsByClassName('c1')[0];
 95         //做替换（父节点替换子节点中的某一个节点）：相当于一次删除加一次添加
 96         ele_parent.replaceChild(ele_img, ele_p);
 97     }
 98 </script>
 99 <script>
100     //绑定删除节点的事件
101     var ele_dels = document.getElementsByClassName('delbtn');
102     for(var i=0;i<ele_dels.length;i++){
103         ele_dels[i].onclick = function () {
104             //获取删除的元素
105             var ele_tr = this.parentElement.parentElement;
106 //            console.log(ele_tr)
107             //找到父节点
108             var ele_tbody_parent =document.getElementById('t1');
109             //然后删除
110             ele_tbody_parent.removeChild(ele_tr)
111         }
112     }
113 </script>
114 </body>
115 </html>
具体的节点操作实例

事件类型

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。

onload         一张页面或一幅图像完成加载。

onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开

onselect       文本被选中。
onsubmit       确认按钮被点击。

二、onload事件

onload 属性开发中 只给 body元素加.这个属性的触发 标志着 页面内容被加载完成.应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.

什么时候加载完什么时候触发（如果你想把script放在body上面去，就用到onload事件了）

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>节点操作</title>
  6     <style>
  7         .c1 {
  8             width: 300px;
  9             height: 200px;
 10             border: 1px solid red;
 11         }
 12     </style>
 13     <script>
 14         //如果要把script写在body的上面就可以用onload事件
 15         //onload什么时候加载完什么时候触发这个事件
 16         window.onload = function () {
 17             var ele_add = document.getElementsByClassName('addBtn')[0];
 18             var ele_del = document.getElementsByClassName('delBtn')[0];
 19             var ele_repleace = document.getElementsByClassName('replaceBtn')[0];
 20             console.log(ele_add);
 21             //绑定的添加节点的事件
 22             ele_add.onclick = function () {
 23                 //先创建一个标签
 24                 var ele_a = document.createElement('a');
 25                 console.log(ele_a); //<a></a>
 26                 ele_a.innerHTML = '点击'; //<a>点击</a>
 27                 ele_a.href = 'http://www.baidu.com'; //<a href='http://www.baidu.com'>点击</a>
 28                 //先创建一个标签
 29                 var ele_img = document.createElement('img');
 30                 ele_img.src = '1.png';
 31                 ele_img.width = 50;
 32                 ele_img.height = 50;
 33                 //找到父标签
 34                 var ele_parent = document.getElementsByClassName('c1')[0];
 35                 //然后添加
 36                 ele_parent.appendChild(ele_a);
 37                 ele_parent.appendChild(ele_img);
 38             };
 39             //绑定的删除节点的事件
 40             ele_del.onclick = function () {
 41                 //先获取要删除的元素
 42                 var ele_p = document.getElementById('p1');
 43                 //获取它的父元素
 44                 var ele_parent = document.getElementsByClassName('c1')[0];
 45                 //然后删除（注意是父元素删除子元素）
 46                 ele_parent.removeChild(ele_p)
 47             };
 48             //绑定的替换节点的事件
 49             ele_repleace.onclick = function () {
 50                 //找被替换的标签（旧标签）
 51                 var ele_p = document.getElementById('p2');
 52                 //创建一个替换后的标签（新标签）
 53                 var ele_img = document.createElement('img');
 54                 ele_img.src = '2.png';
 55                 ele_img.width = 100;
 56                 ele_img.height = 50;
 57                 //找到父节点
 58                 var ele_parent = document.getElementsByClassName('c1')[0];
 59                 //做替换（父节点替换子节点中的某一个节点）：相当于一次删除加一次添加
 60                 ele_parent.replaceChild(ele_img, ele_p);
 61             };
 62             //表格绑定删除节点的事件
 63             var ele_dels = document.getElementsByClassName('delbtn');
 64             for (var i = 0; i < ele_dels.length; i++) {
 65                 ele_dels[i].onclick = function () {
 66                     //获取删除的元素
 67                     var ele_tr = this.parentElement.parentElement;
 68 //            console.log(ele_tr)
 69                     //找到父节点
 70                     var ele_tbody_parent = document.getElementById('t1');
 71                     //然后删除
 72                     ele_tbody_parent.removeChild(ele_tr)
 73                 }
 74             }
 75         }
 76     </script>
 77 </head>
 78 <body>
 79 <div class="c1">
 80     <p id="p1">年后</p>
 81     <p id="p2">hello</p>
 82 </div>
 83 <button class="addBtn">ADD</button>
 84 <button class="delBtn">DEL</button>
 85 <button class="replaceBtn">Replace</button>
 86 <ul>
 87     <li>创建节点：var ele_a = document.createElement('a');</li>
 88     <li>添加节点：ele_parent.appendChild(ele_img);</li>
 89     <li>删除节点：ele_parent.removeChild(ele_p);</li>
 90     <li>替换节点：ele_parent.replaceChild(新标签,旧标签);</li>
 91 </ul>
 92 <table border="1">
 93     <tbody id="t1">
 94     <tr>
 95         <td><input type="checkbox"></td>
 96         <td><input type="text"></td>
 97         <td>
 98             <button class="delbtn">del1</button>
 99         </td>
100     </tr>
101     <tr>
102         <td><input type="checkbox"></td>
103         <td><input type="text"></td>
104         <td>
105             <button class="delbtn">del2</button>
106         </td>
107     </tr>
108     <tr>
109         <td><input type="checkbox"></td>
110         <td><input type="text"></td>
111         <td>
112             <button class="delbtn">del3</button>
113         </td>
114     </tr>
115     <tr>
116         <td><input type="checkbox"></td>
117         <td><input type="text"></td>
118         <td>
119             <button class="delbtn">del4</button>
120         </td>
121     </tr>
122     </tbody>
123 </table>
124 </body>
125 </html>
onload事件(基于节点操作的修改)
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <script>
 8          /*
 9               window.onload=function(){
10                    var ele=document.getElementById("ppp");
11                    ele.onclick=function(){
12                    alert(123)
13                 };
14              };
15          
16          */
17 
18 
19 
20           function fun() {
21               var ele=document.getElementById("ppp");
22                ele.onclick=function(){
23                 alert(123)
24             };
25           }
26 
27     </script>
28 </head>
29 <body onload="fun()">
30 
31 <p id="ppp">hello p</p>
32 
33 </body>
34 </html>
onload示例二

三、onkeydown事件

Event 对象：Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode.

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <input type="text" class="test">
 9 <input type="text" id="t1"/>
10 <script>
11     //测试event对象
12     var ele = document.getElementsByClassName('test')[0];
13 //    event :每次触发事件时所有的状态信息
14 //    event.keyCode ：保存着所有的状态信息
15     ele.onkeydown =function (event) {
16 //        onkeydown按下键盘触发的事件
17         console.log(event);
18         console.log(event.keyCode);
19         if (event.keyCode==13){
20             //按回车就会弹出
21             alert(666)
22         }
23     }
24 </script>
25 <script type="text/javascript">
26     var ele=document.getElementById("t1");
27     ele.onkeydown=function(e){
28         e=e||window.event;
29         var keynum=e.keyCode;
30         var keychar=String.fromCharCode(keynum);
31 //        console.log(keynum); //每次键盘敲下的状态信息
32 //        console.log(keychar);  //输入的字符
33 //        alert(keynum);
34 //        alert(keychar)  //你键盘输入的字符
35     };
36 </script>
37 </body>
38 </html>
onkeydown事件

四、onsubmit事件

当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>onsubmit事件</title>
 6     <!--onsubmit事件:确定按钮被点击-->
 7     <!--在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.-->
 8     <!--提交按钮本身就有一个默认事件（你点击提交的时候就会把数据发过去）-->
 9 
10 </head>
11 <body>
12 <form action="" id="submit">
13     <p>姓名：<input type="text" class="name"></p>
14     <p>年龄：<input type="text" class="age"></p>
15     <input type="submit">
16 </form>
17 <input type="text" class="test">
18 <script>
19     var ele_form = document.getElementById('submit');
20     var ele_name = document.getElementsByClassName('name')[0];
21     var ele_age = document.getElementsByClassName('age')[0];
22     ele_form.onsubmit = function (event) {
23         var username = ele_name.value;
24         var age = ele_age.value;
25         alert(username);
26         alert(age);
27         if (username=='haiyan'){
28             //阻止默认事件的两种方式
29 //            方式一：
30 //            return false;
31 //            方式二
32 //            给函数给一个形参，这个形参写什么都行，一般我们写成event
33             event.preventDefault() //阻止默认事件（表单的提交）
34         }
35     }
36 </script>
37 <script>
38     //测试event对象
39     var ele = document.getElementsByClassName('test')[0];
40 //    event :每次触发事件时所有的状态信息
41 //    event.keyCode ：保存着所有的状态信息
42     ele.onkeydown =function (event) {
43 //        onkeydown按下键盘触发的事件
44         console.log(event);
45         console.log(event.keyCode);
46         if (event.keyCode==13){
47             //按回车就会弹出
48             alert(666)
49         }
50     }
51 </script>
52 </body>
53 </html>
onsubmit

五、事件传播

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>事件传播</title>
 6     <style>
 7         .box1 {
 8             width: 300px;
 9             height: 300px;
10             background-color: rebeccapurple;
11         }
12         .box2{
13             width: 150px;
14             height: 150px;
15             background-color: yellow;
16         }
17     </style>
18 </head>
19 <body>
20 <div class="box1">
21     <div class="box2"></div>
22 </div>
23 <script>
24     //因为盒子1是盒子2的父亲，所以当给父亲绑定一个事件，给儿子也绑定一个事件，就像
25 //    继承一样，儿子会继承父亲的事件，所以现在运行的时候如果点击盒子2，会把自己的是事件和
26 //    父亲的事件都执行了。所以如果只想让儿子执行自己的事件，那么就得阻止发生事件传播
27     var ele1 = document.getElementsByClassName('box1')[0];
28     var ele2 = document.getElementsByClassName('box2')[0];
29     ele1.onclick = function () {
30         alert(123)
31     };
32     ele2.onclick = function (event) {
33         alert(456);
34         console.log(event);
35         console.log(event.keyCode);
36         //    阻止事件传播的方式
37         event.stopPropagation();
38     };
39 
40 
41 </script>
42 </body>
43 </html>
事件传播

六、seach实例

模拟placeholder属性的功能
<input type="text" placeholder="username" id="submit">
placeholder和value的区别：
　　placeholder：只是一个提示功能，不传值。
　　value：是一个默认的值，如果你的输入框中不写数据的时候，它会把默认的数据发过去
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>模拟placeholder属性的功能</title>
 6 </head>
 7 <body>
 8 <input type="text" placeholder="username" id="submit">
 9 <input type="text" value="username" id="submit1">
10 <script>
11 //    var ele = document.getElementById('submit1');
12     var ele = document.getElementById('submit1');
13     ele.onfocus = function () {
14         //先获取焦点，点击输入框就获取到焦点，光标一上去就把值设成空
15         this.value=""
16     };
17     ele.onblur = function () {
18 //        当光标不点击那个输入框的时候就失去焦点了
19         //当失去焦点的时候，判断当前的那个值是不是为空，是否含有空格
20 //        如果为空或者有空格，用trim()去掉空格。然后赋值为username
21         if (this.value.trim()==""){
22             this.value='username'
23         }
24     }
25 </script>
26 </body>
27 </html>
seach示例

 七、onchange事件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>onchange事件</title>
 6 </head>
 7 <body>
 8 <select name="" id="s1">
 9     <option value="">甘肃省</option>
10     <option value="">安徽省</option>
11     <option value="">湖北省</option>
12 </select>
13 <script>
14     var ele = document.getElementById('s1');
15     //下拉菜单，和你当前事件不同的时候出发事件
16     ele.onchange= function () {
17         alert(123)
18     }
19 </script>
20 </body>
21 </html>
onchange

用onchange事件实现的二级联动

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>二级联动</title>
 6 </head>
 7 <body>
 8 <select name="" id="s1">
 9     <option value="">请选择省份</option>
10     <option value="gansu">甘肃省</option>
11     <option value="hebei">河北省</option>
12     <option value="henan">河南省</option>
13 </select>
14 <select name="" id="c1">
15     <option value="city">请选择城市</option>
16 </select>
17 <script>
18     var data = {'gansu':['兰州市','天水市','武威市'],'hebei':['保定','石家庄'],'henan':['郑州','开封']}
19     var ele_select = document.getElementById('s1');
20     var ele_critys = document.getElementById('c1');//父亲标签
21     ele_select.onchange  =function () {
22 //        alert(123)
23 //        console.log(this.value)
24         var ele_provice = this.value;
25         var citys = data[ele_provice];
26         console.log(citys);
27         //要在没有添加之间清空，不然你点一次添加一次，点一次添加一次
28         //方式一
29 //        ele_critys.children.length=1;  //不可行。。但是原理和方式二的一样
30         //方式二
31 //        ele_critys.options.length = 1; //留一个，一般多的是设成0了
32         for (var i =0;i<citys.length;i++) {
33             //创建一个option标签
34             var ele_option = document.createElement('option'); //<option></option>
35             ele_option.innerHTML = citys[i];  //得到有文本的option标签
36             ele_option.value = i + 1; //设置属性值
37             console.log(ele_option);
38             ele_critys.appendChild(ele_option);
39         }
40     }
41 </script>
42 
43 </body>
44 </html>
二级联动

八、onmouse事件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>onmouse事件</title>
 6     <style>
 7         .box{
 8             width: 300%;
 9             height: 200px;
10         }
11         .title{
12             background: steelblue;
13             line-height: 40px;
14         }
15         .con{
16             background: slategray;
17             line-height: 30px;
18         }
19         .hide{
20             display: none;
21         }
22     </style>
23 </head>
24 <body>
25 <div class="box">
26     <div class="title">onmouse</div>
27     <div class="con hide">
28         <div><a href="" class="item">你好吗？</a></div>
29         <div><a href="" class="item">我好啊</a></div>
30         <div><a href="" class="item">好就好呗</a></div>
31     </div>
32 </div>
33 <script>
34     var ele_title = document.getElementsByClassName('title')[0];
35     var ele_box = document.getElementsByClassName('box')[0];
36     //鼠标指上去的事件
37     ele_title.onmouseover = function () {
38         this.nextElementSibling.classList.remove('hide');
39     };
40     //鼠标移走的事件的两种方式
41 //    方式一（推荐）
42      ele_box.onmouseleave= function () {
43         ele_title.nextElementSibling.classList.add('hide');
44     };
45 //    方式二
46 //    ele_title.onmouseout = function () {
47 //       this.nextElementSibling.classList.add('hide');
48 //    }
49 //    方式一和方式二的区别：
50 //    不同点
51 //      onmouseout：不论鼠标指针离开被选元素还是任何子元素，都会触发onmouseout事件
52 //      onmouseleave：只有在鼠标指针离开被选元素时，才会触发onmouseleave事件
53 //    相同点：都是鼠标移走触发事件
54 </script>
55 </body>
56 </html>
onmouse

九、事件委派

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委派（委派给所有的子元素）</title>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<button class="addbtn">点我添加</button>
</body>
<script>
    var ele_btn = document.getElementsByClassName('addbtn')[0];
    var ele_ul = document.getElementsByTagName('ul')[0];
    var ele_li =document.getElementsByTagName('li');
    //绑定事件
    for (var i=0;i<ele_li.length;i++){
        ele_li[i].onclick = function () {
            alert(this.innerHTML)
        }
    }

    //事件委派
    ele_btn.onclick = function () {
        //创建一个li标签
        var ele_li = document.createElement('li');
//        ele_li.innerHTML= 444;
        ele_li.innerText = Math.round(Math.random()*1000);
        ele_ul.appendChild(ele_li);//吧创建的li标签添加到ul标签
        ele_ul.addEventListener('click',function (e) {
            console.log(e.target); //当前点击的标签
            console.log(e.target.tagName);//拿到标签的名字  LI
            if (e.target.tagName=='LI'){
                console.log('ok');
//                alert(ele_li.innerHTML)
            }
        })
    }
</script>
</html>

 

posted on 2017-10-10 17:39  海燕。  阅读(808)  评论(0)  编辑  收藏  举报