原生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.getElementByIddocument.getElementsByTagName区别,可以通过console.log在浏览器控制台里查看。