<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
list-style: none;
}
#main{
border: 1px solid black;
width: 270px;
height: 300px;
float: left;
text-align: center;
}
button{
display: block;
text-align: center;
margin-left:20px ;
margin-top: 10px;
}
p{
display: block;
}
li{
display: block;
background-color: lawngreen;
width: 80px;
margin: 5px ;
float: left;
}
</style>
</head>
<body>
<div id="main">
<p>你想去哪個城市？</p>
<div id="city">
<li id="bj">北京</li>
<li>武漢</li>
<li>杭州</li>
</div>
<br />
<p>你喜歡哪個游戲？</p>
<div id="game">
<li id="rl">紅警</li>
<li>實況</li>
<li>魔獸</li>
</div>
<br />
<p>你用的什么手機？</p>
<div id="phone">
<li>ios</li>
<li id="android">android</li>
<li>windows</li>
</div>
<div>
<input type="radio" name="gander" id="gander" value="male" />
male
<input type="radio" name="gander" id="gander" value="female" />
female
<br />
name:
<input type="text" name="name" id="username" value="wang" />
</div>
</div>
<div id="main">
<button id="btn1">查找#bj節點</button>
<button id="btn2">查找所有li節點</button>
<button id="btn3">查找name=gander的所有節點</button>
<button id="btn4">查找#city的所有li節點</button>
<button id="btn5">返回#city的所有子節點</button>
<button id="btn6">返回#phone的第一個子節點</button>
<button id="btn7">返回#bj的父節點</button>
<button id="btn8">返回#android的前一個兄弟節點</button>
<button id="btn9">返回#username的value值</button>
<button id="btn10">設置#username的value值</button>
<button id="btn11">返回#bj的文本值</button>
</div>
</body>
<script type="text/javascript">
/*
* 發現每次寫每個按鈕獲取和單擊事件太多余，
* 定義一個函數，專門來綁定指定元素的單擊函數
* 傳參：
* idStr：要綁定單擊響應函數的對象id屬性值
* fun：時間的回調函數，單擊觸發事件
*/
function myClick(idStr,fun){
var btn=document.getElementById(idStr);
btn.onclick=fun;
//從第七次開始調用
}
/*
* 獲取元素節點
●通過document對象調用
1. getElementById(
-通過id屬性獲取-個元素節點對象
2. getElementsByTagName()
一通過標簽名獲取一組元素節點對象
3. getElementsByName()
一通過name屬性獲取一組元素節點對象
*/
//1.查找#bj節點
//獲取id為btn1的元素
var btn1=document.getElementById("btn1");
//事件處理
btn1.onclick=function(){
//獲取id為bj的元素
var bj=document.getElementById("bj");
alert(bj.innerHTML);
}
//2.查找所有li節點
var btn2=document.getElementById("btn2");
btn2.onclick=function (){
//getElementsByTagName()方法返回一個類數組對象，
var lis=document.getElementsByTagName("li");
//alert(lis.innerHTML);
//alert(lis.length); //6
//遍歷li元素內部代碼
for(i=0;i<lis.length;i++){
alert(lis[i].innerHTML);
}
}
//3.查找name=gander的所有節點
var btn3=document.getElementById("btn3");
btn3.onclick=function(){
var inputs=document.getElementsByName("gander");
//alert(inputs.length); //2
for (i=0;i<inputs.length;i++) {
//alert(inputs[i].innerHTML); //undefiend
/*innerHTML對自結束的標簽沒意義，
要讀取屬性，元素.屬性名
注意：clas例外，要有className
*/
alert(inputs[i].name);
}
}
/*獲取元素節點的子節點
●通過具體的元素節點調用
1. getElementsByTagName()
-方法,返回當前節點的指定標簽名后代節點
2. childNodes
-屬性,表示當前節點的所有子節點
3. firstChild
-屬性,表示當前節點的第一個子節點
4. lastChild
-屬性,表示當前節點的最后一個子節點
*/
//4.查找#city的所有li節點
var btn4=document.getElementById("btn4");
btn4.onclick=function(){
var city=document.getElementById("city");
var lis=city.getElementsByTagName("li");
//alert(lis.length); //3
for(i=0;i<lis.length;i++){
alert(lis[i].innerHTML);
}
}
//5.返回#city的所有子節點
var btn5=document.getElementById("btn5");
btn5.onclick=function(){
var city=document.getElementById("city");
var cns=city.childNodes;
//alert(cns.length); //7
//childNodes會獲取包括文本節點在內的所有節點，
//DOM標簽間的空白也會當成文本節點
var cns1=city.children; //3 用children屬性獲取子元素跟符合邏輯
console.log(cns1.length);
for(i=0;i<cns.length;i++){
alert(cns[i].innerHTML);
}
}
//6.返回#phone的第一個子節點
var btn6=document.getElementById("btn6");
btn6.onclick=function(){
var phone=document.getElementById("phone");
var lis=city.getElementsByTagName("li");
var fir=phone.firstChild; //獲取第一個子節點，包括空白
// var fir=phone.lastChild;//獲取最后個子節點
alert(fir);
var fir1=phone.firstElementChild; //獲取第一個子元素
alert(fir1);
}
/*獲取父節點和兄弟節點
●通過具體的節點調用
1. parentNode
-屬性,表示當前節點的父節點
2. previousSibling
-屬性,表示當前節點的前一個兄弟節點
3. nextSibling
一屬性,表示當前節點的后一個兄弟節點
*/
//7.返回#bj的父節點
//實參btn7的單擊函數傳遞
myClick("btn7",function(){
var bj=document.getElementById("bj");
var pn=bj.parentNode;//獲取父節點，只會是元素，不用考慮空白文本,
//父類節點唯一的，不會是類數組
alert(pn.innerHTML);//打印下面的包括標簽里的全部內容
console.log(pn.innerText);//打印文本內容，自動去除標簽
});
//8.返回#android的前一個兄弟節點
myClick("btn8",function(){
var and=document.getElementById("android");
var ps=and.previousSibling;//獲取前一個兄弟節點，會獲取空白文本
// var ps=and.nextSibling; //獲取后一個兄弟節點
alert(ps);
var ps1=and.previousElementSibling;//獲取前一個兄弟元素
alert(ps1.innerHTML);
});
//9.返回#username的value值
myClick("btn9",function(){
var um=document.getElementById("username");
//讀取屬性值，元素.屬性
alert(um.value);
});
//10.設置#username的value值
myClick("btn10",function(){
var um=document.getElementById("username");
//改屬性值，元素.屬性=
um.value="wind";
});
//11.返回#bj的文本值
myClick("btn11",function(){
var bj=document.getElementById("bj");
//alert(bj.innerText);
alert(bj.firstChild.nodeValue);
alert(bj.firstChild.nodeName);
});
/*節點的屬性
nodeName nodeType nodeValue
文檔節點 #document 9 null
元素節點 標簽名 1 null
屬性節點 屬性名 2 屬性值
文本節點 #text 3 ★文本內容
*/
</script>
</html>
