0 1 4 1 ★ 获取元素之getElementsByTagName |【获取】

不二如是 · 发表于 2017-6-14 21:58:17

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

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帖子，请订阅专辑☞（传送门）（不喜欢更要订阅

）

alltolove · 发表于 2017-6-15 06:56:41

H5新语法一般是用

document.querySelectorAll(selectors);

复制代码

这个了，用的css3选择器非常方便

凌乱大帅比 · 发表于 2018-8-31 11:09:41

突然就感觉jq的$是多么伟大

a211827754 · 发表于 2018-9-15 09:34:51

报告老师你确定
alert("typeof document.getElementsByTagName("li")[i]");
输出的不是字符串？

peanutfs13 · 发表于 2023-9-11 19:09:10

“getElementsByTabgName，允许使用通配符（*），然后就能知道整个文档中的元素个数”，捉个虫，多了一个b

peanutfs13 · 发表于 2023-9-12 10:46:06

好像那个alert一直都没弹出来，就是正常显示的字符串

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 1 4 1 ★ 获取元素之getElementsByTagName |【获取】

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐: