javascript &dom学习（二）

获取元素节点的子节点
通过具体的元素节点调用
getElementByTagName():
方法，返回当前节点的指定标签名后代节点
childNodes:
属性，表示当前节点的所有子节点
firstChild：
属性，表示当前节点的第一个子节点
lastChild：
属性，表示当前节点的最后一个子节点

例子：

<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>

这时要返回#city 的所有节点
//首先为id为btn04 的按钮绑定一个单击响应函数
var btn04=document.getElementById("btn04");
btn04.onclick=function()
{
//获取id 为city的元素
var city=document.getElementById("city");
//查找#city 下的所有节点
var lis=city.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
alert(lis[i].innerHTML)；

}

}

   //返回#city 的所有子节点
//为id 为btn05的按钮绑定一个单击响应函数
var btn05=document.getElementById("btn05");
btn05.onclick=function(){
//获取id 为city的节点
var city=document.getElementById("city");
   //childNodes属性会获取包括文本节点在内的所有节点
   //根据 dom 标签，标签中的空白也会当成是文本
   //但是需要注意的是在IE8 以下的浏览器中，不会将空白文本当成子节点，所以该属性在IE8 中会返回4 个子元素而在别的浏览器中式返回9个
   var cns=city.childNodes;
   for(var i=0;i<cns.length;i++)
   {
      alert(cns[i]);
}
};

children 属性可以获取当前元素的所有子元素

var cns2=city.children;
alert(cns2.length);//这个更加符合我们的需求，也就是空格我们不再返回了

//返回#phone 的第一个子节点
为id为btn06 的按钮来帮顶一个单击响应函数
var btn06=document.getElementById("btn06");
btn06.onlick=function(){
//获取id 为phone 的元素
var phone =document.getElementById("phone");
//返回phone的第一个子节点
//firstChild可以获取到当前元素的第一个子节点(包括空白文本节点)
var fir=phone.firstElementChild;
//firstElementChild 可以获取当前元素的第一个子元素（也就是没有空格的情况）
//firstElementChild 不支持IE8 及以下的浏览器，如果要兼容的他们尽量不要使用
alert(fir);
};

本文地址：https://blog.csdn.net/yrhlyyouknow/article/details/107372817