NodeList.js
1.0.0
NodeList.js 사용하면 Nodes Array 에서 기본 DOM API를 jQuery 만큼 쉽게 사용할 수 있으며 약 4k로 최소화 되고 브라우저가 종속성이라는 이점이 있습니다 (가장 흥미로운 부분입니다) .
가장 먼저 눈에 띄는 것은 내가 $$ 사용하고 있다는 것입니다. DOM Nodes 선택하기 위해 이것을 선택한 이유는 개발자 도구를 열고 다음을 입력하기 때문입니다.
$$ ( 'div' ) ; // Will return a NodeListNodeList.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 아닌 my 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 Will not be flattened를 전달하여 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 또는 Node , NodeList , HTMLCollections 이외의 것을 포함하는 Array of Arrays 이 아닌 것을 전달하면 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 ) ; #container가 될 첫 번째 요소를 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 ) ; 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) 와 마찬가지로 HTMLElement 에서 상속되지 않은 href 속성이 있습니다. 이 예에는 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' ) ; 요소 중 하나에서 호출된 메소드가 무언가를 반환하는 경우 해당 반환된 항목의 Array call() 에서 반환됩니다. 그렇지 않으면 메소드 연결을 허용하기 위해 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 ) ; 이는 하나의 Node slice 하는 대신 내 NodeList의 동일한 속성/메서드를 계속 사용할 수 있도록 하기 위한 것입니다.
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
} ) ;
}| 브라우저 | 버전 |
|---|---|
| 파이어폭스 | 6+ |
| 원정 여행 | 5.0.5+ |
| 크롬 | 6+ |
| 즉 | 9+ |
| 오페라 | 11세 이상 |
주의: 내 라이브러리는 실행 중인 브라우저에 종속된다는 점을 알아야 합니다. (이건 정말 대단합니다. 따라서 브라우저가 새 속성/메서드로 DOM 을 업데이트할 때 자동으로 업데이트됩니다.) 의미: hidden 속성이 브라우저의 라이브러리에 존재하지 않는다고 가정해 보겠습니다. 할 수 없는 DOM API: $$('.child').hidden = true;
