DOM查询练习
目标：
- 掌握CSS样式的书写；
- 掌握按照id name tagname三种查询方法，针对document对象和结点
- 了解结点的属性：
childNodes 属性，获取当前节点的所有子节点
firstChild 属性，获取当前节点的第一个子节点
lastChild属性，获取当前节点的最后一个子节点
parentNode 属性，获取当前节点的父节点
nextSibling属性，获取当前节点的下一个节点 (兄弟节点)
previousSibling 属性，获取当前节点的上一个节点 (兄弟节点)
className 用于获取或设置标签的 class 属性值
innerHTML 属性，表示获取/设置起始标签和结束标签中的内容
innerText 属性，表示获取/设置起始标签和结束标签中的文本
代码界面如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-2021-01-13</title>
<!--定义样式-->
<style type="text/css">
body {
width: 800px;
margin-left: auto;
margin-right: auto;
} /*margin：使body排版自动设置偏左偏右,处于适当位置*/
button {
width: 300px;
margin-bottom: 20px;
} /*使下面的按钮与上面的按钮20个像素位置*/
#btnList {
float: left; /* margin_left:0px*/
} /*左对齐，不和已有内容部分重叠，选择当前最左的位置，margin_left也是*/
#total {
width: 450px;
float:left;
}/* #的是序号选择器 */
ul {
list-style-type: none;
margin: 0;
padding: 0;
}/*margin 外边界 padding 内边界*/
li{
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
background-color: #99ff99;
float:left;
}
.inner{
width:400px;
border-style: solid;
border-width: 1px;
margin-bottom: 10px;
padding: 10px;
float: left;
}/* .的是类选择器 */
</style>
<!--JS部分-->
<script type="text/javascript">
window.onload=function () {
//和前面的例子不同，以前是在外面写onclock函数，现在是在window.onload函数中写各自id的onclick函数
//1.查找 #bj 节点 //静态注册 //动态注册
var btnObj=document.getElementById("btn01"); //先对应按钮
btnObj.onclick=function (){
//再定义按钮的onclick函数
var bjObj=document.getElementById("bj");
alert(bjObj.innerText); //输出标签中的内容
}
//2.查找所有 li 节点
document.getElementById("btn02").onclick=function (){
var LiObjs=document.getElementsByTagName("li");
alert(LiObjs.length);
for (var i=0;i<LiObjs.length;++i){
alert(LiObjs[i].innerText);
}
}
//3.查找 name=gender 的所有节点
document.getElementById("btn03").onclick=function (){
var genders=document.getElementsByName("gender");
alert(genders.length);
for (var i=0;i<genders.length;++i){
alert(genders[i].value); //这里就不能用innerText来显示了
}
}
//4.查找#city 下所有 li 节点，需要在2的基础上进行变形，先找到city节点，再往下找
document.getElementById("btn04").onclick=function (){
var LiObjs=document.getElementById("city").getElementsByTagName("li");
alert(LiObjs.length);
for (var i=0;i<LiObjs.length;++i){
alert(LiObjs[i].innerText);
}
}
//5.返回#city 的所有子节点，节点的属性：childNodes属性，获得当前节点的所有子节点
document.getElementById("btn05").onclick=function (){
var subcity=document.getElementById("city").childNodes;
alert(subcity.length);
for (var i=0;i<subcity.length;++i){
alert(subcity[i].innerText); //操作的时候具体看看这个结果是什么！！和你想象的有出:回车 空格都会算作一个节点
}
}
//6.返回#phone 的第一个子节点 ,用firstChild属性
document.getElementById("btn06").onclick=function (){
var fs=document.getElementById("phone").firstChild;//为了避免得到的第一个子节点是回车或者空格，
alert(fs.innerText); // 看我们下面body中Idw为phone对应的书写形式
}
//7.返回#bj 的父节点，用parentNode属性
document.getElementById("btn07").onclick=function (){
var pn=document.getElementById("bj").parentNode;
alert(pn.innerText);
alert(pn.innerHTML); //比较二者的不同,是否保持HTML代码 还是只输出文本内容
}
//8.返回#android 的兄弟节点，previousSibling属性，前一个兄弟节点；nextSibling属性，当前节点的后一个兄弟节点。
document.getElementById("btn08").onclick=function (){
var android=document.getElementById("android");
alert(android.previousSibling.innerText);
alert(android.nextSibling.innerText);
}
//9.读取#username 的 value 属性值
document.getElementById("btn09").onclick=function (){
alert(document.getElementById("username").value);
}
//10.设置#username 的 value 属性值
document.getElementById("btn10").onclick=function (){
document.getElementById("username").value="陆亿行2021-01-14"
}
//11.返回#bj 的文本值
document.getElementById("btn11").onclick=function (){
alert(document.getElementById("bj").innerText);
}
}
</script>
</head>
<body>
<div id="total">
<div id="分支一" 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 id="apple">IOS</li><li id="android">Android</li><li id="windows">Windows Phone</li>
</ul> <!-- 为了避免得到的兄弟节点不是回车 空格 -->
</div>
<div id="分支二" 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>
<!-- #代指id，#bj是指id==bj -->
</div>
</body>
</html>