1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4 <title>Untitled Document</title>
5
6 <script type="text/javascript">
7 //1. 节点的类型: 元素节点、属性节点、文本节点
8 //通常情况下, 操作属性节点直接通过 "元素节点.属性名" 的方式来读写属性值
9 //而不是获取属性节点.
10
11 //2. 写 JS 代码的位置
12 //2.1 具体位置在哪
13 //2.2 window.onload 事件被触发的时间,
14 //以及如何为该事件赋值一个相应函数
15
16 //3. 获取获取元素节点
17 //3.1 根据 id 获取
18 //3.2 根据 标签名 获取: 该方法并非 document 对象所独有, 任何元素节点
19 //都可以调用该方法, 以获取指定的子节点.
20 //3.3 根据 name 属性名来获取: 若 HTML 元素本身没有 name 属性,
21 //我们硬添加一个 name 属性, 使用 getElementsByName(name)
22 //对于 ie 是不好用的。
23
24 //4. 获取子节点
25 //4.1 childNodes 属性: 获取指定元素的所有子节点, 但不怎么常用.
26 //4.2 firstChild、lastChild 属性: 获取元素节点的文本节点(如果一个元素
27 // 节点只有一个文本子节点).
28 //4.3 使用元素节点的 getElementsByTagName("方法");
29
30 //5. 读写文本节点:
31 //5.1 文本节点一定是元素节点的子节点
32 //5.2 步骤: 获取文本节点所在的元素节点 -> 利用 firstChild 获取文本节点
33 // -> 利用节点的 nodeValue 属性来读写文本值.
34
35 //6. 节点的属性: 所有节点都有的属性(按元素节点, 属性节点, 文本节点来说明)
36 //6.1 nodeType: 1, 2, 3 只读属性
37 //6.2 nodeName: 返回对应的节点的名字 只读属性
38 //6.3 nodeValue: null, 属性值, 文本值 可读写的属性.
39
40 //7. 属性节点:
41 //7.1 一般情况下不单独获取属性节点,
42 //而是通过 元素节点.属性名 的方式来读写属性值
43
44 window.onload = function(){
45 //弹出对话框.
46 //alert("helloworld");
47
48 //var bjNode = document.getElementById("bj");
49 //alert(bjNode);
50
51 //var liNodes = document.getElementsByTagName("li");
52 //alert(liNodes.length);
53
54 //var genderNodes = document.getElementsByName("gender");
55 //alert(genderNodes.length);
56
57 //var bjNodes = document.getElementsByName("BeiJing");
58 //alert(bjNodes.length);
59
60 // var cityNode = document.getElementById("city");
61 //var cityLiNodes = cityNode.getElementsByTagName("li");
62 //alert(cityLiNodes.length);
63
64 // var liChildren = cityNode.childNodes;
65 // alert(liChildren.length);
66 //
67 // var cityFirstChild = cityNode.firstChild;
68 // alert(cityFirstChild);
69
70 var bjNode = document.getElementById("bj");
71 alert(bjNode.firstChild.nodeValue);
72 bjNode.firstChild.nodeValue = "尚硅谷";
73
74 // var nameNode = document.getElementsByName("username")[0];
75 // alert(nameNode.value);
76 // nameNode.value = "尚硅谷";
77 }
78
79 </script>
80
81 </head>
82 <body>
83 <p>你喜欢哪个城市?</p>
84 <ul id="city">
85 <li id="bj" name="BeiJing">北京</li>
86 <li>上海</li>
87 <li>东京</li>
88 <li>首尔</li>
89 </ul>
90
91 <br><br>
92 <p>你喜欢哪款单机游戏?</p>
93 <ul id="game">
94 <li id="rl">红警</li>
95 <li>实况</li>
96 <li>极品飞车</li>
97 <li>魔兽</li>
98 </ul>
99
100 <br><br>
101 gender:
102 <input type="radio" name="gender" value="male"/>Male
103 <input type="radio" name="gender" value="female"/>Female
104
105 <br><br>
106 name: <input type="text" name="username" value="atguigu"/>
107
108 </body>
109 </html>
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4 <title>Insert title here</title>
5 <script type="text/javascript">
6
7 //需求: 点击 submit 按钮时, 检查是否选择 type, 若没有选择给出提示: "请选择类型";
8 // 检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: "请输入内容";
9 //若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点
10
11 //需求2: 使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值.
12
13 window.onload = function(){
14
15 function showContent(liNode){
16 alert("^_^#" + liNode.firstChild.nodeValue);
17 }
18
19 var liNodes = document.getElementsByTagName("li");
20 for(var i = 0; i < liNodes.length; i++){
21 liNodes[i].onclick = function(){
22 showContent(this);
23 }
24 }
25
26 //1. 获取 #submit 对应的按钮 submitBtn
27 var submit = document.getElementById("submit");
28
29 //2. 为 submitBtn 添加 onclick 响应函数
30 submit.onclick = function(){
31
32 //4. 检查是否选择 type, 若没有选择给出提示: "请选择类型"
33 //4.1 选择所有的 name="type" 的节点 types
34 var types = document.getElementsByName("type");
35
36 //4.2 遍历 types, 检查其是否有一个 type 的 checked 属性存在, 就可说明
37 //有一个 type 被选中了: 通过 if(元素节点.属性名) 来判断某一个元素节点是否有
38 //该属性.
39 var typeVal = null;
40 for(var i = 0; i < types.length; i++){
41 if(types[i].checked){
42 typeVal = types[i].value;
43 break;
44 }
45 }
46
47 //4.3 若没有任何一个 type 被选中, 则弹出: "请选择类型". 响应方法结束:
48 //return false
49 if(typeVal == null){
50 alert("请选择类型");
51 return false;
52 }
53
54 //5. 获取 name="name" 的文本值: 通过 value 属性: nameVal
55 var nameEle = document.getElementsByName("name")[0];
56 var nameVal = nameEle.value;
57
58 //6. 去除 nameVal 的前后空格.
59 var reg = /^\s*|\s*$/g;
60 nameVal = nameVal.replace(reg, "");
61
62 //使 name 的文本框也去除前后空格.
63 nameEle.value = nameVal;
64
65 //6. 把 nameVal 和 "" 进行比较, 若是 "" 说明只出入了空格, 弹出 "请输入内容"
66 //方法结束: return false
67 if(nameVal == ""){
68 alert("请输入内容");
69 return false;
70 }
71
72 //7. 创建 li 节点
73 var liNode = document.createElement("li");
74
75 //8. 利用 nameVal 创建文本节点
76 var content = document.createTextNode(nameVal);
77
78 //9. 把 8 加为 7 的子节点
79 liNode.appendChild(content);
80
81 //11. 为新创建的 li 添加 onclick 响应函数
82 liNode.onclick = function(){
83 showContent(this);
84 }
85
86 //10. 把 7 加为选择的 type 对应的 ul 的子节点
87 document.getElementById(typeVal)
88 .appendChild(liNode);
89
90 //3. 在 onclick 响应函数的结尾处添加 return false, 就可以取消提交按钮的
91 //默认行为.
92 return false;
93 }
94 }
95
96 </script>
97 </head>
98 <body>
99
100 <p>你喜欢哪个城市?</p>
101
102 <ul id="city">
103 <li id="bj">北京</li>
104 <li>上海</li>
105 <li>东京</li>
106 <li>首尔</li>
107 </ul>
108
109 <br><br>
110 <p>你喜欢哪款单机游戏?</p>
111 <ul id="game">
112 <li id="rl">红警</li>
113 <li>实况</li>
114 <li>极品飞车</li>
115 <li>魔兽</li>
116 </ul>
117
118 <br><br>
119
120 <form action="dom-7.html" name="myform">
121
122 <input type="radio" name="type" value="city">城市
123 <input type="radio" name="type" value="game">游戏
124
125 name: <input type="text" name="name"/>
126
127 <input type="submit" value="Submit" id="submit"/>
128
129 </form>
130
131
132 </body>
133 </html>
浙公网安备 33010602011771号