JavaScript: Advanced

浏览数：18 / 时间：2015年06月08日

DOM

1. 节点

技术分享

getElementsByName方法

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <script type="text/javascript">
 5 function getnum(){
 6   var mynode = document.getElementsByName("myt");  
 7   alert(mynode.length);
 8 }
 9 </script>
10 </head>
11 <body>
12 <input name="myt" type="text" value="1">
13 <input name="myt" type="text" value="2">
14 <input name="myt" type="text" value="3">
15 <input name="myt" type="text" value="4">
16 <input name="myt" type="text" value="5">
17 <input name="myt" type="text" value="6">
18 
19 <br />
20 <input type="button" onclick="getnum()" value="看看有几项？" />
21 </body>
22 </html>

View Code

getElementsByTagName方法

 1 <!DOCTYPE HTML>
 2 <html>  
 3 <head>  
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
 5 <title>JavaScript</title>  
 6 </head>  
 7 <body>  
 8     
 9         <form name="Input">
10             <table align="center" width="500px" height="50%" border="1">
11                 <tr>
12                     <td align="center" width="100px">
13                         学号:
14                     </td>
15                     <td align="center" width="300px">
16                         <input type="text" id=userid name="user" onblur="validate();">
17                         <div id=usermsg></div>
18                     </td>
19                 </tr>
20                 <tr>
21                     <td align="center" width="100px">
22                         姓名:
23                     </td>
24                         <td align="center">
25                         <input type="text" name="name">
26                     </td>
27                 </tr>
28                 <tr>
29                     <td align="center" width="%45">
30                         性别:
31                     </td>
32                     <td align="center">
33                         <input type="radio" name="sex" value="男">
34                         男
35                         <input type="radio" name="sex" value="女">
36                         女
37                     </td>
38                 </tr>
39                 <tr>
40                     <td align="center" width="30%">
41                         年龄:
42                     </td>
43                     <td align="center" width="300px">
44                         <input type="text" name="age">
45                     </td>
46                 </tr>
47                 <tr>
48                     <td align="center" width="100px">
49                         地址:
50                     </td>
51                     <td align="center" width="300px">
52                         <input type="text" name="addr">
53                     </td>
54                 </tr>
55 
56             </table>
57         </form>
58         <h1 id="myHead" onclick="getValue()">
59             看看三种获取节点的方法?
60         </h1>
61         <p>
62             点击标题弹出它的值。
63         </p>
64         <input type="button" onclick="getElements()"
65             value="看看name为sex的节点有几个?" />
66         <Br>
67         <input type="button" onclick="getTagElements()"
68             value="看看标签名为input的节点有几个?" />
69             
70      <script type="text/javascript">
71          function getValue()
72           {
73               var myH = document.getElementById("myHead");
74               alert(myH.innerHTML)
75           }
76           function getElements()
77           {
78              var myS = document.getElementsByName("sex");
79               alert(myS.length);
80           }
81 
82           function getTagElements()
83           {
84               var myI = document.getElementsByTagName("input");
85               alert(myI.length);
86           }
87          
88      </script>        
89 
90     </body>
91 </html>

View Code

 1 <!DOCTYPE HTML>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 5         <title>无标题文档</title>
 6     </head>
 7     
 8     <body>
 9         <form>
10           请选择你爱好:<br>
11           <input type="checkbox" name="hobby" id="hobby1">  音乐
12           <input type="checkbox" name="hobby" id="hobby2">  登山
13           <input type="checkbox" name="hobby" id="hobby3">  游泳
14           <input type="checkbox" name="hobby" id="hobby4">  阅读
15           <input type="checkbox" name="hobby" id="hobby5">  打球
16           <input type="checkbox" name="hobby" id="hobby6">  跑步 <br>
17           <input type="button" value = "全选" onclick = "checkall();">
18           <input type="button" value = "全不选" onclick = "clearall();">
19           <p>请输入您要选择爱好的序号，序号为1-6:</p>
20           <input id="wb" name="wb" type="text" >
21           <input name="ok" type="button" value="确定" onclick = "checkone();">
22         </form>
23         <script type="text/javascript">
24         function checkall(){
25             var hobby = document.getElementsByTagName("input");
26            
27           // 任务1 
28           for(var i = 0; i < hobby.length; i++) {
29               if (hobby[i].type == "checkbox") hobby[i].checked = true;
30           }
31            
32         }
33         function clearall(){
34             var hobby = document.getElementsByName("hobby");
35             
36          // 任务2
37          for (var i = 0; i < hobby.length; i++) {
38              if (hobby[i].type == "checkbox") hobby[i].checked = false;
39          }
40             
41         }
42         
43         function checkone(){
44             //var hobby = document.getElementsByName("hobby");
45             var j=document.getElementById("wb").value;
46             var m = document.getElementById("hobby"+j);
47             m.checked = true;
48             //hobby[parseInt(j)].checked = true;
49          // 任务3
50         
51         }
52         
53         </script>
54     </body>
55 </html>

View Code

getAttribute()方法

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>getAttribute()</title>
 6 </head>
 7 <body>   
 8 <p id="intro">课程列表</p>  
 9     <ul>  
10         <li title="第1个li">HTML</li>  
11         <li>CSS</li>  
12         <li title="第3个li">JavaScript</li>  
13         <li title="第4个li">Jquery</li>  
14         <li>Html5</li>  
15     </ul>  
16 <p>以下为获取的不为空的li标签title值:</p>
17 <script type="text/javascript">
18     var con=document.getElementsByTagName("li");
19     for (var i=0; i< con.length;i++){
20       var text = con[i].getAttribute("title");
21       if(text!=null)
22       {
23         document.write(text+"<br>");
24       }
25     } 
26  </script> 
27 </body>
28 </html>

View Code

setAttribute方法

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 </head>
 7 <body>
 8   <p id="intro">我的课程</p>  
 9   <ul>  
10     <li title="JS">JavaScript</li>  
11     <li title="JQ">JQuery</li>  
12     <li title="">HTML/CSS</li>  
13     <li title="JAVA">JAVA</li>  
14     <li title="">PHP</li>  
15   </ul>  
16   <h1>以下为li列表title的值,当title为空时，新设置值为"WEB前端技术":</h1>
17 <script type="text/javascript">
18   var Lists=document.getElementsByTagName("li");
19   for (var i=0; i<Lists.length;i++)
20   {
21     var text = Lists[i].getAttribute("title");
22     document.write(text +"<br>");
23     if(text=="")
24     {
25     Lists[i].setAttribute("title", "WEB前端技术");
26     document.write(Lists[i].getAttribute("title")+"<br>");
27     }
28   }
29 </script>
30 </body>
31 </html>

View Code

节点属性

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>节点属性</title>
 6 </head>
 7 <body>
 8   <ul>
 9      <li>javascript</li>
10      <li>HTML/CSS</li>
11      <li>jQuery</li>     
12   </ul>
13   <script type="text/javascript">
14     var text = document.getElementsByTagName("li");
15     for (var i = 0; i < text.length; i++) {
16         document.write(text[i].nodeName+"<br>");
17         document.write(text[i].nodeValue+"<br>");
18         document.write(text[i].nodeType+"<br>");
19     }
20   </script>
21 </body>
22 </html>

View Code

childNodes

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 </head>
 7 <body>
 8 <div>
 9   javascript  
10   <p>javascript</p>
11   <div>jQuery</div>
12   <h5>PHP</h5>
13 </div>
14 <script type="text/javascript">
15   var x = document.getElementsByTagName("div")[0].childNodes;
16   for (var i = 0; i < x.length; i++) {
17       document.write(x[i].nodeName+"<br>");
18       document.write(x[i].nodeValue+"<br>");
19       document.write(x[i].nodeType+"<br>");
20   }
21  
22  
23 </script>
24 </body>
25 </html>