zoukankan      html  css  js  c++  java

  • 06_节点_元素的创建_事件

    节点：

    节点及相关的概念：

     注：

    根元素是 html 标签.

    现在来了需求：获取div 中的每个标签，并设置每个标签的背景颜色！（这里如果使用之前的方式就很不方便，下面使用节点的方式）

    注：使用节点获取任意一个标签中的元素都是非常方便的。

    节点相关的属性：

    节点都有三个属性：

    一是：nodeType

    二是：nodeName 

    三是:  nodeValue .

    节点大致分三类：

    标签节点，文本节点，属性节点，如下图:

    节点的属性：可以使用标签节点 点出来，可以使用文本节点点出出来，可以使用属性节点点出来。

    获取相关的父级节点和父级元素：

    在页面中，只有标签才可以作为父级元素嵌套，属性和文本是不可以的。

    此时输出是相同的，

     1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6 
 7     </head>
 8     <body>
 9         <div>
10             <span>这是div 中的第一个span标签</span>
11             <p>这是div 中的第二个元素，第一个p标签</p>
12             <ul id="ulist">
13                 <li>乔峰</li>
14                 <li>鹿茸</li>
15                 <li id="three">段誉</li>
16                 <li>卡卡西</li>
17                 <li>发生纠纷</li>
18             </ul>
19         </div>
20         <script src="js/common.js"></script>
21         <script>
22             var ulObj =getId$("ulist");
23             //ul 标签的父级节点
24             console.log(ulObj.parentNode);
25             //ul 标签的父级元素
26             console.log(ulObj.parentElement);
27 
28 
29             console.log(ulObj.parentNode.nodeType);  //标签节点的type 1
30             console.log(ulObj.parentNode.nodeName);  //标签节点的name 大写的标签名
31             console.log(ulObj.parentNode.nodeValue); //标签节点的value 是null
32 
33         </script>
34     </body>
35 </html>
    标签节点的node,Type,Name,Value
     1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6 
 7     </head>
 8     <body>
 9         <div>
10             <span>这是div 中的第一个span标签</span>
11             <p>这是div 中的第二个元素，第一个p标签</p>
12             <ul id="ulist">
13                 <li>乔峰</li>
14                 <li>鹿茸</li>
15                 <li id="three">段誉</li>
16                 <li>卡卡西</li>
17                 <li>发生纠纷</li>
18             </ul>
19         </div>
20         <script src="js/common.js"></script>
21         <script>
22             var ulObj =getId$("ulist");
23             //ul 标签的父级节点
24             console.log(ulObj.parentNode);
25             //ul 标签的父级元素
26             console.log(ulObj.parentElement);
27 
28             console.log(ulObj.parentNode); //div
29             console.log(ulObj.parentNode.parentNode); //body
30             console.log((ulObj.parentNode).parentNode.parentNode); //html
31             console.log((ulObj.parentNode).parentNode.parentNode.parentNode); //document
32             console.log((ulObj.parentNode).parentNode.parentNode.parentNode.parentNode); //null  
33             
34 
35 
36         </script>
37     </body>
38 </html>
    父级节点的嵌套
     1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6 
 7     </head>
 8     <body>
 9         <div id="dv">
10             <span>这是div 中的第一个span标签</span>
11             <p>这是div 中的第二个元素，第一个p标签</p>
12             <ul id="ulist">
13                 <li>乔峰</li>
14                 <li>鹿茸</li>
15                 <li id="three">段誉</li>
16                 <li>卡卡西</li>
17                 <li>发生纠纷</li>
18             </ul>
19         </div>
20         <script src="js/common.js"></script>
21         <script>
22             //获取div 标签
23             var divObj = getId$("dv");
24             //子节点
25             console.log(divObj.childNodes);    //这时有 七个子节点 ，
26             //子元素（标签）
27             console.log(divObj.children);   //这是三个标签
28         </script>
29     </body>
30 </html>
    节点和标签的区别

    节点更详细：它包含了标签节点，属性节点，文本节点。

    标签只是看有几个标签。

    下面遍历每一个节点：

     1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6 
 7     </head>
 8     <body>
 9         <div id="dv">
10             <span>这是div 中的第一个span标签</span>
11             <p>这是div 中的第二个元素，第一个p标签</p>
12             <ul id="ulist">
13                 <li>乔峰</li>
14                 <li>鹿茸</li>
15                 <li id="three">段誉</li>
16                 <li>卡卡西</li>
17                 <li>发生纠纷</li>
18             </ul>
19         </div>
20         <script src="js/common.js"></script>
21         <script>
22             //获取div 标签
23             var divObj = getId$("dv");
24 
25             for (var i =0;i<divObj.childNodes.length;i++ ){
26                 var node =divObj.childNodes[i];
27                 console.log(node.nodeName+"===="+node.nodeType+"==="+node.nodeValue );
28             }
29         </script>
30     </body>
31 </html>
    View Code

    输出如下：

     1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6 
 7     </head>
 8     <body>
 9         <div id="dv">
10             <span>这是div 中的第一个span标签</span>
11             <p>这是div 中的第二个元素，第一个p标签</p>
12             <ul id="ulist">
13                 <li>乔峰</li>
14                 <li>鹿茸</li>
15                 <li id="three">段誉</li>
16                 <li>卡卡西</li>
17                 <li>发生纠纷</li>
18             </ul>
19         </div>
20         <script src="js/common.js"></script>
21         <script>
22             //获取div 标签
23             var divObj = getId$("dv");
24 
25             //使用getAttributeNode 获取节点，（它的参数是属性的名字）
26             var node =divObj.getAttributeNode("id");
27             console.log(node.nodeType+"==="+node.nodeName+"==="+node.nodeValue );
28 
29         </script>
30     </body>
31 </html>
    使用getAttributeNode("属性名字")获取属性节点

    获取节点：

    一般，父元素和父节点是相同的，

    子节点和子元素不同（子节点是多于子元素的）

     1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6 
 7     </head>
 8     <body>
 9         <div id="dv">
10             <span>这是div 中的第一个span标签</span>
11             <p>这是div 中的第二个元素，第一个p标签</p>
12             <ul id="ulist">
13                 <li>乔峰</li>
14                 <li>鹿茸</li>
15                 <li id="three">段誉</li>
16                 <li>卡卡西</li>
17                 <li>发生纠纷</li>
18             </ul>
19         </div>
20         <script src="js/common.js"></script>
21         <script>
22             //获取ul 标签
23             var ulObj = getId$("ulist");
24             //父元素
25             console.log(ulObj.parentElement);
26             //父节点
27             console.log(ulObj.parentNode);
28 
29             //获取div 标签
30             var divObj = getId$("dv");
31             //子元素
32             console.log(divObj.children);
33             //子节点
34             console.log(divObj.childNodes); 
35 
36 
37 
38         </script>
39     </body>
40 </html>
    父元素和父节点，子元素和子节点
     1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6 
 7     </head>
 8     <body>
 9         <div id="dv">哈哈
10             <span>这是div 中的第一个span标签</span>
11             <p>这是div 中的第二个元素，第一个p标签</p>
12             <ul id="ulist">
13                 <li>乔峰</li>
14                 <li>鹿茸</li>
15                 <li id="three">段誉</li>
16                 <li>卡卡西</li>
17                 <li>发生纠纷</li>
18             </ul>嘎嘎
19         </div>
20         <script src="js/common.js"></script>
21         <script>
22             //获取div 标签
23             var divObj = getId$("dv");
24             //第一个子元素
25             console.log(divObj.firstElementChild);
26             //第一个子节点
27             console.log(divObj.firstChild);
28 
29             //最后一个子元素
30             console.log(divObj.lastElementChild);
31             //最后一个子节点
32             console.log(divObj.lastChild);
33 
34         </script>
35     </body>
36 </html>
    第一个子元素，子节点和最后一个子元素，子节点
     1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6 
 7     </head>
 8     <body>
 9         <div id="dv">哈哈
10             <span>这是div 中的第一个span标签</span>
11             <p>这是div 中的第二个元素，第一个p标签</p>
12             <ul id="ulist">
13                 <li>乔峰</li>
14                 <li>鹿茸</li>嘿嘿
15                 <li id="three">段誉</li>嘻嘻
16                 <li>卡卡西</li>
17                 <li>发生纠纷</li>
18             </ul>嘎嘎
19         </div>
20         <script src="js/common.js"></script>
21         <script>
22             //获取id ="three"的标签
23             var liObj = getId$("three");
24             //某个元素的前一个兄弟元素
25             console.log(liObj.previousElementSibling);
26             //某个元素的前一个兄弟节点
27             console.log(liObj.previousSibling);
28 
29             //某个元素的后一个兄弟元素
30             console.log(liObj.nextElementSibling);
31             //某个元素的后一个兄弟节点
32             console.log(liObj.nextSibling);
33 
34         </script>
35     </body>
36 </html>
    某个元素的前一个元素，节点和后一个元素，节点

    IE8中的注意事项：

    案例：

    通过节点操作背景颜色：

     1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6         <style>
 7             div{
 8                 width:300px;
 9                 height: 500px;
10                 border: 1px solid red;
11             }
12         </style>
13 
14 
15     </head>
16     <body>
17         <input type="button" value="点我" id="btn"/>
18         <div id="dv">哈哈
19             <span>这是div 中的第一个span标签</span>
20             <p>这是div 中的第二个元素，第一个p标签</p>
21             <span>这是span</span>
22             <p>这时p</p>
23             <span>这是span</span>
24             <p>这是p</p>
25             <span>这时span</span>
26         </div>
27         <script src="js/common.js"></script>
28         <script>
29             getId$("btn").onclick = function () {
30                 //获取div 标签
31                 divObj = getId$("dv");
32                 //它的所有子节点
33                 nodes = divObj.childNodes;
34                 for (var i=0;i<nodes.length;i++ ){
35                     if(nodes[i].nodeType==1 && nodes[i].nodeName =="P"){  //1是标签 ， P 的意思是标签
36                         nodes[i].style.backgroundColor="red";
37                     }
38                 }
39             };
40 
41         </script>
42     </body>
43 </html>
    点击按钮使所有的p标签变红
     1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6         <style>
 7             div{
 8                 width:300px;
 9                 height: 500px;
10                 border: 1px solid red;
11             }
12         </style>
13 
14 
15     </head>
16     <body>
17         <input type="button" value="点我" id="btn"/>
18         <div id="dv">哈哈
19             <span>这是div 中的第一个span标签</span>
20             <p>这是div 中的第二个元素，第一个p标签</p>
21             <span>这是span</span>
22             <p>这时p</p>
23             <span>这是span</span>
24             <p>这是p</p>
25             <span>这时span</span>
26         </div>
27         <script src="js/common.js"></script>
28         <script>
29             getId$("btn").onclick = function () {
30                 //获取div 标签
31                 divObj = getId$("dv");
32                 //它的所有子节点
33                 nodes = divObj.childNodes;
34                 for (var i=0;i<nodes.length;i++ ){
35                     if(nodes[i].nodeType==1 && nodes[i].nodeName !="P"){  //1是标签 ， P 的意思是标签
36                         nodes[i].style.backgroundColor="red";
37                     }
38                 }
39             };
40 
41         </script>
42     </body>
43 </html>
    改动一点，使所有非p的标签变红

    节点操作实现隔行变色：

     1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6     </head>
 7     <body>
 8         <input type="button" value="点我" id="btn"/>
 9         <ul id="ulist">
10             <li>1</li>
11             <li>2</li>
12             <li>3</li>
13             <li>4</li>
14             <li>5</li>
15             <li>6</li>
16             <li>7</li>
17             <li>8</li>
18         </ul>
19         <script src="js/common.js"></script>
20         <script>
21             //li隔行变色
22             getId$("btn").onclick = function () {
23                 var count=0; //记录有多少个li标签
24                 var nodes = getId$("ulist").childNodes;
25                 for (var i=0;i<nodes.length;++i){
26                     if(nodes[i].nodeType==1&&nodes[i].nodeName=="LI"){
27                         nodes[i].style.backgroundColor= count%2==0?"red":"";
28                         count++;
29                     }
30                 }
31             };
32 
33         </script>
34     </body>
35 </html>
    View Code

    这里要注意的是：节点的个数是多于li的个数的。

    案例全选和全不选：

     1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6     </head>
 7     <body>
 8         <div class="wrap">
 9             <table>
10                 <thead>
11                     <tr>
12                         <th>
13                             <input type="checkbox" id="checkAll">
14                         </th>
15                         <th>菜名</th>
16                         <th>饭店</th>
17                     </tr>
18                 </thead>
19                 <tbody id="check_tb">
20                     <tr>
21                         <td>
22                             <input type="checkbox">
23                         </td>
24                         <td>红烧肉</td>
25                         <td>小龙虾</td>
26                     </tr>
27                     <tr>
28                         <td>
29                             <input type="checkbox">
30                         </td>
31                         <td>红烧肉</td>
32                         <td>小龙虾</td>
33                     </tr>
34                     <tr>
35                         <td>
36                             <input type="checkbox">
37                         </td>
38                         <td>红烧肉</td>
39                         <td>小龙虾</td>
40                     </tr>
41 
42                 </tbody>
43 
44             </table>
45 
46 
47         </div>
48         <script src="js/common.js"></script>
49         <script>
50             //获取全选的复选框
51             var ckAll = getId$("checkAll");
52 
53             //获取tbody中所有的小复选框
54             var cks = getId$("check_tb").getElementsByTagName("input");
55 
56             //给全选按钮注册事件
57             ckAll.onclick = function () {
58                 if(ckAll.checked){
59                     for (var i =0;i<cks.length;i++){
60                         cks[i].checked = true;
61                     }
62                 }else{
63                     for (var i =0;i<cks.length;i++){
64                         cks[i].checked = false;
65                     }
66                 }
67             };
68             //给 当所有按钮同时选中时 注册事件
69             for (var i =0;i<cks.length;i++  ){
70                 cks[i].onclick = function () {
71                     //每点击一个小按钮都去检测是否所有的都点击了
72                     var flag = 1;
73                     for (var i=0;i<cks.length;i++){
74                         if(cks[i].checked ==false){
75                             flag= 0;
76                         }
77                     }
78                     if(flag){
79                         ckAll.checked = true;
80                     }else{
81                         ckAll.checked = false;
82                     }
83                 };
84             }
85 
86         </script>
87     </body>
88 </html>
    初始版本
     1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6     </head>
 7     <body>
 8         <div class="wrap">
 9             <table>
10                 <thead>
11                     <tr>
12                         <th>
13                             <input type="checkbox" id="checkAll">
14                         </th>
15                         <th>菜名</th>
16                         <th>饭店</th>
17                     </tr>
18                 </thead>
19                 <tbody id="check_tb">
20                     <tr>
21                         <td>
22                             <input type="checkbox">
23                         </td>
24                         <td>红烧肉</td>
25                         <td>小龙虾</td>
26                     </tr>
27                     <tr>
28                         <td>
29                             <input type="checkbox">
30                         </td>
31                         <td>红烧肉</td>
32                         <td>小龙虾</td>
33                     </tr>
34                     <tr>
35                         <td>
36                             <input type="checkbox">
37                         </td>
38                         <td>红烧肉</td>
39                         <td>小龙虾</td>
40                     </tr>
41 
42                 </tbody>
43 
44             </table>
45 
46 
47         </div>
48         <script src="js/common.js"></script>
49         <script>
50             //获取全选的复选框
51             var ckAll = getId$("checkAll");
52 
53             //获取tbody中所有的小复选框
54             var cks = getId$("check_tb").getElementsByTagName("input");
55 
56             //给全选按钮注册事件
57             ckAll.onclick = function () {
58                 for (var i =0;i<cks.length;i++){
59                     cks[i].checked = this.checked;
60                 }
61             };
62             //给 当所有按钮同时选中时 注册事件
63             for (var i =0;i<cks.length;i++  ){
64                 cks[i].onclick = function () {
65                     //每点击一个小按钮都去检测是否所有的都点击了
66                     var flag = 1;
67                     for (var i=0;i<cks.length;i++){
68                         if(cks[i].checked ==false){
69                             flag= 0;
70                             break;
71                         }
72                     }
73                     ckAll.checked = flag;
74                 };
75             }
76 
77         </script>
78     </body>
79 </html>
    better version

    元素创建的三种方式：

    它的目的是为了提高用户的体验（当用户需要时候才将需求的东西呈现出来）。

    第一种元素创建的方式：

    注：页面加载的时候，用这种方式是可以的。

    第二种元素创建的方式：

     1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6         <style>
 7             #dv{
 8                 width: 300px;
 9                 height: 300px;
10                 border: 1px solid red;
11             }
12         </style>
13     </head>
14     <body>
15         <input type="button" value="点我" id="btn">
16         <div id="dv"></div>
17         <script src="js/common.js"></script>
18         <script>
19             getId$("btn").onclick = function () {
20                 //需求是：当点击按钮的时候在 div中  创建 p 标签
21                 getId$("dv").innerHTML = "<p>我是一个p</p>";
22             };
23 
24         </script>
25     </body>
26 </html>
    View Code

    小案例：动态创建列表：

     1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6         <style>
 7             #dv{
 8                 width: 300px;
 9                 height: 300px;
10                 border: 1px solid red;
11             }
12         </style>
13     </head>
14     <body>
15         <input type="button" value="创建列表" id="btn">
16         <div id="dv"></div>
17         <script src="js/common.js"></script>
18         <script>
19             //动态的在 div 中加入li
20             var names =["杨过","小龙女","乔峰","岳飞","Tom"];
21             getId$("btn").onclick = function () {
22                 var str = "<ul style='list-style: none;cursor: pointer;'>";
23                 for (var i=0 ;i<names.length;i++){
24                     str += "<li>"+names[i]+"</li>"
25                 }
26                 str +="</ul>";
27                 getId$("dv").innerHTML = str;
28 
29                 //此时，li已经有了
30                 //给所有的li 添加鼠标进入和 鼠标离开事件
31                 var lists = getId$("dv").getElementsByTagName("li");
32                 for (var i=0 ;i<lists.length;i++){
33                     lists[i].onmouseenter = function () {
34                         this.style.backgroundColor="yellow";
35                     };
36                     lists[i].onmouseleave = function () {
37                         this.style.backgroundColor="";
38                     };
39                 }
40             };
41         </script>
42     </body>
43 </html>
    View Code

    第三种元素创建的方式：

     1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6         <style>
 7             #dv{
 8                 width: 300px;
 9                 height: 300px;
10                 border: 1px solid red;
11             }
12         </style>
13     </head>
14     <body>
15         <input type="button" value="添加个p标签" id="btn">
16         <div id="dv"></div>
17         <script src="js/common.js"></script>
18         <script>
19             getId$("btn").onclick = function () {
20                 //1, 创建元素
21                 var pObj = document.createElement("p");
22 
23                 pObj.innerText = "这是一个p";
24 
25                 //2，将元素追加到 父级元素中去
26                 getId$("dv").appendChild(pObj);
27             };
28         </script>
29     </body>
30 </html>
    View Code

    案例：动态创建列表（使用第三种方式）

     1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6         <style>
 7             li{
 8                 list-style: none;
 9                 cursor: pointer;
10             }
11             #dv{
12                 width: 300px;
13                 height: 300px;
14                 border: 1px solid red;
15             }
16         </style>
17     </head>
18     <body>
19         <input type="button" value="创建列表" id="btn">
20         <div id="dv"></div>
21         <script src="js/common.js"></script>
22         <script>
23             //使用第三种方式 document.createElement()的方式 动态的在 div 中加入li
24             var names =["杨过","小龙女","乔峰","岳飞","Tom"];
25             getId$("btn").onclick = function () {
26                 //先创建ul
27                 var ulObj = document.createElement("ul");
28                 getId$("dv").appendChild(ulObj);
29 
30                 //动态创建li  然后加入到ul 中
31                 for (var i=0 ; i<names.length;i++){
32                     var li = document.createElement("li");
33                     li.innerText = names[i];
34                     ulObj.appendChild(li);
35 
36                     //为li  添加鼠标进入和离开事件
37                     li.onmouseenter =function () {  //此时是匿名函数
38                         this.style.backgroundColor = "yellow";
39                     };
40                     li.onmouseleave =function () {
41                         this.style.backgroundColor = "";
42                     };
43                 }
44             };
45         </script>
46     </body>
47 </html>
    View Code

    注：这里面给li 添加事件的时候用的函数，使用的是匿名函数。

    此时是浪费空间的：

    所以可以使用有名函数代替：

    如下：

     1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6         <style>
 7             li{
 8                 list-style: none;
 9                 cursor: pointer;
10             }
11             #dv{
12                 width: 300px;
13                 height: 300px;
14                 border: 1px solid red;
15             }
16         </style>
17     </head>
18     <body>
19         <input type="button" value="创建列表" id="btn">
20         <div id="dv"></div>
21         <script src="js/common.js"></script>
22         <script>
23             //使用第三种方式 document.createElement()的方式 动态的在 div 中加入li
24             var names =["杨过","小龙女","乔峰","岳飞","Tom"];
25             getId$("btn").onclick = function () {
26                 //先创建ul
27                 var ulObj = document.createElement("ul");
28                 getId$("dv").appendChild(ulObj);
29 
30                 //动态创建li  然后加入到ul 中
31                 for (var i=0 ; i<names.length;i++){
32                     var li = document.createElement("li");
33                     li.innerText = names[i];
34                     ulObj.appendChild(li);
35 
36                     //为li  添加鼠标进入和离开事件
37                     li.onmouseenter =mouseenterHandler;
38                     li.onmouseleave =mouseleaveHandler;
39                 }
40             };
41             function mouseenterHandler() {
42                 this.style.backgroundColor = "yellow";
43             }
44             function mouseleaveHandler() {
45                 this.style.backgroundColor = "";
46             }
47             
48         </script>
49     </body>
50 </html>
    better version

    使用有名函数就可以节省内存。

    小结：

    案例动态创建表格：

     1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6         <style>
 7             li{
 8                 list-style: none;
 9                 cursor: pointer;
10             }
11             #dv{
12                 width: 300px;
13                 height: 300px;
14                 border: 1px solid red;
15             }
16         </style>
17     </head>
18     <body>
19         <input type="button" value="创建表格" id="btn">
20         <div id="dv"></div>
21         <script src="js/common.js"></script>
22         <script>
23             //数据
24             arr = [
25                 {name:"百度",href:"https://www.baidu.com"},
26                 {name:"优酷",href:"https://www.youku.com"},
27                 {name:"新浪",href:"https://www.sina.com"},
28                 {name:"土豆",href:"https://www.tudou.com"},
29             ];
30             getId$("btn").onclick = function () {
31                 //创建 table
32                 var tableObj= document.createElement("table");
33                 getId$("dv").appendChild(tableObj);
34 
35                 //循环创建行，
36                 for (var i=0;i<arr.length;i++ ){
37                     var trObj = document.createElement("tr");
38                     tableObj.appendChild(trObj);
39 
40                     //创建行中的第一列
41                     var td1 = document.createElement("td");
42                     td1.innerText = arr[i].name;
43                     trObj.appendChild(td1);
44 
45                     //创建行中的第二列
46                     var td2 = document.createElement("td");
47                     td2.innerHTML = "<a href="+arr[i].href+">"+arr[i].name+"</a>" ;
48                     trObj.appendChild(td2);
49 
50                 }
51             };
52         </script>
53     </body>
54 </html>
    View Code
     1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6         <style>
 7             li{
 8                 list-style: none;
 9                 cursor: pointer;
10             }
11             #dv{
12                 width: 300px;
13                 height: 300px;
14                 border: 1px solid red;
15             }
16         </style>
17     </head>
18     <body>
19         <input type="button" value="创建表格" id="btn">
20         <div id="dv"></div>
21         <script src="js/common.js"></script>
22         <script>
23             //数据
24             arr = [
25                 {name:"百度",href:"https://www.baidu.com"},
26                 {name:"优酷",href:"https://www.youku.com"},
27                 {name:"新浪",href:"https://www.sina.com"},
28                 {name:"土豆",href:"https://www.tudou.com"},
29             ];
30             getId$("btn").onclick = function () {
31                 //创建 table
32                 var tableObj= document.createElement("table");
33                 tableObj.border="1";
34                 tableObj.cellPadding = "0";
35                 tableObj.cellSpacing = "0";
36 
37                 getId$("dv").appendChild(tableObj);
38 
39                 //循环创建行，
40                 for (var i=0;i<arr.length;i++ ){
41                     var trObj = document.createElement("tr");
42                     tableObj.appendChild(trObj);
43 
44                     //创建行中的第一列
45                     var td1 = document.createElement("td");
46                     td1.innerText = arr[i].name;
47                     trObj.appendChild(td1);
48 
49                     //创建行中的第二列
50                     var td2 = document.createElement("td");
51                     td2.innerHTML = "<a href="+arr[i].href+">"+arr[i].name+"</a>" ;
52                     trObj.appendChild(td2);
53 
54                 }
55             };
56         </script>
57     </body>
58 </html>
    View Code

    元素相关的操作的方法：

    动态的创建按钮（以追加的方式）：appendChild()

     1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6         <style>
 7             li{
 8                 list-style: none;
 9                 cursor: pointer;
10             }
11             #dv{
12                 width: 300px;
13                 height: 300px;
14                 border: 1px solid red;
15             }
16         </style>
17     </head>
18     <body>
19         <input type="button" value="显示效果" id="btn">
20         <div id="dv"></div>
21         <script src="js/common.js"></script>
22         <script>
23             var i=0;
24             getId$("btn").onclick = function () {
25                 var btnObj =document.createElement("input");
26                 btnObj.type = "button";
27                 btnObj.value = "按钮"+i;
28                 getId$("dv").appendChild(btnObj);
29                 i++;
30             };
31         </script>
32     </body>
33 </html>
    View Code

    动态的创建按钮（插入到指定元素的前面的方式）：insertBefore()

     1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6         <style>
 7             li{
 8                 list-style: none;
 9                 cursor: pointer;
10             }
11             #dv{
12                 width: 300px;
13                 height: 300px;
14                 border: 1px solid red;
15             }
16         </style>
17     </head>
18     <body>
19         <input type="button" value="显示效果" id="btn">
20         <div id="dv"></div>
21         <script src="js/common.js"></script>
22         <script>
23             var i=0;
24             getId$("btn").onclick = function () {
25                 var btnObj =document.createElement("input");
26                 btnObj.type = "button";
27                 btnObj.value = "按钮"+i;
28                 getId$("dv").insertBefore(btnObj,getId$("dv").firstElementChild);
29                 i++;
30             };
31         </script>
32     </body>
33 </html>
    View Code

    替换指定的元素：replaceChild()

    删除指定的元素：removeChild():

     1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6         <style>
 7             li{
 8                 list-style: none;
 9                 cursor: pointer;
10             }
11             #dv{
12                 width: 300px;
13                 height: 300px;
14                 border: 1px solid red;
15             }
16         </style>
17     </head>
18     <body>
19         <input type="button" value="显示效果" id="btn">
20         <input type="button" value="移除第一个" id="btn2">
21         <div id="dv"></div>
22         <script src="js/common.js"></script>
23         <script>
24             var i=0;
25             getId$("btn").onclick = function () {
26                 var btnObj =document.createElement("input");
27                 btnObj.type = "button";
28                 btnObj.value = "按钮"+i;
29 
30                 getId$("dv").insertBefore(btnObj,getId$("dv").firstElementChild);
31                 i++;
32             };
33             getId$("btn2").onclick = function () {
34                 getId$("dv").removeChild(getId$("dv").firstElementChild);
35             };
36         </script>
37     </body>
38 </html>
    View Code

    删除所有的元素：

     1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6         <style>
 7             li{
 8                 list-style: none;
 9                 cursor: pointer;
10             }
11             #dv{
12                 width: 300px;
13                 height: 300px;
14                 border: 1px solid red;
15             }
16         </style>
17     </head>
18     <body>
19         <input type="button" value="显示效果" id="btn">
20         <input type="button" value="移除第一个" id="btn2">
21         <input type="button" value="移除所有的" id="btn3">
22         <div id="dv"></div>
23         <script src="js/common.js"></script>
24         <script>
25             var i=0;
26             getId$("btn").onclick = function () {
27                 var btnObj =document.createElement("input");
28                 btnObj.type = "button";
29                 btnObj.value = "按钮"+i;
30 
31                 getId$("dv").insertBefore(btnObj,getId$("dv").firstElementChild);
32                 i++;
33             };
34             getId$("btn2").onclick = function () {
35                 getId$("dv").removeChild(getId$("dv").firstElementChild);
36             };
37             getId$("btn3").onclick = function () {
38                 while (getId$("dv").firstElementChild){
39                     getId$("dv").removeChild(getId$("dv").firstElementChild);
40                 }
41             };
42         </script>
43     </body>
44 </html>
    View Code

    为元素绑定多个事件：

    这里要用到一个函数addEventListener()  具体如下：

    它的事件类型中是没有on 的。

     1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6         <style>
 7             li{
 8                 list-style: none;
 9                 cursor: pointer;
10             }
11             #dv{
12                 width: 300px;
13                 height: 300px;
14                 border: 1px solid red;
15             }
16         </style>
17     </head>
18     <body>
19         <input type="button" value="显示效果" id="btn">
20         <div id="dv"></div>
21         <script src="js/common.js"></script>
22         <script>
23 
24             //参数1 ：事件的类型
25             //参数2 ：事件处理函数  (有名/匿名均可)
26             //参数3 ：布尔类型，暂时先写false
27             //addEventListener()
28 
29             //给btn 添加多个事件。。。
30             getId$("btn").addEventListener("click",
31                 function () {
32                     console.log("hahahhaha");
33                 },false);
34             getId$("btn").addEventListener("click",
35                 function () {
36                     console.log("我去");
37                 },false);
38             getId$("btn").addEventListener("click",
39                 function () {
40                     console.log("Hello World");
41                 },false);
42         </script>
43     </body>
44 </html>
    View Code

    注意：这种方式（使用addEventListener()  ）在IE８　中不能使用。

    注：IE8支持的是attachEvent() 它的事件类型是带有on 的。

    为任意元素绑定任意类型的事件：

    事件要注意三个：一个是对象，二是事件类型，三是事件处理函数。

     1 <!DOCTYPE>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>这是网页标题</title>
 6     </head>
 7     <body>
 8         <input type="button" value="显示效果" id="btn">
 9         <script src="js/common.js"></script>
10         <script>
11             // 为任意元素 绑定事件的兼容代码
12             function addEvent(ele, type, fn) {
13                 //判断浏览器是否支持 方法
14                 if(ele.addEventListener){  //看 ele是否有这个方法addEventListener()
15                     ele.addEventListener(type,fn,false);//ele.addEventListener("onclick",fn,false)
16                 }else if(ele.attachEvent){
17                     ele.attachEvent("on"+type,fn);  //ele.attachEvent("onclick",fn)
18                 }else{//如果上述两种方法都不支持的话，就用下面的方法
19                     ele["on"+type] = fn;  //ele.onclick = function(){};  ###重点###
20                 }
21             }
22 
23             //使用上面我们自定义的函数 addEvent()
24             addEvent(getId$("btn"),"click",function () {
25                 console.log("hahaha0");
26             });
27             addEvent(getId$("btn"),"click",function () {
28                 console.log("hahaha1");
29             });
30             addEvent(getId$("btn"),"click",function () {
31                 console.log("hahaha2");
32             });
33         </script>
34     </body>
35 </html>
    View Code
  • 相关阅读:
    java 字符串大小比较
    安卓应用如何赚钱
    报错找不到jquery-1.10.2.min.map解决办法
    android 中 webview 怎么用 localStorage?
    HTML5 本地存储
    js获取url参数值
    java调用webservice
    点圆的关系---1
    数学建模入门书籍介绍
    北京秋日风景-最大的银杏林海景色
  • 原文地址：https://www.cnblogs.com/zach0812/p/11674579.html
Copyright © 2011-2022 走看看