尾部附上整体代码！
1，
//1.查找#bj节点
document.getElementById('btn01').onclick = function () {
var biObj = document.getElementById("bj")
alert(biObj.innerHTML)
}结果：
2,
//2.查找所有li节点
var btn02Ele = document.getElementById("btn02");
btn02Ele.onclick = function(){
var lis = document.getElementsByTagName('li')
alert(lis.length)
};
3,
//3.查找name=gender的所有节点
var btn03Ele = document.getElementById("btn03");
btn03Ele.onclick = function(){
var nameg = document.getElementsByName('gender')
alert(nameg.length)
};
4,
//4.查找#city下所有li节点
var btn04Ele = document.getElementById("btn04");
btn04Ele.onclick = function(){
var ls = document.getElementById('city').getElementsByTagName('li')
alert(ls.length)
};
5，
扫描二维码关注公众号，回复：
10413389 查看本文章
//5.返回#city的所有子节点
var btn05Ele = document.getElementById("btn05");
btn05Ele.onclick = function(){
var allid = document.getElementById('city').childNodes
// alert(document.getElementById('city').childNodes.length)
for(i=0; i<allid.length;i++){
alert(allid[i].textContent)
}
};有很多【出一个例子】：
6，
//6.返回#phone的第一个子节点
var btn06Ele = document.getElementById("btn06");
btn06Ele.onclick = function(){
let phonel = document.getElementById('phone').firstElementChild;
alert(phonel.innerHTML)
};
7,
//7.返回#bj的父节点
var btn07Ele = document.getElementById("btn07");
btn07Ele.onclick = function(){
let pnode = document.getElementById('bj').parentNode;
alert(pnode.innerHTML)
};
8,
//8.返回#android的前一个兄弟节点
var btn08Ele = document.getElementById("btn08");
btn08Ele.onclick = function(){
var andobj = document.getElementById('android');
alert(andobj.previousSibling.innerHTML)
};
9，
//9.读取#username的value属性值
var btn09Ele = document.getElementById("btn09");
btn09Ele.onclick = function(){
var userobj = document.getElementById("username");
alert(userobj.value)
};
10，
//10.设置#username的value属性值
var btn10Ele = document.getElementById("btn10");
btn10Ele.onclick = function(){
var userobj = document.getElementById("username");
userobj.value='new value!'
};
11，
//11.返回#bj的文本值
var btn11Ele = document.getElementById("btn11");
btn11Ele.onclick = function(){
var bjobj = document.getElementById('bj');
alert(bjobj.innerText)
/**
*innerHTML:表示获取/设置起始标签和结束标签中的内容
*innerText:表示获取/设置起始标签和结束标签中的文本
*/
};*innerHTML:表示获取/设置起始标签和结束标签中的内容【会包括标签】
*innerText:表示获取/设置起始标签和结束标签中的文本【仅仅会留下文本】
做出对比：
innerText：
innerHTML：
整体代码！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
window.onload = function(){
//1.查找#bj节点
document.getElementById('btn01').onclick = function () {
var biObj = document.getElementById("bj")
alert(biObj.innerHTML)
}
//2.查找所有li节点
var btn02Ele = document.getElementById("btn02");
btn02Ele.onclick = function(){
var lis = document.getElementsByTagName('li')
alert(lis.length)
};
//3.查找name=gender的所有节点
var btn03Ele = document.getElementById("btn03");
btn03Ele.onclick = function(){
var nameg = document.getElementsByName('gender')
alert(nameg.length)
};
//4.查找#city下所有li节点
var btn04Ele = document.getElementById("btn04");
btn04Ele.onclick = function(){
var ls = document.getElementById('city').getElementsByTagName('li')
alert(ls.length)
};
//5.返回#city的所有子节点
var btn05Ele = document.getElementById("btn05");
btn05Ele.onclick = function(){
var allid = document.getElementById('city').childNodes
// alert(document.getElementById('city').childNodes.length)
for(i=0; i<allid.length;i++){
alert(allid[i].textContent)
}
};
//6.返回#phone的第一个子节点
var btn06Ele = document.getElementById("btn06");
btn06Ele.onclick = function(){
let phonel = document.getElementById('phone').firstElementChild;
alert(phonel.innerHTML)
};
//7.返回#bj的父节点
var btn07Ele = document.getElementById("btn07");
btn07Ele.onclick = function(){
let pnode = document.getElementById('bj').parentNode;
alert(pnode.innerHTML)
};
//8.返回#android的前一个兄弟节点
var btn08Ele = document.getElementById("btn08");
btn08Ele.onclick = function(){
var andobj = document.getElementById('android');
alert(andobj.previousSibling.innerHTML)
};
//9.读取#username的value属性值
var btn09Ele = document.getElementById("btn09");
btn09Ele.onclick = function(){
var userobj = document.getElementById("username");
alert(userobj.value)
};
//10.设置#username的value属性值
var btn10Ele = document.getElementById("btn10");
btn10Ele.onclick = function(){
var userobj = document.getElementById("username");
userobj.value='new value!'
};
//11.返回#bj的文本值
var btn11Ele = document.getElementById("btn11");
btn11Ele.onclick = function(){
var bjobj = document.getElementById('bj');
alert(bjobj.innerText)
/**
*innerHTML:表示获取/设置起始标签和结束标签中的内容
*innerText:表示获取/设置起始标签和结束标签中的文本
*/
};
};
</script>
</head>
<body>
<div id="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">
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>
<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>