<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ list-style: none; } #main{ border: 1px solid black; width: 270px; height: 300px; float: left; text-align: center; } button{ display: block; text-align: center; margin-left:20px ; margin-top: 10px; } p{ display: block; } li{ display: block; background-color: lawngreen; width: 80px; margin: 5px ; float: left; } </style> </head> <body> <div id="main"> <p>你想去哪个城市?</p> <div id="city"> <li id="bj">北京</li> <li>武汉</li> <li>杭州</li> </div> <br /> <p>你喜欢哪个游戏?</p> <div id="game"> <li id="rl">红警</li> <li>实况</li> <li>魔兽</li> </div> <br /> <p>你用的什么手机?</p> <div id="phone"> <li>ios</li> <li id="android">android</li> <li>windows</li> </div> <div> <input type="radio" name="gander" id="gander" value="male" /> male <input type="radio" name="gander" id="gander" value="female" /> female <br /> name: <input type="text" name="name" id="username" value="wang" /> </div> </div> <div id="main"> <button id="btn1">查找#bj节点</button> <button id="btn2">查找所有li节点</button> <button id="btn3">查找name=gander的所有节点</button> <button id="btn4">查找#city的所有li节点</button> <button id="btn5">返回#city的所有子节点</button> <button id="btn6">返回#phone的第一个子节点</button> <button id="btn7">返回#bj的父节点</button> <button id="btn8">返回#android的前一个兄弟节点</button> <button id="btn9">返回#username的value值</button> <button id="btn10">设置#username的value值</button> <button id="btn11">返回#bj的文本值</button> </div> </body> <script type="text/javascript"> /* * 发现每次写每个按钮获取和单击事件太多余, * 定义一个函数,专门来绑定指定元素的单击函数 * 传参: * idStr:要绑定单击响应函数的对象id属性值 * fun:时间的回调函数,单击触发事件 */ function myClick(idStr,fun){ var btn=document.getElementById(idStr); btn.onclick=fun; //从第七次开始调用 } /* * 获取元素节点 ●通过document对象调用 1. getElementById( -通过id属性获取-个元素节点对象 2. getElementsByTagName() 一通过标签名获取一组元素节点对象 3. getElementsByName() 一通过name属性获取一组元素节点对象 */ //1.查找#bj节点 //获取id为btn1的元素 var btn1=document.getElementById("btn1"); //事件处理 btn1.onclick=function(){ //获取id为bj的元素 var bj=document.getElementById("bj"); alert(bj.innerHTML); } //2.查找所有li节点 var btn2=document.getElementById("btn2"); btn2.onclick=function (){ //getElementsByTagName()方法返回一个类数组对象, var lis=document.getElementsByTagName("li"); //alert(lis.innerHTML); //alert(lis.length); //6 //遍历li元素内部代码 for(i=0;i<lis.length;i++){ alert(lis[i].innerHTML); } } //3.查找name=gander的所有节点 var btn3=document.getElementById("btn3"); btn3.onclick=function(){ var inputs=document.getElementsByName("gander"); //alert(inputs.length); //2 for (i=0;i<inputs.length;i++) { //alert(inputs[i].innerHTML); //undefiend /*innerHTML对自结束的标签没意义, 要读取属性,元素.属性名 注意:clas例外,要有className */ alert(inputs[i].name); } } /*获取元素节点的子节点 ●通过具体的元素节点调用 1. getElementsByTagName() -方法,返回当前节点的指定标签名后代节点 2. childNodes -属性,表示当前节点的所有子节点 3. firstChild -属性,表示当前节点的第一个子节点 4. lastChild -属性,表示当前节点的最后一个子节点 */ //4.查找#city的所有li节点 var btn4=document.getElementById("btn4"); btn4.onclick=function(){ var city=document.getElementById("city"); var lis=city.getElementsByTagName("li"); //alert(lis.length); //3 for(i=0;i<lis.length;i++){ alert(lis[i].innerHTML); } } //5.返回#city的所有子节点 var btn5=document.getElementById("btn5"); btn5.onclick=function(){ var city=document.getElementById("city"); var cns=city.childNodes; //alert(cns.length); //7 //childNodes会获取包括文本节点在内的所有节点, //DOM标签间的空白也会当成文本节点 var cns1=city.children; //3 用children属性获取子元素跟符合逻辑 console.log(cns1.length); for(i=0;i<cns.length;i++){ alert(cns[i].innerHTML); } } //6.返回#phone的第一个子节点 var btn6=document.getElementById("btn6"); btn6.onclick=function(){ var phone=document.getElementById("phone"); var lis=city.getElementsByTagName("li"); var fir=phone.firstChild; //获取第一个子节点,包括空白 // var fir=phone.lastChild;//获取最后个子节点 alert(fir); var fir1=phone.firstElementChild; //获取第一个子元素 alert(fir1); } /*获取父节点和兄弟节点 ●通过具体的节点调用 1. parentNode -属性,表示当前节点的父节点 2. previousSibling -属性,表示当前节点的前一个兄弟节点 3. nextSibling 一属性,表示当前节点的后一个兄弟节点 */ //7.返回#bj的父节点 //实参btn7的单击函数传递 myClick("btn7",function(){ var bj=document.getElementById("bj"); var pn=bj.parentNode;//获取父节点,只会是元素,不用考虑空白文本, //父类节点唯一的,不会是类数组 alert(pn.innerHTML);//打印下面的包括标签里的全部内容 console.log(pn.innerText);//打印文本内容,自动去除标签 }); //8.返回#android的前一个兄弟节点 myClick("btn8",function(){ var and=document.getElementById("android"); var ps=and.previousSibling;//获取前一个兄弟节点,会获取空白文本 // var ps=and.nextSibling; //获取后一个兄弟节点 alert(ps); var ps1=and.previousElementSibling;//获取前一个兄弟元素 alert(ps1.innerHTML); }); //9.返回#username的value值 myClick("btn9",function(){ var um=document.getElementById("username"); //读取属性值,元素.属性 alert(um.value); }); //10.设置#username的value值 myClick("btn10",function(){ var um=document.getElementById("username"); //改属性值,元素.属性= um.value="wind"; }); //11.返回#bj的文本值 myClick("btn11",function(){ var bj=document.getElementById("bj"); //alert(bj.innerText); alert(bj.firstChild.nodeValue); alert(bj.firstChild.nodeName); }); /*节点的属性 nodeName nodeType nodeValue 文档节点 #document 9 null 元素节点 标签名 1 null 属性节点 属性名 2 属性值 文本节点 #text 3 ★文本内容 */ </script> </html>
JavaScript DOM查询(元素节点,父类子类兄弟类)练习
猜你喜欢
转载自www.cnblogs.com/wangdongwei/p/11263802.html
今日推荐
周排行