原生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在浏览器控制台里查看。