Dom查询方法
一 ,获取元素节点
通过document对象调用
1.getElementById() 通过id属性获取一个元素节点对象
2.getElementsByTagName() 通过标签名获取一组元素节点对象
3.getElementsByName() 通过name属性获取一组元素节点对象
二,获取元素节点的子节点
通过具体的元素节点调用
1.getElementByTagName() 返回当前节点的指定标签名后代节点
2.childNodes 表示当前节点的所有子节点 chlidren属性可以获取当前元素的所有子元素
3.firstChild 表示当前节点的第一个子节点 firstElementChild获取当前元素的第一个子元素
4.lastChild 表示当前节点的最后一个字节点
三,获取父节点和兄弟节点
通过具体的节点调用
1.parentNode 表示当前节点的父节点
2.previousSibling 表示当前节点的前一个兄弟节点
3.nextSibling 表示当前节点的后一个兄弟节点
题目:
查找#bj的节点
查找所有li的节点
查找name=gender的节点
查找#city下所有li的节点
返回#city下所有子节点
返回#phone的第一个子节点
返回#bj的父节点
返回#android的前一个兄弟节点
返回#username的value属性值
设置#username的value属性值
返回#bj的文本值
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM查询</title>
<style>
.total{
width:400px;
height:650px;
border:1px solid red;
}
li{
color:#20E15A;
}
</style>
<script>
/*
定义一个函数 ,专门用来为指定元素绑定单击响应函数
参数:
idstr 要绑定单击响应函数的对象的id属性值
*/
function Myclick(idstr,fun){
var btn=document.getElementById(idstr);
btn.onclick=fun;
}
window.onload=function(){
//为id为btn01的按钮绑定一个单击响应函数
var btn01=document.getElementById("btn01");
btn01.onclick=function(){
//查找#bj的节点
var bj=document.getElementById("bj");
alert(bj.innerHTML);
}
var btn02=document.getElementById("btn02");
btn02.onclick=function(){
//查找所有li的节点
//这个方法会给我们返回一个类数组对象,所有查询到的元素都会分装到对象中
var li=document.getElementsByTagName("li");
for(var i=0;i<=li.length;i++){
alert(li[i].innerHTML);
/*
innerHTML用于获取内部的HTML代码的
对于自结束标签,这个属性没有意义
*/
}
}
var btn03=document.getElementById("btn03");
btn03.onclick=function(){
//查找name=gender的节点
var gender=document.getElementsByName("gender");
for(var i=0;i<=gender.length;i++){
alert(gender[i].value);
/*
如果要读取元素节点属性
直接使用元素.属性名
例如:元素.name 元素.id
注意class属性不能采用这种方式
读取class属性时需要使用元素.className
*/
}
}
var btn04=document.getElementById("btn04");
btn04.onclick=function(){
//获取id为city的节点
var city=document.getElementById("city");
//查找#city下所有li的节点
var lis=city.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
alert(lis[i].innerHTML);
}
}
var btn05=document.getElementById("btn05");
btn05.onclick=function(){
//返回#city下所有子节点
var city=document.getElementById("city");
var cns=city.childNodes;
/*
childNodes属性会获取包括文本节点在内的所有节点
根据Dom标签之间的空白会当成文本节点
*/
alert(cns.length); //返回 9
var cns2=city.children;
for(var i=0;i<cns2.length;i++){
alert(cns2[i].innerHTML);
}
}
var btn06=document.getElementById("btn06");
btn06.onclick=function(){
//返回#phone的第一个子节点
var phone=document.getElementById("phone");
var ph=phone.firstChild;
alert(ph.innerHTML);
}
var btn07=document.getElementById("btn07");
btn07.onclick=function(){
//返回#bj的父节点
var bj=document.getElementById("bj");
var beijing=bj.parentNode;
//alert(beijing.innerHTML);
/*
innerText
该属性可以获取到元素内部的文本内容
和inner HTML类似 但是会将标签去除
*/
alert(beijing.innerText);
}
Myclick("btn08",function(){
//返回#android的前一个兄弟节点
var android=document.getElementById("android");
var Ad=android.previousSibling;
alert(Ad.innerText) ;
})
Myclick("btn09",function(){
//返回#username的value属性值
var username=document.getElementById("username");
alert(username.value);
})
Myclick("btn10",function(){
//设置#username的value属性值
var username=document.getElementById("username");
username.value="臭猪";
})
Myclick("btn11",function(){
//返回#bj的文本值
var bj=document.getElementById("bj");
alert(bj.innerText);
})
}
</script>
</head>
<body>
<div class="total">
<div class="inner">
<p>你喜欢那个城市?</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br>
<p>你喜欢那款单机游戏?</p>
<ul>
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽世界</li>
</ul>
<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><br>
<div id="btnList">
<div><button id="btn01">查找#bj的节点</button></div><br>
<div><button id="btn02">查找所有li的节点</button></div><br>
<div><button id="btn03">查找name=gender的节点</button></div><br>
<div><button id="btn04">查找#city下所有li的节点</button></div><br>
<div><button id="btn05">返回#city下所有子节点</button></div><br>
<div><button id="btn06">返回#phone的第一个子节点</button></div><br>
<div><button id="btn07">返回#bj的父节点</button></div><br>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div><br>
<div><button id="btn09">返回#username的value属性值</button></div><br>
<div><button id="btn10">设置#username的value属性值</button></div><br>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>