<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
定义一个函数，专门用来为指定元素绑定单击响应函数
参数：
idStr 绑定单击响应函数的对象的id属性值
fun 事件的回调函数，当单击元素时，该函数将会被触发
*/
function myClick(idStr,fun){
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
window.onload = function () {
// ----------------------------按钮 1----------------------------------------------------------
// 为id为btn01的按钮绑定一个单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
// alert("hello");
// 查找#bj节点
var bj = document.getElementById("bj");
// 打印bj
// innerHTML 通过这个属性可以获取到元素内部的html代码
console.log("bj.innerHTML: " + bj.innerHTML);
// alert(bj.innerHTML);
};
// ----------------------------按钮 2----------------------------------------------------------
// 为id为btn02的按钮绑定一个单击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function () {
//查找所有li的节点
// getElementByTagName()可以根据标签名来获取一组元素节点对象
// 这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
// 即使查询到的元素只有一个，也会封装到数组中返回
var lis = document.getElementsByTagName("li");
// 打印lis
// alert(lis.length);//li的长度：11
// 变量lis
for (var i = 0; i < lis.length; i++) {
console.log("lis[i].innerHTML: " + lis[i].innerHTML);
}
};
// ----------------------------按钮 3----------------------------------------------------------
//为id为btn03的按钮绑定一个单击响应函数
var btn03 = document.getElementById("btn03");
btn03.onclick = function () {
// 查找name=gender的所有节点
var inputs = document.getElementsByName("gender");
// alert(inputs.length);
for (var i = 0; i < inputs.length; i++) {
/*
innerHTML用于获取元素内部的HTML代码的
对于自结束标签，这个属性没意义
*/
/*
如果需要读取元素节点属性，
直接使用元素.属性名
例子：元素.id 元素.name 元素.value
注意：class属性不能采用这种方式，
读取clss属性是需要使用元素.className
*/
console.log("inputs : " + inputs[i].value);
}
// }
};
// ----------------------------按钮4:查找#city下所有li节点--------------------------------------------------------
// 为id为btn04的按钮绑定一个单击响应函数
var btn04=document.getElementById("btn04");
btn04.onclick=function(){
var city=document.getElementById("city");//获取id为city的元素
// 查找#city下所有li节点
var lis = city.getElementsByTagName("li");
// console.log(lis.length);
for(var i=0;i<lis.length;i++){
console.log(lis[i].innerHTML);
}
};
// ----------------------------按钮5:返回#city的所有节点--------------------------------------------------------
// 为id为btn05的按钮绑定一个单击响应函数
var btn05=document.getElementById("btn05");
btn05.onclick=function(){
// 获取id为city的节点
var city=document.getElementById("city");
// 返回#city的所有节点
/*
childNodes属性会获取包括包括文本节点在呢的所有节点
根据DOM标签标签间空白也会当成文本节点
注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
所以该属性在IE8中会返回4个子元素而其他浏览器是9个
*/
var cns=city.childNodes;
// console.log(cns.length);
// for(var i=0; i<cns.length;i++){
// console.log(cns[i]);
// }
/*children属性可以获取当前元素的所有子元素*/
var cns2=city.children;
console.log(cns2.length);
};
// ----------------------------按钮6:返回#phone的第一个子节点----------------------------------------------------
var btn06=document.getElementById("btn06");
btn06.onclick=function(){
var phone=document.getElementById("phone");
// phone.childNodes[0];
// firstChild可以获取到当前元素的第一个子节点(包括空白文本节点)
var first=phone.firstChild;
// firstElementChild可以获取当前元素的第一个子元素
// firstElementChild不支持IE8及以下的浏览器，如果需要兼容她们尽量不要使用
// first=phone.firstElementChild;
console.log(first.innerHTML);
};
// ----------------------------按钮7: 返回#bj的父节点-------------------------------------------------------------
myClick("btn07",function(){
// 获取id为bj的节点
var bj=document.getElementById("bj");
// 返回#bj的父节点
var pn=bj.parentNode;
// console.log(pn.innerHTML);
/* innerText
-该属性可以获取到元素内部的文本内容
它和innerHTML类似们不同的是它会自动关机将html去掉
*/
console.log(pn.innerText);
}
);
// ----------------------------按钮8: 返回#android的前一个兄弟节点-------------------------------------------------
myClick("btn08",function(){
var and=document.getElementById("android");
// 返回#android的前一个兄弟节点（也可能获取到空白的文本）
var pre=and.previousSibling;
// console.log(pre.innerHTML);
// previousElementSibling获取前一个兄弟元素，IE8及以下不支持
// var ps=and.previousElementSibling;
console.log(pre);
}
);
// ----------------------------按钮9: 读取#username的value属性值-------------------------------------------------
myClick("btn09", function () {
// 获取id为username的元素
var um=document.getElementById("username");
//读取um的value属性值
// 文本框的value属性值，就是文本框中填写的内容
console.log(um.value);
}
);
// ----------------------------按钮10: 设置#username的value属性值-------------------------------------------------
myClick("btn10", function () {
var um = document.getElementById("username");
um.value="今天的天气真不错~~~~~~";
}
);
// ----------------------------按钮11: 返回#bj的文本值------------------------------------------------------------
myClick("btn11", function () {
var bj=document.getElementById("bj");
// console.log(bj.innerHTML);
// console.log(bj.innerText);
/* // 获取bj中的文本节点
var fc=bj.firstChild;
console.log(fc.nodeValue); */
console.log(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="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 id="btn01"><button>查找#bj节点</button></div>
<div id="btn02"><button>查找所有li节点</button></div>
<div id="btn03"><button>查找name=gender的所有节点</button></div>
<div id="btn04"><button>查找#city下所有li节点</button></div>
<div id="btn05"><button>返回#city的所有节点</button></div>
<div id="btn06"><button>返回#phone的第一个子节点</button></div>
<div id="btn07"><button>返回#bj的父节点</button></div>
<div id="btn08"><button>返回#android的前一个兄弟节点</button></div>
<div id="btn09"><button>读取#username的value属性值</button></div>
<div id="btn10"><button>设置#username的value属性值</button></div>
<div id="btn11"><button>返回#bj的文本值</button></div>
</div>
</body>
</html>