DOM查询练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript"> /* 定义一个函数，专门用来为指定元素绑定单击响应函数 参数： idStr 绑定单击响应函数的对象的id属性值 fun 事件的回调函数，当单击元素时，该函数将会被触发 */ function myClick(idStr,fun){ var btn = document.getElementById(idStr); btn.onclick = fun; } window.onload = function () { // ----------------------------按钮 1---------------------------------------------------------- // 为id为btn01的按钮绑定一个单击响应函数 var btn01 = document.getElementById("btn01"); btn01.onclick = function () { // alert("hello"); // 查找#bj节点 var bj = document.getElementById("bj"); // 打印bj // innerHTML 通过这个属性可以获取到元素内部的html代码 console.log("bj.innerHTML: " bj.innerHTML); // alert(bj.innerHTML); }; // ----------------------------按钮 2---------------------------------------------------------- // 为id为btn02的按钮绑定一个单击响应函数 var btn02 = document.getElementById("btn02"); btn02.onclick = function () { //查找所有li的节点 // getElementByTagName()可以根据标签名来获取一组元素节点对象 // 这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中 // 即使查询到的元素只有一个，也会封装到数组中返回 var lis = document.getElementsByTagName("li"); // 打印lis // alert(lis.length);//li的长度：11 // 变量lis for (var i = 0; i < lis.length; i ) { console.log("lis[i].innerHTML: " lis[i].innerHTML); } }; // ----------------------------按钮 3---------------------------------------------------------- //为id为btn03的按钮绑定一个单击响应函数 var btn03 = document.getElementById("btn03"); btn03.onclick = function () { // 查找name=gender的所有节点 var inputs = document.getElementsByName("gender"); // alert(inputs.length); for (var i = 0; i < inputs.length; i ) { /* innerHTML用于获取元素内部的HTML代码的 对于自结束标签，这个属性没意义 */ /* 如果需要读取元素节点属性， 直接使用元素.属性名 例子：元素.id 元素.name 元素.value 注意：class属性不能采用这种方式， 读取clss属性是需要使用元素.className */ console.log("inputs : " inputs[i].value); } // } }; // ----------------------------按钮4:查找#city下所有li节点-------------------------------------------------------- // 为id为btn04的按钮绑定一个单击响应函数 var btn04=document.getElementById("btn04"); btn04.onclick=function(){ var city=document.getElementById("city");//获取id为city的元素 // 查找#city下所有li节点 var lis = city.getElementsByTagName("li"); // console.log(lis.length); for(var i=0;i<lis.length;i ){ console.log(lis[i].innerHTML); } };// ----------------------------按钮5:返回#city的所有节点-------------------------------------------------------- // 为id为btn05的按钮绑定一个单击响应函数 var btn05=document.getElementById("btn05"); btn05.onclick=function(){ // 获取id为city的节点 var city=document.getElementById("city"); // 返回#city的所有节点 /* childNodes属性会获取包括包括文本节点在呢的所有节点 根据DOM标签标签间空白也会当成文本节点 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点， 所以该属性在IE8中会返回4个子元素而其他浏览器是9个 */ var cns=city.childNodes; // console.log(cns.length); // for(var i=0; i<cns.length;i ){ // console.log(cns[i]); // } /*children属性可以获取当前元素的所有子元素*/ var cns2=city.children; console.log(cns2.length); };// ----------------------------按钮6:返回#phone的第一个子节点---------------------------------------------------- var btn06=document.getElementById("btn06"); btn06.onclick=function(){ var phone=document.getElementById("phone"); // phone.childNodes[0]; // firstChild可以获取到当前元素的第一个子节点(包括空白文本节点) var first=phone.firstChild; // firstElementChild可以获取当前元素的第一个子元素 // firstElementChild不支持IE8及以下的浏览器，如果需要兼容她们尽量不要使用 // first=phone.firstElementChild; console.log(first.innerHTML); };// ----------------------------按钮7: 返回#bj的父节点------------------------------------------------------------- myClick("btn07",function(){ // 获取id为bj的节点 var bj=document.getElementById("bj"); // 返回#bj的父节点 var pn=bj.parentNode; // console.log(pn.innerHTML); /* innerText -该属性可以获取到元素内部的文本内容 它和innerHTML类似们不同的是它会自动关机将html去掉 */ console.log(pn.innerText); } ); // ----------------------------按钮8: 返回#android的前一个兄弟节点------------------------------------------------- myClick("btn08",function(){ var and=document.getElementById("android"); // 返回#android的前一个兄弟节点（也可能获取到空白的文本） var pre=and.previousSibling; // console.log(pre.innerHTML); // previousElementSibling获取前一个兄弟元素，IE8及以下不支持 // var ps=and.previousElementSibling; console.log(pre); } );// ----------------------------按钮9: 读取#username的value属性值------------------------------------------------- myClick("btn09", function () { // 获取id为username的元素 var um=document.getElementById("username"); //读取um的value属性值 // 文本框的value属性值，就是文本框中填写的内容 console.log(um.value); } );// ----------------------------按钮10: 设置#username的value属性值------------------------------------------------- myClick("btn10", function () { var um = document.getElementById("username"); um.value="今天的天气真不错~~~~~~"; } ); // ----------------------------按钮11: 返回#bj的文本值------------------------------------------------------------ myClick("btn11", function () { var bj=document.getElementById("bj"); // console.log(bj.innerHTML); // console.log(bj.innerText); /* // 获取bj中的文本节点 var fc=bj.firstChild; console.log(fc.nodeValue); */ console.log(bj.firstChild.nodeValue); } ); }; </script></head><body> <div id="total"> <div class="inner"> <p> 你喜欢哪个城市 </p> <ul id="city"> <li id="bj">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br> <br> <p> 你喜欢哪款单机游戏？ </p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> <br /> <br /> <p> 你手机的操作系统是？ </p> <ul id="phone"><li>IOS</li><li id="android">android</li><li>Windows Phone</li> </ul> </div> <div class="inner"> gender: <input type="radio" name="gender" value="male" /> Male <input type="radio" name="gender" value="female" /> Female <br> <br> name: <input type="text" name="name" id="username" value="abcde" /> </div> </div> <div id="btnList"> <div id="btn01"><button>查找#bj节点</button></div> <div id="btn02"><button>查找所有li节点</button></div> <div id="btn03"><button>查找name=gender的所有节点</button></div> <div id="btn04"><button>查找#city下所有li节点</button></div> <div id="btn05"><button>返回#city的所有节点</button></div> <div id="btn06"><button>返回#phone的第一个子节点</button></div> <div id="btn07"><button>返回#bj的父节点</button></div> <div id="btn08"><button>返回#android的前一个兄弟节点</button></div> <div id="btn09"><button>读取#username的value属性值</button></div> <div id="btn10"><button>设置#username的value属性值</button></div> <div id="btn11"><button>返回#bj的文本值</button></div> </div></body></html>
赞 (0)