目录
一、获取元素节点的子节点
通过具体的元素节点调用
- getElementByTagName():是一个方法,返回当前节点的指定标签名后代节点
- childNodes:一个属性,表示当前节点的所有子节点
- firstChild:一个属性,表示当前节点的第一个子节点
- lastChild:一个属性,表示当前节点的最后一个子节点
核心JS代码
<script>
//完成下面的按钮的功能
window.onload = function() {
var btn01 = document.getElementById('btn01');
// 为id为btn01的按钮绑定一个单击响应函数
btn01.onclick = function() {
// 查找#bj节点
var bj = document.getElementById('bj');
alert(bj.innerHTML);
};
// 查找所有li节点
var btn02 = document.getElementById('btn02');
btn02.onclick = function(){
var lis = document.getElementsByTagName('li');
// getElementsByTagName获得的是一组元素节点对象
for(var i = 0;i<lis.length;i++){
alert(lis[i].innerHTML);
}
};
// 查找name=gender的所有节点
var btn03 = document.getElementById('btn03');
btn03.onclick = function(){
var inputs = document.getElementsByName('gender');
for (var i=0;i<inputs.length;i++){
// 对于自结标签可以直接通过标签名来获取
// 对于class属性不能直接.class,只能通过className方式
alert(inputs[i].value);
}
}
// 查找#city下所有li节点
var btn04 = document.getElementById('btn04');
btn04.onclick = function(){
var city = document.getElementById('city');
var lis = city.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
alert(lis[i].innerHTML);
}
}
// 返回#city所有子节点
var btn05 = document.getElementById('btn05');
btn05.onclick = function(){
var city = document.getElementById('city');
var lis = city.childNodes;
// children这个表示可以获取当前元素的所有子元素,不包括文本节点
var lis2 = city.children;
for(var i=0;i<lis.length;i++){
// childNodes属性会获取包括文本节点在内的所有节点
// 根据DOM标签与标签之间空白也会当成文本节点
// 注意:再IE8及以下的版本浏览器中,不会将空白文本当成子节点
// 所以该属性在IE8中会返回4个子元素
alert(lis2[i].innerHTML);
}
}
// 返回#phone的第一个子节点
var btn06 = document.getElementById('btn06');
btn06.onclick = function(){
var phone = document.getElementById('phone');
// firstChild是获取当前元素的第一个子节点(包括文本节点)
var fir = phone.firstChild;
// firstElementChild是获取当前元素的第一个子元素
// 但是不支持IE8及以下的浏览器使用;
var fir1 = phone.firstElementChild;
alert(fir1);
}
// 返回#bj的父节点
// 返回#android的前一个兄弟节点
// 返回#username的value属性值
// 设置#username的value属性值
// 返回#bj的文本值
}
</script>
代码示例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//完成下面的按钮的功能
window.onload = function() {
var btn01 = document.getElementById('btn01');
// 为id为btn01的按钮绑定一个单击响应函数
btn01.onclick = function() {
// 查找#bj节点
var bj = document.getElementById('bj');
alert(bj.innerHTML);
};
// 查找所有li节点
var btn02 = document.getElementById('btn02');
btn02.onclick = function(){
var lis = document.getElementsByTagName('li');
// getElementsByTagName获得的是一组元素节点对象
for(var i = 0;i<lis.length;i++){
alert(lis[i].innerHTML);
}
};
// 查找name=gender的所有节点
var btn03 = document.getElementById('btn03');
btn03.onclick = function(){
var inputs = document.getElementsByName('gender');
for (var i=0;i<inputs.length;i++){
// 对于自结标签可以直接通过标签名来获取
// 对于class属性不能直接.class,只能通过className方式
alert(inputs[i].value);
}
}
// 查找#city下所有li节点
var btn04 = document.getElementById('btn04');
btn04.onclick = function(){
var city = document.getElementById('city');
var lis = city.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
alert(lis[i].innerHTML);
}
}
// 返回#city所有子节点
var btn05 = document.getElementById('btn05');
btn05.onclick = function(){
var city = document.getElementById('city');
var lis = city.childNodes;
// children这个表示可以获取当前元素的所有子元素,不包括文本节点
var lis2 = city.children;
for(var i=0;i<lis.length;i++){
// childNodes属性会获取包括文本节点在内的所有节点
// 根据DOM标签与标签之间空白也会当成文本节点
// 注意:再IE8及以下的版本浏览器中,不会将空白文本当成子节点
// 所以该属性在IE8中会返回4个子元素
alert(lis2[i].innerHTML);
}
}
// 返回#phone的第一个子节点
var btn06 = document.getElementById('btn06');
btn06.onclick = function(){
var phone = document.getElementById('phone');
// firstChild是获取当前元素的第一个子节点(包括文本节点)
var fir = phone.firstChild;
// firstElementChild是获取当前元素的第一个子元素
// 但是不支持IE8及以下的浏览器使用;
var fir1 = phone.firstElementChild;
alert(fir1);
}
// 返回#bj的父节点
// 返回#android的前一个兄弟节点
// 返回#username的value属性值
// 设置#username的value属性值
// 返回#bj的文本值
}
</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 />
<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">
genner:
<input type="radio" name="gender" value="male" />
Male:
<input type="radio" name="gender" value="female" />
Female:
<br />
<br />
name:
<input type="text" name="name" value="abcd" />
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>
效果展示图
本节学习了四个DOM查询功能内容,下期我们再继续!!!
上节学习链接:
感谢大家的关注,继续努力!!!