NodeList.js下载 - NodeList.js源码下载

概述

这是什么：

NodeList.js使得在Nodes Array上使用本机 DOM API就像jQuery一样简单，其优点是它非常小，大约4k 缩小，并且浏览器作为依赖项（这是最有趣的部分） 。

您会注意到的第一件事是我使用$$ ，我选择它来选择DOM Nodes的原因是因为如果您打开开发工具并输入以下内容：

 $$ ( 'div' ) ; // Will return a NodeList

`NodeList.js`用法：

我们将在下面操作`HTML` ：

 < body >
	< div id =" container " class =" cont " >
		< div class =" child " > </ div >
		< div class =" child " > </ div >
		< div class =" child " > </ div >
		< div class =" child " > </ div >
		< div class =" child " > </ div >
		< div class =" child " > </ div >
		< div class =" child " > </ div >
		< div class =" child " > </ div >
		< div class =" child " > </ div >
		< div class =" child " > </ div >
	</ div >
</ body >

让我们从查询`#container`的子级开始：

以下每个都返回一个Array of Nodes （又名我的NodeList ，而不是浏览器的本机NodeList ）

 // Method 1
$$ ( '#container div' ) ;

// Method 2
$$ ( '#container' ) . children ;

// Method 3
$$ ( 'div div' ) ;

如果您传递查询字符串，则可以将第二个参数作为范围传递：

 let container = document . getElementById ( 'container' ) ;
$$ ( 'div' , container ) ;

这相当于：

 // Just this doesn't return my NodeList, but the browser's NodeList
container . querySelectorAll ( 'div' ) ;

您可以将节点作为参数传递：

 $$(document, document.body); // returns NodeList

您还可以传递 1 个节点Array或NodeList或HTMLCollection不会被展平，要展平使用concat() ：

 $$([document, document.body]); // returns NodeList

获取每个`Node`的属性：

您通常会如何做：

 let children = document . getElementsByClassName ( 'child' ) ;

现在您将获得#container子级的属性：

 for ( let i = 0 , l = children . length ; i < l ; i ++ ) {
 	children [ i ] . id ; // ''
	children [ i ] . nodeName ; // 'DIV'
	children [ i ] . className ; // 'child'
}

以下是使用nodeList.js的方法：

 $$ ( '.child' ) . id ; // ['', '' ... x10]
$$ ( '.child' ) . nodeName ; // ['DIV', 'DIV' ... x10]
$$ ( '.child' ) . className ; // ['child', 'child' ... x10]

因此，您将像使用单个Node一样读取每个属性:)

请注意它如何返回属性值的Array ，这意味着您可以通过index选择它们并对它们使用任何Array Methods ，您将在到达循环部分时看到。

在每个`node`上设置属性：

让我们继续使用children变量，这就是设置children属性的方法：

 for ( let i = 0 , l = children . length ; i < l ; i ++ ) {
    children [ i ] . className = 'containerChild' ;
    children [ i ] . textContent = 'This is some text' ;
}

以下是使用NodeList.js的方法：

 $$ ( '.child' ) . className = 'containerChild' ;
$$ ( '.child' ) . textContent = 'This is some text' ;

在每个`node`上调用方法：

仍然使用children变量：

让我们向每个节点添加一个事件侦听器，尽管event delegation是最好的，但是为了这个示例：

 for ( let i = 0 , l = children . length ; i < l ; i ++ ) {
	children [ i ] . addEventListener ( 'click' , function ( ) {
    	console . log ( this , 'was clicked' ) ;
    } ) ;
}

以下是使用NodeList.js的方法：

 $$ ( '.child' ) . addEventListener ( 'click' , function ( ) {
	console . log ( this , 'was clicked' ) ;
} ) ;

很酷吧？您可以使用任何Native DOM method ：

让我们设置一些属性：

 $$ ( '.child' ) . setAttribute ( 'class' , 'child div' ) ;

// For setting the class you could just do:
$$ ( '.child' ) . className = 'child div' ;

单击元素：

 $$ ( '.child' ) . click ( ) ;

删除元素：

 $$ ( '.child' ) . remove ( ) ;

我想您已经明白了：每个Node/Element继承的任何Native DOM Method都可以在NodeList上调用，并且它将在每个元素上调用。

顺便说一句：在单个Node上调用时通常返回undefined的所有DOM方法将返回相同的NodeList以允许方法链接。就像setAttribute()一样。

循环播放

使用 for 循环和ES6 for-of ：

作为示例，我们将仅从DOM中删除节点：

 let nodes = $$ ( '.child' ) ;
for ( let i = 0 , l = nodes . length ; i < l ; i ++ ) {
	nodes [ i ] . remove ( ) ;
}

for ( let node of nodes ) {
	node . remove ( ) ;
}

使用forEach ：

 // Removes all Nodes and returns same the NodeList to allow method chaining
$$ ( '.child' ) . forEach ( function ( node ) {
	node . remove ( ) ;
} ) ;

// But Just do:
$$ ( '.child' ) . remove ( ) ;

循环遍历属性：

 // Returns Array of style objects (CSSStyleDeclaration)
let styles = $$ ( '.child' ) . style ;

for ( let i = 0 , l = styles . length ; i < l ; i ++ ) {
	styles [ i ] . color = 'red' ;
}

for ( let style of styles ) {
	style . color = 'red' ;
}

styles . forEach ( function ( style ) {
	style . color = 'red' ;
} ) ;

// OR loop through the nodes themselves
let nodes = $$ ( '.child' ) ;

for ( let i = 0 , l = nodes . length ; i < l ; i ++ ) {
	nodes [ i ] . style . color = 'red' ;
}

for ( let node of nodes ) {
	node . style . color = 'red' ;
}

nodes . forEach ( function ( node ) {
	node . style . color = 'red' ;
} ) ;

数组方法

片

 // Returns NodeList containing first Node
$$ ( '.child' ) . slice ( 0 , 1 ) ;

地图

映射很容易，只需像在单个节点上一样获取属性即可

 // Returns an Array of the id of each Node in the NodeList
$$ ( '#container' ) . id ;

// No need for
$$ ( '#container' ) . map ( function ( element ) {
	return element . id ;
} ) ;

// Map() Checks if Array is fully populated with nodes so returns a NodeList populated with firstChld nodes
$$ ( '#container div' ) . map ( function ( div ) {
	return div . firstChild ;
} ) ;

// Maps the firstChild node and removes it, and returns the NodeList of firstChild Nodes
$$ ( '#container' ) . map ( function ( div ) {
	return div . firstChild ;
} ) . remove ( ) ;

// Or:
$$ ( '#container' ) . firstChild . remove ( ) ;

筛选

 // Filter out the #container div
$$ ( 'div' ) . filter ( function ( div ) {
	return ! div . matches ( '#container' ) ;
} ) ;

减少

我想不出在 NodeList 上使用 Reduce 的更好示例（但这是可能的）

 let unique = $$ ( 'div' ) . reduce ( function ( set , div ) {
	set . add ( div . parentElement ) ;
	return set ;
} , new Set ( ) ) ;

还有reduceRight()

康卡特

以下concat()方法都返回一个新的串联NodeList （不影响调用concat()的NodeList ）

 let divs = $$ ( 'div' ) ;

// Method 1 passing a Node
let divsAndBody = divs . concat ( document . body ) ;

// Method 2 passing an Array of Nodes
let divsAndBody = divs . concat ( [ document . body ] ) ;

// Method 3 passing a NodeList
let divsAndBody = divs . concat ( $$ ( 'body' ) ) ;

// Method 4 passing an Array of NodeList
let divsAndBody = divs . concat ( [ $$ ( 'body' ) ] ) ;

// Method 5 passing multiple Nodes as arguments
let divsAndBodyAndHTML = divs . concat ( document . body , document . documentHTML ) ;

// Method 6 passing multiple Arrays of Nodes as arguments
let divsAndBodyAndHTML = divs . concat ( [ document . body ] , [ document . documentHTML ] ) ;

// Method 7 passing multiple Arrays of NodeList as are arguments
let divsAndBodyAndHTML = divs . concat ( [ $$ ( 'body' ) ] , [ $$ ( 'html' ) ] ) ;

Concat()是递归的，因此您可以传递任意深度的Array 。

现在，如果您传递的任何内容不是Node 、 NodeList 、 HTMLCollections 、 Array或深层Array of Arrays ，且包含Node 、 NodeList 、 HTMLCollections 、 Array以外的内容，则会抛出Error 。

推

 let divs = $$ ( 'div' ) ;

// Pushes the document.body element, and returns the same NodeList to allow method chaining.
divs . push ( document . body ) ;

流行音乐

 let divs = $$ ( 'div' ) ;

// Removes last Node in the NodeList and returns a NodeList of the removed Nodes
divs . pop ( ) ;

pop()接受一个可选参数，表示要POP 的Nodes数量

 // Removes last 2 Nodes in the NodeList and returns a NodeList of the removed Nodes
divs . pop ( 2 ) ;

转移

 let divs = $$ ( 'div' ) ;

// Removes first Node in the NodeList and returns a NodeList of the removed Nodes
divs . shift ( ) ;

shift()还带有一个可选参数，表示要SHIFT 的节Nodes

 // Removes first 2 Nodes in the NodeList and returns a NodeList of the removed Nodes
divs . shift ( 2 ) ;

取消移位

 let divs = $$ ( 'div' ) ;

// Inserts/unshifts the document.body into the beginning of the NodeList and returns the same NodeList to allow method chaining.
divs . unshift ( document . body ) ;

拼接

让我们用 document.body 替换第一个元素 #container

 let divs = $$ ( 'div' ) ;

// Removes the first Element, inserts document.body in its place and returns a NodeList of the spliced Nodes
divs . splice ( 0 , 1 , document . body ) ;

种类

 let divs = $$ ( '.child' ) ;

// Gives each div a data-index attribute
divs . forEach ( function ( div , index ) {
	div . dataset . index = index ;
} ) ;

// Reverse the NodeList and returns the same NodeList
divs . sort ( function ( div1 , div2 ) {
	return div2 . dataset . index - div1 . dataset . index ;
} ) ;

撤销

 // Returns the same NodeList, but reversed
$$ ( 'div' ) . reverse ( ) ;

加入

我没有为NodeLists添加join方法，因为它在实际的节点上没有用处：

 // Returns "[object HTMLDivElement], [object HTMLDivElement] ..."
$$ ( '.child' ) . join ( ) ;

因此，您在映射属性时仍然可以使用它：

 // Returns "child,child,child,child,child,child,child,child,child,child"
$$ ( '.child' ) . className . join ( ) ;

包括

 // Returns true if passed Node is included in the NodeList
$$ ( 'body' ) . includes ( document . body ) ;

寻找

 // Returns body element: <body>
$$ ( 'body' ) . find ( function ( el ) {
	return el === el ;
} ) ;

查找索引

 // Returns 0
$$ ( 'body' ) . findIndex ( function ( el ) {
	return el === el ;
} ) ;

将来可能会有与Array.prototype的名称相同的DOM方法，或者您可能只想将NodeList转换为Array因此您可以将其用作本机Array ：

`asArray`属性

 $$ ( 'body' ) . asArray ; // returns Array

$$ ( 'body' ) . asArray . forEach ( function ( ) { ... } ) ; // uses native Array method therefore you cannot chain

好吧，现在如何处理具有独特属性的元素。与HTMLAnchorElement(s)一样，它们具有href属性，该属性不是从HTMLElement继承的。本示例中没有HTMLAnchorElements ，但您将如何处理它。

特殊方法

得到

 // Returns undefined because it's a unique property that every element does not inherit
$$ ( 'a' ) . href

// Returns an Array of href values
$$ ( 'a' ) . get ( 'href' ) ;

Get()也可以用于属性Array ：

 // Returns an Array of the value of each node.style.color
$$ ( '.child' ) . style . get ( 'color' ) ;

放

 // Sets the href property of each Node in NodeList
$$ ( 'a' ) . set ( 'href' , 'https://www.example.com/' ) ;

set()只会在属性未定义的Nodes上设置属性：

 $$ ( 'div, a' ) . set ( 'href' , 'https://www.example.com/' ) ;

href只会在<a>元素上设置，而不会在<div>上设置

set()也可以用于属性Array ：

 // Sets each element's color to red and returns the Array of styles back
$$ ( '.child' ) . style . set ( 'color' , 'red' ) ;

您还可以设置多个属性：

 $$ ( '.child' ) . set ( {
 textContent : 'Hello World' ,
 className : 'class1 class2'
} ) ;

与映射属性相同：

 $$ ( '.child' ) . style . set ( {
 color : 'red' ,
 background : 'black'
} ) ;

请记住，您可以链接：

 $$ ( '.child' ) . set ( {
 textContent : 'Hello World' ,
 className : 'class1 class2'
} ) . style . set ( {
 color : 'red' ,
 background : 'black'
} ) ;

称呼

有些方法对于某些元素来说是独特的。这就是您调用这些方法的方式：

 $$ ( 'video' ) . call ( 'pause' ) ;

或者您可以循环遍历元素并调用方法

传递参数怎么样：

 // Returns Array of `CanvasRenderingContext2D`
$$ ( 'canvas' ) . call ( 'getContext' , '2d' ) ;

如果对任何元素调用的方法返回某些内容，则将从call()返回这些返回项目的Array ，否则将返回NodeList以允许方法链接。

项目方法

浏览器的本机item(index)方法与NodeList[index]相同，但在我的方法中，它返回该Node作为我的NodeList （如果您了解jQuery它与 jQuery 的eq()方法相同）

 // returns the <html> element
$$ ( 'html, body' ) [ 0 ] ;

// returns my NodeList [<html>]
$$ ( 'html, body' ) . item ( 0 ) ;

这样您就可以继续使用我的 NodeList 的相同属性/方法，而不必slice出一个Node

`owner`财产：

所有所有者属性所做的就是返回属性映射的NodeList ：

 var elms = $$ ( '.child' ) ;
elms . style . owner === elms ; // true

所以我可以做各种各样的事情：

请记住映射style返回CSSStyleDeclarations Array

 $$ ( '.child' ) . style ;

这将为您返回映射style的NodeList ：

 var childs  = $$ ( '.child' ) ;
childs . style . owner === childs ; // true

如果你了解jQuery它与它的prevObj属性相同

添加您自己的方法：

 $$ . NL . myMethod = function ( ) {
	// You'll have to write your own loop here if you want to call this on each Node or use:
	this . forEach ( function ( node ) {
		// do something with each node
	} ) ;
}