马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2017-6-14 22:42 编辑
在0 1 1 9 ★★ BOM与DOM （88-118）| 【总结】入门级别，介绍了getElementsByTagName方法。
现在深入死磕下这个方法。
getElementsByTagName方法返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。
该方法只有一个参数，标签名。语法：document.getElementByTagName("标签名");
在0 1 4 0 介绍的getElementById也是返回一个值，只不过是对象。
而getElementsByTabgName方法返回的是一个对象数组。
千万别搞混了～（我猜说完，就更容易搞混了）
上一个简单的例子：document.getElementsByTagName("li");
这个调用将返回一个对象数组，每个对象分别对应着document对象中的一个列表项元素。
与任何其他的数组一样，我们可以利用length属性查出这个数组里的元素个数。
现在继续在下面这段代码中进行实验：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鱼C工作室</title>
</head>
<body>
<h1>鱼C-Web开发</h1>
<p title="slogan">Change the World By Program</p>
<ul id="class">
<li>HTML5-庖丁解牛</li>
<li class="star">JavaScript-庖丁解牛</li>
<li>PHP&MySQl-庖丁解牛</li>
</ul>
</body>
</html>
★第一步，利用getElementByTagName查找：document.getElementsByTagName("li");
★第二步，利用循环语句，输出上面查找到的内容for(var i = 0 ; i <document.getElementsByTagName("li").length ; i++ )
{
alert("typeof document.getElementsByTagName("li")[i]");
}
★启动程序，看结果，显示3个object
从代码可读性来讲，上面的写法是极其恶心滴·
只需要引入一个变量，即可让代码变的干净漂亮(上述原因，也是变量被发明的原因之一)：var items = document.getElementsByTagName("li");
for(var i = 0 ; i < items.length ; i++)
{
alert(typeof items[i]);
}
getElementsByTabgName，允许使用通配符（*），然后就能知道整个文档中的元素个数。
修改代码：var a = document.getElementsByTagName("*").length;
console.log(typeof a);
console.dir(a);
我想要看看id为class的<ul>，包含了哪些元素怎么办？
在之前咱们讲过getElementById可以用来找到id，再结合上面的通配符，理论上就可以完成任务哈～
上代码：//先找到id，并存储到findId变量中
var findId = document.getElementById("class");
//基于findId，进一步查找其内所有元素
var findLi = findId.getElementsByTagName("*");
//循环输出
for(var i = 0 ; i < findLi.length ; i++)
{
console.log(findLi[i]);
}
这位鱼油，如果喜欢本系列Js帖子，请订阅 专辑☞（ 传送门）（ 不喜欢更要订阅 ） | 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2017-6-14 21:58:17
置顶卡
千斤顶
显身卡
发表于 2017-6-15 06:56:41
