原生javascript获取元素的子元素属性Children,兼容IE678

原生javascript Children可以获取元素的子元素集合，且支持兼容IE6、IE7、IE8浏览器，IE9以上浏览器只返回元素节点，IE6、IE7、IE8浏览器会返回元素节点和注释节点，所以建议不要在指定元素中使用注释，以保证兼容性。

提示：Children返回的是子元素集合，根据子元素在元素中出现的先后顺序进行排序，可以使用length属性获取子元素的数量，然后通过序列号(index，起始值为0)访问每个子元素。

HTML代码：

<ul class="nav" id="nav">
	<li><a href="#">网站首页</a></li>
	<li><a href="#">新闻中心</a></li>
	<li><a href="#">产品中心</a></li>
</ul>

javascript代码：

1、document.getElementById

<script>
var obj = document.getElementById('nav').children;
console.log(obj); //通过console.log可以查看返回的子元素集合，在浏览器控制台可以查看HTMLCollection对象的内容
var lng = obj.length; //获取子元素的数量
var first = obj[0].innerText;  //第一个子元素的文本，即获取上面html代码中的“网站首页”
console.log(first);
</script>

2、document.getElementsByClassName

<script>
var obj = document.getElementsByClassName('nav')[0].children;
console.log(obj); //通过console.log可以查看返回的子元素集合，在浏览器控制台可以查看HTMLCollection对象的内容
var lng = obj.length; //获取子元素的数量
var first = obj[0].innerText;  //第一个子元素的文本，即获取上面html代码中的“网站首页”
console.log(first);
</script>

3、document.getElementsByTagName

与document.getElementsByClassName方法一样。

提示：注意document.getElementById和document.getElementsByTagName区别，可以通过console.log在浏览器控制台里查看。