<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>untitled Document</title>
<script type="text/javascript">
/*
DOM查询：
通过document对象调用。
1.getElementById() -方法
-通过id属性获取一个元素节点对象
2.getElementsByTagName() -方法
-通过标签名获取一组元素节点对象
3.getElementsByName() -方法
-通过name获取一一组元素节点对象
4.childNodes
-属性，表示当前节点的所有子节点
5.firstChild
-属性，表示当前节点的第一个子节点
6.lastChild
-属性，表示当前节点的最后一个子节点
7.parentNode
-属性，表示当前节点的父节点。
8.previousSibling
-属性，表示当前节点的前一个兄弟节点
9.-nextSibling
-属性，表示当前节点的后一个兄弟节点
* /
/*
为了方便，专门定义一个函数，专门用来为指定元素绑定单击响应函数
参数：idStr 要绑定单击响应函数的对象的ID属性值
fun事件的回调函数，当单击元素时，该函数将会被触发
*/
function myClick(idStr,fun){
var btn=document.getElementById(idStr);
btn.onclick=fun;
}
window.onload=function()
{
var btn01=document.getElementById("btn01");
btn01.onclick=function(){
//查找#bj节点
var bj=document.getElementById("bj");
alert(bj.innerHTML);
};
//为id为btn02的按钮绑定一个单击响应函数
//查找所有li节点
var btn02=document.getElementById("btn02");
btn02.onclick=function(){
var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
alert(lis[i].innerHTML);
}
};
//为btn03的按钮绑定一个单击响应函数
//查找name=gender的所有节点
var btn03=document.getElementById("btn03");
btn03.onclick=function(){
var gender=document.getElementsByName("gander");
for(var i=0;i<gender.length;i++)
{
/*如果需要读取元素节点属性
* 直接使用元素.属性名
*比如：
* 元素.id 元素.name 元素.value
* 注意：class属性不能采用这种方式
* 读取class属性时需要使用元素。className
* 语法如：alert（input[i].className）;
* */
alert(gender[i].value);
/*innerHTML用于获取元素内部的HTML代码
*对于自结束标签，这个属性没有意义，比如input标签
**/
}
};
//查找#city下所有li的节点
//为id为btn04的按钮绑定一个单击响应函数
var btn04=document.getElementById("btn04");
btn04.onclick=function(){
var city=document.getElementById("city");
//查找#city下所有的li节点
var lis=city.getElementsByTagName("li");
for(var i=0;i<lis.length;i++)
{
alert(lis[i].innerHTML);
}
};
var btn05=document.getElementById("btn05");
btn05.onclick=function(){
var city=document.getElementById("city");
var cns2=city.children;
alert(cns2.length);
/*
childNodes属性会获取包括文本节点在内的所有节点
（text也是一个节点）
根据DOM的定义，标签间空白也会被当成文本节点。
注意在IE8及以下的浏览器中，不会将空白文本当成子节点，所以该属性在
IE8中返回4个元素
而其他brower是9个
children可以获取当前元素的所有子元素
不包括文本节点
*/
};
var btn06=document.getElementById("btn06");
btn06.onclick=function(){
//获取id为phone的元素
var phone=document.getElementById("phone");
//返回#phone的第一个子节点
var frist=phone.firstElementChild;
/*firstchild库获取当前元素的第一个子节点（包括空白文本节点）
firstElementChild获取当前元素的第一个子元素
* */
alert(frist.innerHTML);
};
myClick("btn07",function(){
var bj=document.getElementById("bj");
var pr=bj.parentNode;
alert(pr.innerText);
});
myClick("btn08",function () {
var and=document.getElementById("android");
var prv=and.previousSibling;
alert(prv.innerText);
});
myClick("btn09",function () {
//返回#username的value值
var um=document.getElementById("username");
//var namevalue=name.value;
alert(um.value);
});
//设置#username的value值
//var username=document.getElementById("username");
var btn010=document.getElementById("btn010");
btn010.onclick=function(){
var username=document.getElementById("username");
alert(username.value="啊实打实");
};
//或者写成如下代码
/*myClick("btn011",function () {
var bj=document.getElementById("bj");
bj.value="asdasdasd";
});*/
//返回#bj的文本值
var btn011=document.getElementById("btn011");
btn011.onclick=function () {
var bj=document.getElementById("bj");
//var text00=bj.value;
alert(bj.firstChild.nodeValue);
}
};
</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="gander" value="male"/>
Male
<input type="radio" name="gander" value="female"/>
female
<br />
<br />
name:
<input type="text" name="name" id="username" value="abcde">
</div>
</div>
<div id="btnlast">
<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="btn010">设置#username的value属性值</button></div>
<div><button id="btn011">返回#bj的文本值</button></div>
</div>
</body>
</html>
