获取元素节点
getElementsByTagName()
- 通过 标签名 获取 一组 元素节点对象
这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
即使查询到的元素只有一个，也会封装到数组中返回
getElementsByName()
- 通过 name 属性获取 一组 元素节点对象
- 注意：class属性不能采用这种方式，
- 读取 class 属性时需要使用 元素.className
- console.log(inputs[i].className);
练习
练习文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM查询</title>
<script>
</script>
</head>
<body>
<div id="content">
<div id="formlist">
<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="gta">gta</li>
<li>csgo</li>
<li>destiny2</li>
<li>dota2</li>
</ul>
<br />
<br />
<p>你的手机操作系统是</p>
<ul id="phone">
<li>Ios</li>
<li id="android">Android</li>
<li>鸿蒙</li>
</ul>
<br />
<br />
</div>
<br />
<div class="inner">
<p>gender:</p>
<input class="Hello" type="radio" name="gender" value="male" />
male
<input class="Hello" type="radio" name="gender" value="female" />
female
<br />
<p>name:</p>
<input type="text" name="name" id="username" value=""/>
<br />
<br />
</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>
</div>
</body>
</html>
<style type="text/css">
p{
color: #333333;
margin: 0.3125rem;
}
ul{
list-style-type:none
}
li{
color: #666666;
background-color: #f2f2f2;
border: 0.0625rem solid #d4d4d4;
border-radius:0.3125rem ;
float: left;
margin: 0.3125rem;
padding: 0.3125rem;
}
input{
margin: 0.3125rem;
}
button{
width: 18.75rem;
margin: 0.3125rem;
padding: 0.3125rem;
color: #333333;
border-radius:0.3125rem ;
background-color: #f2f2f2;
border:0.0625rem solid #d4d4d4;
}
#content{
width: 62.5rem;
margin:3.125rem auto;
}
#btnlist{
float: left;
}
#formlist{
float: left;
}
.inner{
border: 0.0625rem solid #d4d4d4;
margin: 0.3125rem;
border-radius: 0.625rem;
width: 31.25rem;
}
</style>
查找 #bj节点
window.noload = function(){
// id 为 btn01 的元素添加点击响应事件
var btn1 = document.getElementById("btn01");
btn1.onclick = function(){
// #bj节点
var bj = document.getElementById("bj");
alert(bj.innerHTML);
};
}
查找所有 li节点
// 为 id 为 btn02 的按钮添加一个单击响应事件
var btn2 = document.getElementById("btn02")
btn2.onclick = function(){
// 查找所有 li节点
var lis = document.getElementsByTagName("li");
// 打印所有 li节点
for(var i = 0;i<lis.length;i++){
console.log(lis[i].innerHTML);
}
};
查找 name = gender 的所有节点
// 为 id 为 btn03 的按钮绑定一个点击响应事件
var btn3 = document.getElementById("btn03");
btn3.onclick = function(){
// 查找 name = gender 的所有节点
var inputs = document.getElementsByName("gender");
for(var i = 0;i<inputs.length;i++){
alert(gen[i].value);
}
};
获取元素节点的子节点
childNodes
- 属性，表示当前节点的所有子节点
- childNodes 属性会获取包括文本节点在内的所有节点
- DOM标签与标签间空白也会当成文本节点
注意：在 IE8及一下的浏览器中，不会将空白文本当成子节点，所以该属性在 IE8中会返回4个子元素而其它浏览器是9个。
children
可以获取当前元素的所有子元素，推荐使用这个。
firstChild
lastChild
练习
查找 #city 所有 li节点
// 查找#city所有li节点
// 为 id 为 btn04 的按钮绑定单击响应事件
var btn4 = document.getElementById("btn04");
btn4.onclick = function(){
var city = document.getElementById("city");
// 获取 city 节点下所有的子节点
var lis = city.getElementsByTagName("li");
for(var i = 0;i<lis.length;i++){
alert(lis[i].innerHTML);
}
}
返回 #city 的所有子节点
// 返回 #city 的所有子节点
var btn5 = document.getElementById("btn05");
btn5.onclick = function(){
var city = document.getElementById("city");
// var cns = city.childNodes;
var cns = city.children;
alert(cns.length);
}
返回 #phone 的第一个子节点
// 返回＃phone 的第一个子节点
var btn6 = document.getElementById("btn06");
btn6.onclick = function(){
var phone = document.getElementById("phone");
// var fir = phone.firstChild;
var fir = phone.firstElementChild;
alert(fir.innerHTML);
}
获取父节点和兄弟节点
-
parentNode
-
innerText
该属性可以获取到元素内部的文本内容，而不是标签
它和 innerHTML类似，不同的是它会自动将 html 去除
previousSibling
-
previousElementSibling
-
nextSibling
属性，表示当前节点的后一个兄弟节点
/*
定义一个函数，专门用来为指定元素绑定单击响应函数
参数：
idStr 要绑定响应函数的对象的 id属性值
fun 事件的回调函数，当单击元素时，该函数将会被触发
*/
function myClick(idStr,fun){
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
myClick("btn07",function(){
alert("hello");
});
练习
返回 #bj 的父节点
myClick("btn07",function(){
// 返回 #bj 的节点
var bj = document.getElementById("bj");
var pn = bj.parentNode;
alert(pn.innerText);
})
返回#android 的前一个兄弟节点
// 返回 #android 的前一个兄弟节点
myClick("btn08",function(){
// 获取 id 为 android 的元素
var and = document.getElementById("android");
var ps = and.previousElementSibling;
alert(ps.innerHTML);
});
读取 #username 的 value 属性值
// 读取 #username 的 value 属性值
myClick("btn09",function(){
var username = document.getElementById("username");
alert(username.value);
});
设置 #username 的 name 属性值
// 设置 #username 的 value 属性只
myClick("btn10",function(){
var um = document.getElementById("username");
um.value = "你好 世界";
});
返回 #bj 的文本值
// 返回 #bj的文本值
myClick("btn11",function(){
var bj = document.getElementById("bj");
// alert(bj.innerHTML);
// innerText 也可以因为没有标签
// alert(bj.innerText);
// 也可以这样写
// var fc = bj.firstChild;
// alert(fc.nodeValue);
// 缩写
alert(bj.firstChild.nodevalue);
});
若有收获，就点个赞吧
0 人点赞
