标签：
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>
标签：
原文地址：http://www.cnblogs.com/nifengs/p/4834632.html
