什么Array.prototype.slice.call（）及wrapper.querySelectorAll（）呢？ [英] What does Array.prototype.slice.call() & wrapper.querySelectorAll() do?

问题描述

我发现下面锥一个js插件

I found following cone in a js plugin

var container = document.getElementById( 'vs-container' ),
wrapper = container.querySelector( 'div.vs-wrapper' ),
sections = Array.prototype.slice.call( wrapper.querySelectorAll( 'section' ) ),
links = Array.prototype.slice.call( container.querySelectorAll( 'header.vs-header > ul.vs-nav > li' ) );

我不明白什么呢 Array.prototype.slice.call（）＆安培; wrapper.querySelectorAll（'部分'）做上述code。我从来没见过他们面前，所以我想知道他们怎么做。

I couldn't understand what does Array.prototype.slice.call() & wrapper.querySelectorAll( 'section' ) do in above code. I've not seen them before so I would like to know what they actually do.

推荐答案

querySelectorAll 是接受一个CSS选择器，并返回一个静态<$ C $的DOM元素的方法C>节点列表匹配的元素。

querySelectorAll is a method on DOM elements that accepts a CSS selector and returns a static NodeList of matching elements.

Array.prototype.slice.call 是把一种方式是节点列表（这就像一个数组，但没有从 Array.prototype ）的方法，成为一个真正的数组。

Array.prototype.slice.call is one way to turn that NodeList (which acts like an array, but doesn’t have the methods from Array.prototype) into a real array.

给它这个页面上的尝试在浏览器的控制台！

Give it a try on this page in your browser’s console!

> var headers = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
undefined
> headers.map(function(el) { return el.textContent; })
TypeError: Object #<NodeList> has no method 'map'
> headers = Array.prototype.slice.call(headers);
…
> headers.map(function(el) { return el.textContent; })
["What does Array.prototype.slice.call() & wrapper.querySelectorAll() do?", …]

这篇关于什么Array.prototype.slice.call（）及wrapper.querySelectorAll（）呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！