DOM（二）
dom查询练习
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 /* 10 * 定义一个函数，专门用来为指定元素绑定单击响应函数 11 * 参数： 12 * idStr 要绑定单击响应函数的对象的id属性值 13 * fun 事件的回调函数，当单击元素时，该函数将会被触发 14 */ 15 function myClick(idStr , fun){ 16 var btn = document.getElementById(idStr); 17 btn.onclick = fun; 18 } 19 20 window.onload = function(){ 21 22 //为id为btn01的按钮绑定一个单击响应函数 23 var btn01 = document.getElementById("btn01"); 24 btn01.onclick = function(){ 25 //查找#bj节点 26 var bj = document.getElementById("bj"); 27 //打印bj 28 //innerHTML 通过这个属性可以获取到元素内部的html代码 29 alert(bj.innerHTML); 30 }; 31 32 33 //为id为btn02的按钮绑定一个单击响应函数 34 var btn02 = document.getElementById("btn02"); 35 btn02.onclick = function(){ 36 //查找所有li节点 37 //getElementsByTagName()可以根据标签名来获取一组元素节点对象 38 //这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中 39 //即使查询到的元素只有一个，也会封装到数组中返回 40 var lis = document.getElementsByTagName("li"); 41 42 //打印lis 43 //alert(lis.length); 44 45 //变量lis 46 for(var i=0 ; i<lis.length ; i++){ 47 alert(lis[i].innerHTML); 48 } 49 }; 50 51 52 //为id为btn03的按钮绑定一个单击响应函数 53 var btn03 = document.getElementById("btn03"); 54 btn03.onclick = function(){ 55 //查找name=gender的所有节点 56 var inputs = document.getElementsByName("gender"); 57 58 //alert(inputs.length); 59 60 for(var i=0 ; i<inputs.length ; i++){ 61 /* 62 * innerHTML用于获取元素内部的HTML代码的 63 * 对于自结束标签，这个属性没有意义 64 */ 65 //alert(inputs[i].innerHTML); 66 /* 67 * 如果需要读取元素节点属性， 68 * 直接使用 元素.属性名 69 * 例子：元素.id 元素.name 元素.value 70 * 注意：class属性不能采用这种方式， 71 * 读取class属性时需要使用 元素.className 72 */ 73 alert(inputs[i].className); 74 } 75 }; 76 77 //为id为btn04的按钮绑定一个单击响应函数 78 var btn04 = document.getElementById("btn04"); 79 btn04.onclick = function(){ 80 81 //获取id为city的元素 82 var city = document.getElementById("city"); 83 84 //查找#city下所有li节点 85 var lis = city.getElementsByTagName("li"); 86 87 for(var i=0 ; i<lis.length ; i++){ 88 alert(lis[i].innerHTML); 89 } 90 91 }; 92 93 //为id为btn05的按钮绑定一个单击响应函数 94 var btn05 = document.getElementById("btn05"); 95 btn05.onclick = function(){ 96 //获取id为city的节点 97 var city = document.getElementById("city"); 98 //返回#city的所有子节点 99 /* 100 * childNodes属性会获取包括文本节点在呢的所有节点 101 * 根据DOM标签标签间空白也会当成文本节点 102 * 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点， 103 * 所以该属性在IE8中会返回4个子元素而其他浏览器是9个 104 */ 105 var cns = city.childNodes; 106 107 //alert(cns.length); 108 109 /*for(var i=0 ; i<cns.length ; i++){ 110 alert(cns[i]); 111 }*/ 112 113 /* 114 * children属性可以获取当前元素的所有子元素 115 */ 116 var cns2 = city.children; 117 alert(cns2.length); 118 }; 119 120 //为id为btn06的按钮绑定一个单击响应函数 121 var btn06 = document.getElementById("btn06"); 122 btn06.onclick = function(){ 123 //获取id为phone的元素 124 var phone = document.getElementById("phone"); 125 //返回#phone的第一个子节点 126 //phone.childNodes[0]; 127 //firstChild可以获取到当前元素的第一个子节点（包括空白文本节点） 128 var fir = phone.firstChild; 129 130 //firstElementChild获取当前元素的第一个子元素 131 /* 132 * firstElementChild不支持IE8及以下的浏览器， 133 * 如果需要兼容他们尽量不要使用 134 */ 135 //fir = phone.firstElementChild; 136 137 alert(fir); 138 }; 139 140 //为id为btn07的按钮绑定一个单击响应函数 141 myClick("btn07",function(){ 142 143 //获取id为bj的节点 144 var bj = document.getElementById("bj"); 145 146 //返回#bj的父节点 147 var pn = bj.parentNode; 148 149 alert(pn.innerHTML); 150 151 /* 152 * innerText 153 * - 该属性可以获取到元素内部的文本内容 154 * - 它和innerHTML类似，不同的是它会自动将html去除 155 */ 156 //alert(pn.innerText); 157 158 159 }); 160 161 162 //为id为btn08的按钮绑定一个单击响应函数 163 myClick("btn08",function(){ 164 165 //获取id为android的元素 166 var and = document.getElementById("android"); 167 168 //返回#android的前一个兄弟节点（也可能获取到空白的文本） 169 var ps = and.previousSibling; 170 171 //previousElementSibling获取前一个兄弟元素，IE8及以下不支持 172 //var pe = and.previousElementSibling; 173 174 alert(ps); 175 176 }); 177 178 //读取#username的value属性值 179 myClick("btn09",function(){ 180 //获取id为username的元素 181 var um = document.getElementById("username"); 182 //读取um的value属性值 183 //文本框的value属性值，就是文本框中填写的内容 184 alert(um.value); 185 }); 186 187 188 //设置#username的value属性值 189 myClick("btn10",function(){ 190 //获取id为username的元素 191 var um = document.getElementById("username"); 192 193 um.value = "今天天气真不错~~~"; 194 }); 195 196 197 //返回#bj的文本值 198 myClick("btn11",function(){ 199 200 //获取id为bj的元素 201 var bj = document.getElementById("bj"); 202 203 //alert(bj.innerHTML); 204 //alert(bj.innerText); 205 206 //获取bj中的文本节点 207 /*var fc = bj.firstChild; 208 alert(fc.nodeValue);*/ 209 210 alert(bj.firstChild.nodeValue); 211 212 213 }); 214 215 }; 216 217 218 </script> 219 </head> 220 <body> 221 <div id="total"> 222 <div class="inner"> 223 <p> 224 你喜欢哪个城市? 225 </p> 226 227 <ul id="city"> 228 <li id="bj">北京</li> 229 <li>上海</li> 230 <li>东京</li> 231 <li>首尔</li> 232 </ul> 233 234 <br> 235 <br> 236 237 <p> 238 你喜欢哪款单机游戏? 239 </p> 240 241 <ul id="game"> 242 <li id="rl">红警</li> 243 <li>实况</li> 244 <li>极品飞车</li> 245 <li>魔兽</li> 246 </ul> 247 248 <br /> 249 <br /> 250 251 <p> 252 你手机的操作系统是? 253 </p> 254 255 <ul id="phone"><li>IOS</li> <li id="android">Android</li><li>Windows Phone</li></ul> 256 </div> 257 258 <div class="inner"> 259 gender: 260 <input class="hello" type="radio" name="gender" value="male"/> 261 Male 262 <input class="hello" type="radio" name="gender" value="female"/> 263 Female 264 <br> 265 <br> 266 name: 267 <input type="text" name="name" id="username" value="abcde"/> 268 </div> 269 </div> 270 <div id="btnList"> 271 <div><button id="btn01">查找#bj节点</button></div> 272 <div><button id="btn02">查找所有li节点</button></div> 273 <div><button id="btn03">查找name=gender的所有节点</button></div> 274 <div><button id="btn04">查找#city下所有li节点</button></div> 275 <div><button id="btn05">返回#city的所有子节点</button></div> 276 <div><button id="btn06">返回#phone的第一个子节点</button></div> 277 <div><button id="btn07">返回#bj的父节点</button></div> 278 <div><button id="btn08">返回#android的前一个兄弟节点</button></div> 279 <div><button id="btn09">返回#username的value属性值</button></div> 280 <div><button id="btn10">设置#username的value属性值</button></div> 281 <div><button id="btn11">返回#bj的文本值</button></div> 282 </div> 283 </body> 284 </html>
全选按钮
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>全选练习</title> 6 <script type="text/javascript"> 7 8 window.onload = function(){ 9 10 11 //获取四个多选框items 12 var items = document.getElementsByName("items"); 13 //获取全选/全不选的多选框 14 var checkedAllBox = document.getElementById("checkedAllBox"); 15 16 /* 17 * 全选按钮 18 * - 点击按钮以后，四个多选框全都被选中 19 */ 20 21 //1.#checkedAllBtn 22 //为id为checkedAllBtn的按钮绑定一个单击响应函数 23 var checkedAllBtn = document.getElementById("checkedAllBtn"); 24 checkedAllBtn.onclick = function(){ 25 26 27 //遍历items 28 for(var i=0 ; i<items.length ; i++){ 29 30 //通过多选框的checked属性可以来获取或设置多选框的选中状态 31 //alert(items[i].checked); 32 33 //设置四个多选框变成选中状态 34 items[i].checked = true; 35 } 36 37 //将全选/全不选设置为选中 38 checkedAllBox.checked = true; 39 40 41 }; 42 43 /* 44 * 全不选按钮 45 * - 点击按钮以后，四个多选框都变成没选中的状态 46 */ 47 //2.#checkedNoBtn 48 //为id为checkedNoBtn的按钮绑定一个单击响应函数 49 var checkedNoBtn = document.getElementById("checkedNoBtn"); 50 checkedNoBtn.onclick = function(){ 51 52 for(var i=0; i<items.length ; i++){ 53 //将四个多选框设置为没选中的状态 54 items[i].checked = false; 55 } 56 57 //将全选/全不选设置为不选中 58 checkedAllBox.checked = false; 59 60 }; 61 62 /* 63 * 反选按钮 64 * - 点击按钮以后，选中的变成没选中，没选中的变成选中 65 */ 66 //3.#checkedRevBtn 67 var checkedRevBtn = document.getElementById("checkedRevBtn"); 68 checkedRevBtn.onclick = function(){ 69 70 //将checkedAllBox设置为选中状态 71 checkedAllBox.checked = true; 72 73 for(var i=0; i<items.length ; i++){ 74 75 //判断多选框状态 76 /*if(items[i].checked){ 77 //证明多选框已选中，则设置为没选中状态 78 items[i].checked = false; 79 }else{ 80 //证明多选框没选中，则设置为选中状态 81 items[i].checked = true; 82 }*/ 83 84 items[i].checked = !items[i].checked;//状态反选 85 86 //判断四个多选框是否全选 87 //只要有一个没选中则就不是全选 88 if(!items[i].checked){ 89 //一旦进入判断，则证明不是全选状态 90 //将checkedAllBox设置为没选中状态 91 checkedAllBox.checked = false; 92 } 93 } 94 95 //在反选时也需要判断四个多选框是否全都选中 96 97 98 99 }; 100 101 /* 102 * 提交按钮： 103 * - 点击按钮以后，将所有选中的多选框的value属性值弹出 104 */ 105 //4.#sendBtn 106 //为sendBtn绑定单击响应函数 107 var sendBtn = document.getElementById("sendBtn"); 108 sendBtn.onclick = function(){ 109 //遍历items 110 for(var i=0 ; i<items.length ; i++){ 111 //判断多选框是否选中 112 if(items[i].checked){ 113 alert(items[i].value); 114 } 115 } 116 }; 117 118 119 //5.#checkedAllBox 120 /* 121 * 全选/全不选 多选框 122 * - 当它选中时，其余的也选中，当它取消时其余的也取消 123 * 124 * 在事件的响应函数中，响应函数是给谁绑定的this就是谁 125 */ 126 //为checkedAllBox绑定单击响应函数 127 checkedAllBox.onclick = function(){ 128 129 //alert(this === checkedAllBox); 130 131 //设置多选框的选中状态 132 for(var i=0; i <items.length ; i++){ 133 items[i].checked = this.checked; 134 } 135 136 }; 137 138 //6.items 139 /* 140 * 如果四个多选框全都选中，则checkedAllBox也应该选中 141 * 如果四个多选框没都选中，则checkedAllBox也不应该选中 142 */ 143 144 //为四个多选框分别绑定点击响应函数 145 for(var i=0 ; i<items.length ; i++){ 146 items[i].onclick = function(){ 147 148 //将checkedAllBox设置为选中状态 149 checkedAllBox.checked = true; 150 151 for(var j=0 ; j<items.length ; j++){ 152 //判断四个多选框是否全选 153 //只要有一个没选中则就不是全选 154 if(!items[j].checked){ 155 //一旦进入判断，则证明不是全选状态 156 //将checkedAllBox设置为没选中状态 157 checkedAllBox.checked = false; 158 //一旦进入判断，则已经得出结果，不用再继续执行循环 159 break; 160 } 161 162 } 163 164 165 166 }; 167 } 168 169 170 }; 171 172 </script> 173 </head> 174 <body> 175 176 <form method="post" action=""> 177 你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 178 179 <br /> 180 <input type="checkbox" name="items" value="足球" />足球 181 <input type="checkbox" name="items" value="篮球" />篮球 182 <input type="checkbox" name="items" value="羽毛球" />羽毛球 183 <input type="checkbox" name="items" value="乒乓球" />乒乓球 184 <br /> 185 <input type="button" id="checkedAllBtn" value="全 选" /> 186 <input type="button" id="checkedNoBtn" value="全不选" /> 187 <input type="button" id="checkedRevBtn" value="反 选" /> 188 <input type="button" id="sendBtn" value="提 交" /> 189 </form> 190 </body> 191 </html>
dom查询其他方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 window.onload = function(){ 9 10 //获取body标签，获取的是一个伪数组 11 //var body = document.getElementsByTagName("body")[0]; 12 console.log(body); 13 /* 14 * 在document中有一个属性body，它保存的是body的引用 15 */ 16 var body = document.body; 17 18 /* 19 * document.documentElement保存的是html根标签 20 */ 21 var html = document.documentElement; 22 23 //console.log(html); 24 var html= document.getElementsByTagName("html")[0] 25 console.log(html); 26 27 /* 28 * document.all代表页面中所有的元素 29 */ 30 var all = document.all; 31 32 console.log(all, all.length)//HTMLAllCollection(7) [html, head, meta, meta, title, body, script, viewport: meta] 7 33 34 /*for(var i=0 ; i<all.length ; i++){ 35 console.log(all[i]); 36 }*/ 37 38 //all = document.getElementsByTagName("*"); 39 //console.log(all.length); 40 41 42 /* 43 * 根据元素的class属性值查询一组元素节点对象 44 * getElementsByClassName()可以根据class属性值获取一组元素节点对象， 45 * 但是该方法不支持IE8及以下的浏览器 46 */ 47 //var box1 = document.getElementsByClassName("box1"); 48 //console.log(box1.length); 49 50 //获取页面中的所有的div 51 //var divs = document.getElementsByTagName("div"); 52 53 //获取class为box1中的所有的div 54 //.box1 div 55 /* 56 * document.querySelector() 57 * - 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象 58 * - 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替 59 * - 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个 60 */ 61 var div = document.querySelector(".box1 div"); 62 63 var box1 = document.querySelector(".box1") 64 65 console.log(div.innerHTML); 66 67 console.log(box1.innerText);//我是box1中的div,我是box1中的div, 68 //我是box1中的div 69 console.log(box1.innerHTML);// 我是box1中的div,我是box1中的div, 70 // <div>我是box1中的div</div> 71 72 /* 73 * document.querySelectorAll() 74 * - 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回 75 * - 即使符合条件的元素只有一个，它也会返回数组 76 */ 77 box1 = document.querySelectorAll(".box1"); 78 // box1 = document.querySelectorAll("#box2"); 79 console.log(box1); 80 console.log(box1[0]); 81 82 }; 83 84 85 </script> 86 </head> 87 <body> 88 <div id="box2"></div> 89 <div class="box1"> 90 我是第一个box1,我是box1中的div, 91 <div>我是box1中的div</div> 92 </div> 93 <div class="box1"> 94 <div>我是box1中的div</div> 95 </div> 96 <div class="box1"> 97 <div>我是box1中的div</div> 98 </div> 99 <div class="box1"> 100 <div>我是box1中的div</div> 101 </div> 102 103 <div></div> 104 </body> 105 </html>
dom增删改
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 //创建一个"广州"节点,添加到#city下 12 myClick("btn01",function(){ 13 //创建广州节点 <li>广州</li> 14 //创建li元素节点 15 /* 16 * document.createElement() 17 * 可以用于创建一个元素节点对象， 18 * 它需要一个标签名作为参数，将会根据该标签名创建元素节点对象， 19 * 并将创建好的对象作为返回值返回 20 */ 21 var li = document.createElement("li"); 22 23 //创建广州文本节点 24 /* 25 * document.createTextNode() 26 * 可以用来创建一个文本节点对象 27 * 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回 28 */ 29 var gzText = document.createTextNode("广州"); 30 31 //将gzText设置li的子节点 32 /* 33 * appendChild() 34 * - 向一个父节点中添加一个新的子节点 35 * - 用法：父节点.appendChild(子节点); 36 */ 37 li.appendChild(gzText); 38 39 //获取id为city的节点 40 var city = document.getElementById("city"); 41 42 //将广州添加到city下 43 city.appendChild(li); 44 45 46 }); 47 48 //将"广州"节点插入到#bj前面 49 myClick("btn02",function(){ 50 //创建一个广州 51 var li = document.createElement("li"); 52 var gzText = document.createTextNode("广州"); 53 li.appendChild(gzText); 54 55 //获取id为bj的节点 56 var bj = document.getElementById("bj"); 57 58 //获取city 59 var city = document.getElementById("city"); 60 61 /* 62 * insertBefore() 63 * - 可以在指定的子节点前插入新的子节点 64 * - 语法： 65 * 父节点.insertBefore(新节点,旧节点); 66 */ 67 city.insertBefore(li , bj); 68 69 70 }); 71 72 73 //使用"广州"节点替换#bj节点 74 myClick("btn03",function(){ 75 //创建一个广州 76 var li = document.createElement("li"); 77 var gzText = document.createTextNode("广州"); 78 li.appendChild(gzText); 79 80 //获取id为bj的节点 81 var bj = document.getElementById("bj"); 82 83 //获取city 84 var city = document.getElementById("city"); 85 86 /* 87 * replaceChild() 88 * - 可以使用指定的子节点替换已有的子节点 89 * - 语法：父节点.replaceChild(新节点,旧节点); 90 */ 91 city.replaceChild(li , bj); 92 93 94 }); 95 96 //删除#bj节点 97 myClick("btn04",function(){ 98 //获取id为bj的节点 99 var bj = document.getElementById("bj"); 100 //获取city 101 var city = document.getElementById("city"); 102 103 /* 104 * removeChild() 105 * - 可以删除一个子节点 106 * - 语法：父节点.removeChild(子节点); 107 * 108 * 子节点.parentNode.removeChild(子节点); 109 */ 110 //city.removeChild(bj); 111 112 bj.parentNode.removeChild(bj); 113 }); 114 115 116 //读取#city内的HTML代码 117 myClick("btn05",function(){ 118 //获取city 119 var city = document.getElementById("city"); 120 121 alert(city.innerHTML); 122 }); 123 124 //设置#bj内的HTML代码 125 myClick("btn06" , function(){ 126 //获取bj 127 var bj = document.getElementById("bj"); 128 bj.innerHTML = "昌平"; 129 }); 130 131 myClick("btn07",function(){ 132 133 //向city中添加广州 134 var city = document.getElementById("city"); 135 136 /* 137 * 使用innerHTML也可以完成DOM的增删改的相关操作 138 * 一般我们会两种方式结合使用 139 */ 140 //city.innerHTML += "<li>广州</li>"; 141 142 //创建一个li 143 var li = document.createElement("li"); 144 //向li中设置文本 145 li.innerHTML = "广州"; 146 //将li添加到city中 147 city.appendChild(li); 148 149 }); 150 151 152 }; 153 154 function myClick(idStr, fun) { 155 var btn = document.getElementById(idStr); 156 btn.onclick = fun; 157 } 158 159 160 </script> 161 162 </head> 163 <body> 164 <div id="total"> 165 <div class="inner"> 166 <p> 167 你喜欢哪个城市? 168 </p> 169 170 <ul id="city"> 171 <li id="bj">北京</li> 172 <li>上海</li> 173 <li>东京</li> 174 <li>首尔</li> 175 </ul> 176 177 </div> 178 </div> 179 <div id="btnList"> 180 <div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div> 181 <div><button id="btn02">将"广州"节点插入到#bj前面</button></div> 182 <div><button id="btn03">使用"广州"节点替换#bj节点</button></div> 183 <div><button id="btn04">删除#bj节点</button></div> 184 <div><button id="btn05">读取#city内的HTML代码</button></div> 185 <div><button id="btn06">设置#bj内的HTML代码</button></div> 186 <div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div> 187 </div> 188 </body> 189 </html>
待续。。。
