1 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 2 <html> 3 3 <head> 4 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 5 <title>Untitled Document</title> 6 6 <link rel="stylesheet" type="text/css" href="style/css.css" /> 7 7 <script type="text/javascript"> 8 8 9 9 window.onload = function(){ 10 10 11 11 //为id为btn01的按钮绑定一个单击响应函数 12 12 var btn01 = document.getElementById("btn01"); 13 13 btn01.onclick = function(){ 14 14 //查找#bj节点 15 15 var bj = document.getElementById("bj"); 16 16 //打印bj 17 17 //innerHTML 通过这个属性可以获取到元素内部的html代码 18 18 alert(bj.innerHTML); 19 19 }; 20 20 21 21 22 22 //为id为btn02的按钮绑定一个单击响应函数 23 23 var btn02 = document.getElementById("btn02"); 24 24 btn02.onclick = function(){ 25 25 //查找所有li节点 26 26 //getElementsByTagName()可以根据标签名来获取一组元素节点对象 27 27 //这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中 28 28 //即使查询到的元素只有一个，也会封装到数组中返回 29 29 var lis = document.getElementsByTagName("li"); 30 30 31 31 //打印lis 32 32 //alert(lis.length); 33 33 34 34 //变量lis 35 35 for(var i=0 ; i<lis.length ; i++){ 36 36 alert(lis[i].innerHTML); 37 37 } 38 38 }; 39 39 40 40 41 41 //为id为btn03的按钮绑定一个单击响应函数 42 42 var btn03 = document.getElementById("btn03"); 43 43 btn03.onclick = function(){ 44 44 //查找name=gender的所有节点 45 45 var inputs = document.getElementsByName("gender"); 46 46 47 47 //alert(inputs.length); 48 48 49 49 for(var i=0 ; i<inputs.length ; i++){ 50 50 /* 51 51 * innerHTML用于获取元素内部的HTML代码的 52 52 * 对于自结束标签，这个属性没有意义 53 53 */ 54 54 //alert(inputs[i].innerHTML); 55 55 /* 56 56 * 如果需要读取元素节点属性， 57 57 * 直接使用 元素.属性名 58 58 * 例子：元素.id 元素.name 元素.value 59 59 * 注意：class属性不能采用这种方式， 60 60 * 读取class属性时需要使用 元素.className 61 61 */ 62 62 alert(inputs[i].className); 63 63 } 64 64 }; 65 65 66 66 67 67 68 68 //查找#city下所有li节点 69 69 //返回#city的所有子节点 70 70 //返回#phone的第一个子节点 71 71 //返回#bj的父节点 72 72 //返回#android的前一个兄弟节点 73 73 //读取#username的value属性值 74 74 //设置#username的value属性值 75 75 //返回#bj的文本值 76 76 77 77 }; 78 78 79 79 80 80 </script> 81 81 </head> 82 82 <body> 83 83 <div id="total"> 84 84 <div class="inner"> 85 85 <p> 86 86 你喜欢哪个城市? 87 87 </p> 88 88 89 89 <ul id="city"> 90 90 <li id="bj">北京</li> 91 91 <li>上海</li> 92 92 <li>东京</li> 93 93 <li>首尔</li> 94 94 </ul> 95 95 96 96 <br> 97 97 <br> 98 98 99 99 <p> 100100 你喜欢哪款单机游戏? 101101 </p> 102102 103103 <ul id="game"> 104104 <li id="rl">红警</li> 105105 <li>实况</li> 106106 <li>极品飞车</li> 107107 <li>魔兽</li> 108108 </ul> 109109 110110 <br /> 111111 <br /> 112112 113113 <p> 114114 你手机的操作系统是? 115115 </p> 116116 117117 <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul> 118118 </div> 119119 120120 <div class="inner"> 121121 gender: 122122 <input class="hello" type="radio" name="gender" value="male"/> 123123 Male 124124 <input class="hello" type="radio" name="gender" value="female"/> 125125 Female 126126 <br> 127127 <br> 128128 name: 129129 <input type="text" name="name" id="username" value="abcde"/> 130130 </div> 131131 </div> 132132 <div id="btnList"> 133133 <div><button id="btn01">查找#bj节点</button></div> 134134 <div><button id="btn02">查找所有li节点</button></div> 135135 <div><button id="btn03">查找name=gender的所有节点</button></div> 136136 <div><button id="btn04">查找#city下所有li节点</button></div> 137137 <div><button id="btn05">返回#city的所有子节点</button></div> 138138 <div><button id="btn06">返回#phone的第一个子节点</button></div> 139139 <div><button id="btn07">返回#bj的父节点</button></div> 140140 <div><button id="btn08">返回#android的前一个兄弟节点</button></div> 141141 <div><button id="btn09">返回#username的value属性值</button></div> 142142 <div><button id="btn10">设置#username的value属性值</button></div> 143143 <div><button id="btn11">返回#bj的文本值</button></div> 144144 </div> 145145 </body> 146146 </html>
DOM查询
Wesley13
2021-10-11
1433 0 0
点赞
收藏
评论区
加载中...