1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Untitled Document</title> 6 <link rel="stylesheet" type="text/css" href="style/css.css" /> 7 <script type="text/javascript"> 8 9 window.onload = function(){ 10 11 //为id为btn01的按钮绑定一个单击响应函数 12 var btn01 = document.getElementById("btn01"); 13 btn01.onclick = function(){ 14 //查找#bj节点 15 var bj = document.getElementById("bj"); 16 //打印bj 17 //innerHTML 通过这个属性可以获取到元素内部的html代码 18 alert(bj.innerHTML); 19 }; 20 21 22 //为id为btn02的按钮绑定一个单击响应函数 23 var btn02 = document.getElementById("btn02"); 24 btn02.onclick = function(){ 25 //查找所有li节点 26 //getElementsByTagName()可以根据标签名来获取一组元素节点对象 27 //这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中 28 //即使查询到的元素只有一个，也会封装到数组中返回 29 var lis = document.getElementsByTagName("li"); 30 31 //打印lis 32 //alert(lis.length); 33 34 //变量lis 35 for(var i=0 ; i<lis.length ; i++){ 36 alert(lis[i].innerHTML); 37 } 38 }; 39 40 41 //为id为btn03的按钮绑定一个单击响应函数 42 var btn03 = document.getElementById("btn03"); 43 btn03.onclick = function(){ 44 //查找name=gender的所有节点 45 var inputs = document.getElementsByName("gender"); 46 47 //alert(inputs.length); 48 49 for(var i=0 ; i<inputs.length ; i++){ 50 /* 51 * innerHTML用于获取元素内部的HTML代码的 52 * 对于自结束标签，这个属性没有意义 53 */ 54 //alert(inputs[i].innerHTML); 55 /* 56 * 如果需要读取元素节点属性， 57 * 直接使用 元素.属性名 58 * 例子：元素.id 元素.name 元素.value 59 * 注意：class属性不能采用这种方式， 60 * 读取class属性时需要使用 元素.className 61 */ 62 alert(inputs[i].className); 63 } 64 }; 65 66 67 68 //查找#city下所有li节点 69 //返回#city的所有子节点 70 //返回#phone的第一个子节点 71 //返回#bj的父节点 72 //返回#android的前一个兄弟节点 73 //读取#username的value属性值 74 //设置#username的value属性值 75 //返回#bj的文本值 76 77 }; 78 79 80 </script> 81 </head> 82 <body> 83 <div id="total"> 84 <div class="inner"> 85 <p> 86 你喜欢哪个城市? 87 </p> 88 89 <ul id="city"> 90 <li id="bj">北京</li> 91 <li>上海</li> 92 <li>东京</li> 93 <li>首尔</li> 94 </ul> 95 96 <br> 97 <br> 98 99 <p> 100 你喜欢哪款单机游戏? 101 </p> 102 103 <ul id="game"> 104 <li id="rl">红警</li> 105 <li>实况</li> 106 <li>极品飞车</li> 107 <li>魔兽</li> 108 </ul> 109 110 <br /> 111 <br /> 112 113 <p> 114 你手机的操作系统是? 115 </p> 116 117 <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul> 118 </div> 119 120 <div class="inner"> 121 gender: 122 <input class="hello" type="radio" name="gender" value="male"/> 123 Male 124 <input class="hello" type="radio" name="gender" value="female"/> 125 Female 126 <br> 127 <br> 128 name: 129 <input type="text" name="name" id="username" value="abcde"/> 130 </div> 131 </div> 132 <div id="btnList"> 133 <div><button id="btn01">查找#bj节点</button></div> 134 <div><button id="btn02">查找所有li节点</button></div> 135 <div><button id="btn03">查找name=gender的所有节点</button></div> 136 <div><button id="btn04">查找#city下所有li节点</button></div> 137 <div><button id="btn05">返回#city的所有子节点</button></div> 138 <div><button id="btn06">返回#phone的第一个子节点</button></div> 139 <div><button id="btn07">返回#bj的父节点</button></div> 140 <div><button id="btn08">返回#android的前一个兄弟节点</button></div> 141 <div><button id="btn09">返回#username的value属性值</button></div> 142 <div><button id="btn10">设置#username的value属性值</button></div> 143 <div><button id="btn11">返回#bj的文本值</button></div> 144 </div> 145 </body> 146 </html>