NodeList.js

Ringkasan

Apa ini:

NodeList.js menjadikan penggunaan API DOM Asli pada Array Nodes semudah jQuery dengan manfaatnya yang sangat kecil sekitar 4k yang diperkecil , dan browser sebagai ketergantungan (Itulah bagian yang paling menarik) .

Hal pertama yang akan Anda perhatikan adalah saya menggunakan $$ , alasan saya memilih ini untuk memilih DOM Nodes adalah karena jika Anda membuka devtools dan mengetikkan yang berikut:

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

Penggunaan NodeList.js :

HTML yang akan kami manipulasi sebagai berikut:

 < 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 > 

Mari kita mulai dengan menanyakan anak #container :

Masing-masing berikut mengembalikan Array of Nodes (AKA NodeList saya, bukan NodeList asli browser)

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

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

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

Jika Anda meneruskan string kueri, ada argumen kedua yang bisa Anda sampaikan sebagai cakupan:

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

Yang setara dengan:

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

Anda dapat meneruskan node sebagai argumen:

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

Anda juga dapat meneruskan 1 Array Node atau NodeList atau HTMLCollection Tidak akan diratakan, untuk meratakan gunakan concat() :

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

Mendapatkan properti dari setiap Node :

Cara yang biasa Anda lakukan:

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

Sekarang Anda akan mendapatkan properti pada anak #container :

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

Inilah cara Anda melakukannya dengan nodeList.js :

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

Oleh karena itu, Anda akan membaca setiap properti seperti yang Anda lakukan dengan satu Node :)

Perhatikan bagaimana ia mengembalikan Array nilai properti, artinya Anda dapat memilihnya berdasarkan index dan menggunakan Array Methods apa pun pada properti tersebut, Anda akan melihatnya ketika Anda sampai ke bagian perulangan.

Mengatur properti pada setiap node :

Mari lanjutkan menggunakan variabel children , jadi inilah cara Anda menyetel properti pada children :

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

Inilah cara Anda melakukannya dengan NodeList.js :

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

Memanggil metode pada setiap node :

Masih menggunakan variabel children :

Mari tambahkan pendengar acara ke setiap node, meskipun event delegation adalah yang terbaik, namun demi contoh ini:

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

Inilah cara Anda melakukannya dengan NodeList.js :

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

Sangat keren bukan? Anda dapat menggunakan Native DOM method apa pun :

Mari kita atur beberapa atribut:

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

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

Mengklik elemen:

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

Menghapus elemen:

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

Saya pikir Anda mengerti maksudnya: Native DOM Method apa pun yang diwarisi oleh setiap Node/Element , Anda cukup memanggil NodeList dan itu akan dipanggil pada setiap elemen.

BTW: Semua Metode DOM yang biasanya mengembalikan undefined ketika dipanggil pada satu Node akan mengembalikan NodeList yang sama untuk memungkinkan Metode Chaining. Suka setAttribute() .

Perulangan

Menggunakan for loop dan ES6 for-of :

Kami hanya akan menghapus node dari DOM sebagai contoh:

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

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

Menggunakan forEach :

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

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

Mengulangi properti:

 // 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' ;
} ) ;

Metode Array

Mengiris

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

Peta

Pemetaannya mudah, cukup dapatkan propertinya seperti yang Anda lakukan pada satu Node

 // 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 ( ) ; 

Menyaring

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

Mengurangi

Saya tidak bisa memikirkan contoh yang lebih baik untuk menggunakan Reduce pada NodeList (tapi itu mungkin)

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

Ada juga reduceRight()

pertemuan

Semua metode concat() berikut mengembalikan NodeList gabungan baru (Tidak memengaruhi NodeList tempat concat() dipanggil)

 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() bersifat rekursif sehingga Anda dapat meneruskan Array sedalam yang Anda inginkan.

Sekarang jika Anda meneruskan apa pun yang bukan Node , NodeList , HTMLCollections , Array atau Array of Arrays yang berisi sesuatu selain Node , NodeList , HTMLCollections , Array akan menimbulkan Error .

Dorongan

 let divs = $$ ( 'div' ) ;

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

Pop

 let divs = $$ ( 'div' ) ;

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

pop() mengambil argumen opsional tentang berapa banyak Nodes yang akan POP

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

Menggeser

 let divs = $$ ( 'div' ) ;

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

shift() juga mengambil argumen opsional tentang berapa banyak Nodes yang akan SHIFT

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

Lepaskan pergeseran

 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 ) ; 

Sambatan

Mari kita ganti elemen pertama #container dengan document.body

 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 ) ; 

Menyortir

 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 ;
} ) ; 

Balik

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

Bergabung

Saya tidak memasukkan metode join untuk NodeLists karena tidak ada gunanya pada Node yang sebenarnya:

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

Oleh karena itu Anda masih dapat menggunakannya saat memetakan properti:

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

Termasuk

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

Menemukan

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

Temukan Indeks

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

Mungkin ada metode DOM yang memiliki nama yang sama dengan metode Array.prototype di masa mendatang, atau Anda mungkin hanya ingin mengonversi NodeList menjadi Array sehingga Anda dapat menggunakannya sebagai Array asli :

Properti asArray

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

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

Oke sekarang bagaimana kalau menangani elemen yang memiliki sifat unik. Seperti HTMLAnchorElement(s) mereka memiliki properti href yang tidak diwarisi dari HTMLElement . Tidak ada HTMLAnchorElements dalam contoh ini, tetapi inilah cara Anda menanganinya.

Metode Khusus

Mendapatkan

 // 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() juga dapat digunakan pada Array properti:

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

Mengatur

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

set() hanya akan menyetel properti pada Nodes yang propertinya tidak terdefinisi:

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

href hanya akan disetel pada elemen <a> dan bukan pada <div> s

set() juga dapat digunakan pada Array properti:

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

Anda juga dapat mengatur beberapa properti:

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

Sama dengan properti yang dipetakan:

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

Ingat Anda dapat membuat rantai:

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

Panggilan

Ada metode yang unik untuk elemen tertentu. Beginilah cara Anda memanggil metode tersebut:

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

Atau Anda bisa mengulang elemen dan memanggil metodenya

Bagaimana dengan menyampaikan argumen:

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

Jika metode yang dipanggil pada salah satu elemen mengembalikan sesuatu, Array dari item yang dikembalikan tersebut akan dikembalikan dari call() jika tidak, NodeList akan dikembalikan untuk memungkinkan rangkaian metode.

Metode Barang

Metode item(index) asli browser melakukan hal yang sama dengan NodeList[index] tetapi di metode saya ia mengembalikan Node itu sebagai NodeList saya (Jika Anda tahu jQuery itu sama dengan metode eq() jQuery)

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

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

Ini agar Anda dapat tetap menggunakan properti/metode yang sama dengan NodeList saya, daripada harus slice satu Node

Properti owner :

Yang dilakukan properti pemilik hanyalah mengembalikan NodeList tempat properti tersebut dipetakan:

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

Jadi saya bisa melakukan segala macam hal:

Ingat style pemetaan mengembalikan Array CSSStyleDeclarations

 $$ ( '.child' ) . style ;

Ini akan memberi Anda kembali NodeList yang style dipetakan:

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

Jika Anda tahu jQuery itu sama dengan properti prevObj -nya

Menambahkan Metode Anda Sendiri:

 $$ . 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
	} ) ;
}

Kompatibilitas NodeListJS

Peramban	Versi
FireFox	6+
Safari	5.0.5+
krom	6+
YAITU	9+
Opera	11+

Perhatian: Anda harus menyadari bahwa perpustakaan saya bergantung pada browser yang dijalankannya (yang luar biasa, sehingga secara otomatis diperbarui ketika browser memperbarui DOM dengan properti/metode baru) artinya: katakanlah properti hidden tidak ada di browser DOM API yang tidak dapat Anda lakukan: $$('.child').hidden = true;