如何获取页面上的所有的标签元素?排除重复的。

这个问题应该这样比较好:如何统计页面上用了多少HTML标签元素。

这是我在知乎live上看到的问题,后来讨论了这个https://www.zhihu.com/question/53175578

很多人给出了答案,but,我思来想去也觉得很简单啊,写代码的时候发现完全不知如何下笔,还是菜啊- -!

比如我看到了一个回答 new Set($$("*").map(e => e.tagName)).size;是在控制台输出。可以得到总过用了多少html标签元素的个数。

我心想很简单啊,试试写在脚本里,发现错误 xx.map is a not function ,原来我尝试用的document.getElementsByTagName("*");获取的是一个名为HTMLCollection的集合,非真正意义上的数组,需要转换成数组才能使用。

下面是我把集合元素的属性tagName提取出来的方法。

1         var nodelist = document.getElementsByTagName("*");
2         var arr = [];
3         for(var i=0; i<nodelist.length; i++){
4             arr.push(nodelist[i].tagName);
5         }
6         console.log(arr.filter((ele,pos,self) => self.indexOf(ele) == pos));
7         console.log(arr.filter((ele,pos,self) => self.indexOf(ele) == pos).length);
8
9         // console.log(new Set(arr.map(e =>e.tagName)).size);

当然,至于啥性能我是没啥思考啦╮(╯_╰)╭

需要学习得很多,感谢前辈提供的经验!

时间: 2024-10-13 22:45:34

如何获取页面上的所有的标签元素?排除重复的。的相关文章

用JavaScript获取页面上被选中的文字的技巧

这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法.最关键的JavaScript API是: event.selection = window.getSelection(); 这里的selection实际上是个对象,但如果我们使用 .toString()或强行转化成字符串,我们将得到被选中的文字. $(document).ready(function () { $(".contenttext").mouseup(function (e) { var txt;

用IHTMLDocument2接口获取页面上想要的数据,代替正则表达式

原文:用IHTMLDocument2接口获取页面上想要的数据,代替正则表达式 原文发布时间为:2010-07-01 -- 来源于本人的百度文章 [由搬家工具导入] 1. 用 IHTMLDocument2::all 获得所有元素; 2. 用 IHTMLElementCollection::tags 获得标签为 span 的元素; 3. 用 IHTMLElement::className 获得 class 名为 EX 的元素; 4. 用 IHTMLElement::innerText 获得文本。 I

JQuery模拟点击页面上的所有a标签,触发onclick事件

注意: 这种方法需要给所有的a标签加上id属性 <script> $(function () { // 模拟点击页面上的所有a标签,触发onclick事件 $("a").each(function () { document.getElementById(this.id).click(); }) }) </script> 原文地址:https://www.cnblogs.com/daleyzou/p/9500782.html

JS获取页面上所有input

1 for (var i = 0; i < document.getElementsByTagName("input").length; i++) { 2 if (document.getElementsByTagName("input")[i].id.indexOf("tx_ID") > -1) { 3 document.getElementById("hid_SetValue").value += docume

webview 获取网页上的数据

最近做webview,遇到2种需求,一种是在自己服务器上的HTML中获取数据,另一种是通过自己服务器上的HTML中的超链接跳到另一个站点的HTML中,并获取数据. 于是,总结了2种通过webview获取网页上的数据的方式: 第一种:简单点的,直接通过js调java,在调用方法的过程中将数据通过方法的参数传递给Android端,(前提:服务端有对应的faxun对象,而且调用的方法是showImages(String[] imgUrls)). <span style="font-size:18

使用Selenium含蓄等待获取页面元素(附带实际业务需求情景)

Hello,大家好,又到了小猿分享技术的时间了.这回带来的是使用Selenium去网站上获取部分信息并且执行部分操作以及"含蓄"等待元素加载完成以及截取图片和网页刷新机制的技术点. 解释说明:Selenium用于自动化测试,web自动化测试工具集,即使用该模块去模拟手动去网页上点击获取信息,是一个很好的自动化测试模块. 关于selenium模块,其实它的主要目的是进行web自动化测试,获取信息是次要的,主要是为了测试web的性能,这里也只是针对关于在web页面上进行操作. 该模块适用范

JS获取页面元素并修改

//实现代码如下,非常简单<script> (function(){ var ele = document.getElementsByTagName("ul"); //获取页面上所有的ul元素 var target; for(var i in ele){ if("art-list"==ele[i].className){ //找到类名位art-list的ul元素 target = ele[i]; break; } } var li_arr = targe

WebSocket在建立连接时通过@PathParam获取页面传值

最近用Java下使用WebSocket,有一个需求,在页面与Java后台建立连接的时候获取页面上提供的参数,也就是在@OnOpen注解的方法里面获取一次页面的参数,有一个很简单的方法可以获得.即使用@PathParam注解. 第一步: 在被websocket映射的Java类中的注解如下: @ServerEndpoint("/websocket/{relationId}/{userCode}") 其中websocket是映射地址 /{relationId}/{userCode}分别为页面

获取页面内iframe里面的元素

结构直接看图比较直接 这里window.frames获取的是iframe的数组 要记得给iframe加个ID才行 后面的记录会详细讲解 在父窗口获取页面内的iframe 里面的元素window.frames['ifm'].contentWindow.document.getElementById('focus001').style.display="none";