<!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
今日推荐
周排行