内容:
- 主要内容:
- childNodes属性的使用
- getElementsByTagName方法的使用
- 利用以上方法获取ul子标签(li)的数量
- 附加内容:
- NULL
运行效果图:
1、内容主界面效果:
2、F12开发者模式Console效果图:
代码片段:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>黑马第68讲代码编辑</title>
</head>
<body>
<ul id="ulid">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<script>
//获取ul下面的所有子标签(子元素)
//获取id为dlid的标签
var ulid = document.getElementById("ulid");
//获取ulid下面的子标签
var lis = ulid.childNodes;//childNodes属性可获得ul子标签的数量
console.log("获取ulid对象的子标签数值,lis对象的值为::"+lis.length);/**通过ulid.childNodes,lis.length的方式获取值在不同的浏览器
下会有不同的结果,说明这个代码的兼容性比较差*/
var lis1 = ulid.getElementsByTagName("li");//getElementsByTagName方法可获得ul子标签的数量
console.log("获取ulid对象的子标签数值,lis1对象的值为::"+lis1.length);/**通过getElementsByTagName方法获取值是唯一有效的方式,
兼容性更好,最终结果为3*/
/**
getElementsByTagName方法属于Documnet对象的方法,在Element对象中属于一种特殊用法
*/
</script>
</body>
</html>
知识点:
- 列表对象可通过childNodes属性获取列表项的个数;
- 列表对象可通过getElementsByTagName(“li”)属性获取列表项的个数;
- getElementsByTagName方法属于Documnet对象的方法,非Element对象的方法,但在Element对象中可以使用。
注意事项:
1、部分需要在内或后;<!因为Html代码是浏览器解释执行的,执行顺序是从上到下进行执行!>
2、如果将部分放在中,inputx对象获取不了MyboxText这个文本框,最终导致代码出错,无法执行;
总结:
1、childNodes属性与getElementsByTagName方法都可以获得ul子标签li的数量值,前者的兼容性较差,后者兼容性强,推荐使用第种方法;
2、getElementsByTagName方法属于Documnet对象的方法,在Element对象中属于一种特殊用法,该方法可以在Element对象当中调用。
备注:文章存在一些不足之处,希望大家能指出,谢谢!