html页面类型转换,取出一个页面的HTML标签种类

从一个作业题开始：一个页面的所用HTML标签种类。

我的做法：

var dom = document.querySelectorAll("*"); //取出所有的标签

var str = []; //建立一个数组装最后的标签

for(var i=0,len=dom.length; i

//去重

if(str.indexOf(dom[i].nodeName) < 0){

str.push(dom[i].nodeName);

}

}

1. 取出所有HTML标签

取出所有的HTML元素，两种方式：

getElementsByTagName(" * ");

querySelectorAll(" * ");

用第一种方式取出的HTML标签会返回一个HTMLCollection对象，HTMLCollection对象提供了一些访问元素的方法，这不是重点，重点是通过这种方式查询的是动态的，并不是访问时所留下的一个快照。动态的还有nodeList对象。

在循环动态DOM时，在初始化时就应该把长度缓存下来，否则，每次循环都会去访问DOM，如果遇上，在循环里再添加一点这个元素，就会死循环了。

for(var i=0,len = div.length; i

//操作

}

用第二种方式返回的是一个nodeList实例，本来所有nodeList都是基于文档的实时查询，但是querySelectorAll是个例外，他的实现就是在访问时留下的一组快照。

示例：

1

2

3

4

var query = document.querySelectorAll("div");

var tag = document.getElementsByTagName("div");

console.log(query);

console.log(tag);

//添加元素

var div = document.createElement("div");

var text = document.createTextNode("5");

div.appendChild(text);

document.body.appendChild(div);

console.log(query);

console.log(tag);

结果：

2. 数组方法

取出的集合是类数组，如何把类数组转换成数组(可以不用转也可以循环取出标签值)。

数组转换方法：

Array.prototype.slice.call(dom);//返回一个新数组，不会改变原来数组。

也可以使用 [].slice.call(dom)

取出标签值：

nodeName 与 tagName.

既然要去标签还是推荐使用tagName。

对于元素节点nodeName与tagName保存的始终都是元素的标签名，如果不是元素节点，nodeName返回的就是节点的类型，tagName则是undefined。

转成数组后数组每一项保存的是元素节点，取出保存的标签值。可以使用数组map方法，返回指定函数调用结果组成的数组。

Array.prototype.slice.call(dom).map(function(item,index,arr){

//item数组的每一项

//index数组下标索引

//原数组

return item.tagName;

})

也可以使用es6的扩展运算符转数组[...dom]

ES6数组的扩展

去重：

数组方法：

indexOf()与lastIndexOf()接收两个参数，要查找的项和可选的起点索引。

一个是从前开始查找，查到第一个就返回索引，没有查到就返回-1.

另一个是从后开始查询。

ES6 Set和Map数据结构

最终这个题最简单的写法：

var s = new Set([...document.getElementsByTagName("*")].map(x=>x.tagName))