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>
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>
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>
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>
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>
节点属性
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>
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>
时间： 2024-10-18 04:07:49