|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
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帖子,请订阅 专辑☞( 传送门)( 不喜欢更要订阅 ) |
评分
-
查看全部评分
|