JavaScript的DOM编程--03--读写属性节点
读写属性节点:
1)可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值
2)通过元素节点的 getAttributeNode 方法来获取属性节点,
然后在通过 nodeValue 来读写属性值
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
8 //读写属性节点: 通过元素节点 . 的方式来获取属性值和设置属性值.
9 window.onload = function(){
10
11 //属性节点即为某一指定的元素节点的属性.
12 //1. 先获取指定的那个元素节点
13 var nameNode = document.getElementById("name");
14
15 //2. 再读取指定属性的值
16 alert(nameNode.value);
17
18 //3. 设置指定的属性的值.
19 nameNode.value = "尚硅谷";
20
21 //var nameAttr = nameNode.getAttributeNode("value");
22 //alert(nameAttr);
23 //alert("--" + nameAttr.nodeValue);
24 //nameAttr.nodeValue = "atguigu";
25 }
26
27 </script>
28
29 </head>
30 <body>
31 <p>你喜欢哪个城市?</p>
32 <ul id="city">
33 <li id="bj" name="BeiJing">北京</li>
34 <li>上海</li>
35 <li>东京</li>
36 <li>首尔</li>
37 </ul>
38
39 <br><br>
40 <p>你喜欢哪款单机游戏?</p>
41 <ul id="game">
42 <li id="rl">红警</li>
43 <li>实况</li>
44 <li>极品飞车</li>
45 <li>魔兽</li>
46 </ul>
47
48 <br><br>
49 name: <input type="text" name="username"
50 id="name" value="atguigu"/>
51 </body>
52 </html>
