[].forEach.call

曾看到过一行非常有意思的代码：

[].forEach.call($$("*"),function(a){
    a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})

放到浏览器里执行之后，页面上的所有元素都会加上一个随机颜色的边框。

而这行代码的原理便是先选取页面上所有的元素，然后通过继承数组的foreach方法，遍历所有的Dom节点，从而使得每个dom节点都加上了边框。

前几天在项目中刚好遇到了类似的需求，我需要拿到页面中所有的元素，然后通过计算高度，对他们进行分页。由于通过childNodes获取到的NodeList不仅包含Dom，还包含文本注释及其他内容，而list本身并不具备数组的相关方法。

所以想要对NodeList进行筛选，就用到了这样的一个函数：

getHtmlNode(html) {
  return [].find.call(html.childNodes, node => node.nodeType === 1);
},

也是通过继承数组的find方法，找寻到第一个我需要的Dom节点。

至于nodeType的类型，可以参考：HTML DOM nodeType 属性

节点类型	描述	子节点
1	Element	代表元素	Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference
2	Attr	代表属性	Text, EntityReference
3	Text	代表元素或属性中的文本内容。	None
4	CDATASection	代表文档中的 CDATA 部分（不会由解析器解析的文本）。	None
5	EntityReference	代表实体引用。	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
6	Entity	代表实体。	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
7	ProcessingInstruction	代表处理指令。	None
8	Comment	代表注释。	None
9	Document	代表整个文档（DOM 树的根节点）。	Element, ProcessingInstruction, Comment, DocumentType
10	DocumentType	向为文档定义的实体提供接口	None
11	DocumentFragment	代表轻量级的 Document 对象，能够容纳文档的某个部分	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
12	Notation	代表 DTD 中声明的符号。	None