從一個(gè)作業(yè)題開始：一個(gè)頁(yè)面的所用HTML標(biāo)簽種類随闺。
我的做法：
var dom = document.querySelectorAll("*"); //取出所有的標(biāo)簽
var str = []; //建立一個(gè)數(shù)組裝最后的標(biāo)簽
for(var i=0,len=dom.length; i<len;i++){
//去重
if(str.indexOf(dom[i].nodeName) < 0){
str.push(dom[i].nodeName);
}
}
1. 取出所有HTML標(biāo)簽
取出所有的HTML元素仑濒，兩種方式：
getElementsByTagName(" * ");
querySelectorAll(" * ");
用第一種方式取出的HTML標(biāo)簽會(huì)返回一個(gè)HTMLCollection對(duì)象则吟，HTMLCollection對(duì)象提供了一些訪問元素的方法，這不是重點(diǎn)始锚，重點(diǎn)是通過這種方式查詢的是動(dòng)態(tài)的沫换，并不是訪問時(shí)所留下的一個(gè)快照。動(dòng)態(tài)的還有nodeList對(duì)象载城。
在循環(huán)動(dòng)態(tài)DOM時(shí)肌似，在初始化時(shí)就應(yīng)該把長(zhǎng)度緩存下來(lái)，否則诉瓦，每次循環(huán)都會(huì)去訪問DOM川队，如果遇上，在循環(huán)里再添加一點(diǎn)這個(gè)元素睬澡，就會(huì)死循環(huán)了呼寸。
for(var i=0,len = div.length; i<len;i++){
//操作
}
用第二種方式返回的是一個(gè)nodeList實(shí)例，本來(lái)所有nodeList都是基于文檔的實(shí)時(shí)查詢猴贰，但是querySelectorAll是個(gè)例外对雪，他的實(shí)現(xiàn)就是在訪問時(shí)留下的一組快照。
示例：
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script>
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);
結(jié)果：
2. 數(shù)組方法
取出的集合是類數(shù)組米绕，如何把類數(shù)組轉(zhuǎn)換成數(shù)組（可以不用轉(zhuǎn)也可以循環(huán)取出標(biāo)簽值）瑟捣。
數(shù)組轉(zhuǎn)換方法：
Array.prototype.slice.call(dom);//返回一個(gè)新數(shù)組，不會(huì)改變?cè)瓉?lái)數(shù)組栅干。
也可以使用 [].slice.call(dom)
取出標(biāo)簽值：
nodeName 與 tagName.
既然要去標(biāo)簽還是推薦使用tagName迈套。
對(duì)于元素節(jié)點(diǎn)nodeName與tagName保存的始終都是元素的標(biāo)簽名，如果不是元素節(jié)點(diǎn)碱鳞，nodeName返回的就是節(jié)點(diǎn)的類型桑李，tagName則是undefined。
轉(zhuǎn)成數(shù)組后數(shù)組每一項(xiàng)保存的是元素節(jié)點(diǎn)，取出保存的標(biāo)簽值贵白÷示埽可以使用數(shù)組map方法，返回指定函數(shù)調(diào)用結(jié)果組成的數(shù)組禁荒。
Array.prototype.slice.call(dom).map(function(item,index,arr){
//item數(shù)組的每一項(xiàng)
//index數(shù)組下標(biāo)索引
//原數(shù)組
return item.tagName;
})
也可以使用es6的擴(kuò)展運(yùn)算符轉(zhuǎn)數(shù)組[...dom]
ES6數(shù)組的擴(kuò)展
去重：
數(shù)組方法：
indexOf()與lastIndexOf()接收兩個(gè)參數(shù)猬膨，要查找的項(xiàng)和可選的起點(diǎn)索引。
一個(gè)是從前開始查找呛伴，查到第一個(gè)就返回索引勃痴，沒有查到就返回-1.
另一個(gè)是從后開始查詢。
ES6 Set和Map數(shù)據(jù)結(jié)構(gòu)
最終這個(gè)題最簡(jiǎn)單的寫法：
var s = new Set([...document.getElementsByTagName("*")].map(x=>x.tagName))
