DOM元素节点
各个方法
childNodes属性会获取包括文本节点在呢的所有节点,根据DOM标签标签间空白也会当成文本节点
firstChild可以获取到当前元素的第一个子节点，包括空白文本。
firstElementChild获取当前元素的第一个子元素,不支持IE8及以下的浏览器，如果需要兼容他们
尽量不要使用
previousSibling获取前一个兄弟节点，有可能获取到空白文本
previousElementSibling获取前一个兄弟元素，IE8及以下不支持
nextSibling该属性表示当前节点的下一个节点（其后的节点与当前节点同属一个级别）；如果其后
没有与其同级的节点，则返回null
文本框的value属性值就是文本框中填写的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
text-align: center;
width: 12.5rem;
height: 200px;
margin:10px auto;
padding: 10px;
background-color: #FFFF00;
}
#box_btn{
width: 6.25rem;
height: 200px;
margin: 0 auto;
background-color: aliceblue;
text-align: center;
}
#box_btn .button{
width: 100px;
height: 40px;
}
</style>
</head>
<body>
<div id="box">
<p>city</p>
<ul id="city">
<li id="bj">我是第1个孙子</li>
<li>我是第2个孙子</li>
<li>我是第3个孙子</li>
<li>我是第4个孙子</li>
</ul>
</div>
<div id="box_btn">
<button class="button" id="btn1">获取city所有子节点</button>
<button class="button" id="btn2">11</button>
<button class="button" id="btn3">aniu3</button>
</div>
<script type="text/javascript">
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
var city = document.getElementById("city");
var ci2 = city.childNodes;
//childNodes属性会获取包括文本节点在呢的所有节点,根据DOM标签标签间空白也会当成文本节点
//注意:在工E8及以下的浏览器中,不会将空白文本当成子节点，所以该属性在工E8中会返回4个子元素而其他浏览器是9个
//children属性会获取当前元素所有子元素，不包括空白
var ci = city.children;
//alert(ci2.length);
/* ci2.forEach(function(a){
alert(a.innerHTML);
}); */
/* for(var i=0;i<ci2.length;i++){
alert(ci2[i].innerHTML)
} */
console.log(typeof ci);
//原生js获取的DOM集合是一个类数组对象，所以不能直接利用数组的方法
//（例如：forEach，map等），需要进行转换为数组后，才能用数组的方法！
//用Array.from（）方法转换为数组，并用list变量接收
var lis = Array.from(ci);
//用[ ...elems ]方法转化为数组
/* var list = [...ci];
list.forEach(function(s){
console.log(s.innerHTML);
}); */
};
//childNodes属性会获取包括文本节点在呢的所有节点,根据DOM标签标签间空白也会当成文本节点
//firstChild可以获取到当前元素的第一个子节点，包括空白文本。
//firstElementChild获取当前元素的第一个子元素,不支持IE8及以下的浏览器，如果需要兼容他们尽量不要使用
//previousSibling获取前一个兄弟节点，有可能获取到空白文本
//previousElementSibling获取前一个兄弟元素，IE8及以下不支持
//nextSibling该属性表示当前节点的下一个节点（其后的节点与当前节点同属一个级别）；如果其后没有与其同级的节点，则返回null
</script>
<script type="text/javascript">
//有一个按钮就要为这个按钮绑定相应的事件并且查找到该节点，很麻烦，大量重复代码
//下面开始继承程序员的优良传统--懒
/**
* idstr要绑定单击响应函数的对象的id属性值
* fun事件的回调函数，当单击元素时，该函数将会被触发
* */
function myClick(idstr, fun){
var btn = document.getElementById(idstr);
btn.onclick = fun;
}
myClick("btn3",function(){
//获取id为bj的节点
var bj = document.getElementById("bj");
//返回bj的父节点
alert(bj.parentNode.innerText);
/*innerText
-该属性可以获取到元素内部的文本内容
-它和innerHTML类似,不同的是它会自动将htm1去除
*/
})
//文本框的value属性值就是文本框中填写的内容
</script>
</body>
</html>