on
Italy
- Get link
- X
- Other Apps
addEventListener
instead of attatchEvent
.NodeList
is according to MDN:NodeList
and then check if the NodeList
is empty. If it is empty then you have yourself a live NodeList
(which is just a bad idea).NodeList
objects .forEach
:var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
// do something
});
// Error: nodes.forEach is not a function
So you have to do:var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
var node = nodes[i];
// do something
}
Or are even left with using a “hack”:[].forEach.call(document.querySelectorAll('div'), function(node) {
// do something
});
The browser’s native NodeList
only has the one method: item. This returns a node from a NodeList
by index. It is completely useless when we can access that node just like we would with an array (using array[index]
):var nodes = document.querySelectorAll('div');
nodes.item(0) === nodes[0]; // true
That’s where NodeList.js comes in — to make manipulating the DOM with the browser’s native APIs as easy as it is with jQuery, but for only 4k gzipped.for
loops). NodeList
) as if it were a single node. This gives you much more functionality than the browser’s native NodeList
objects.$$(selector); // returns my NodeList
This method uses querySelectorAll(selector)
under the hood.<button></button>
<button></button>
<button></button>
Let’s change the text of each button to “Click Me”:var buttons = document.querySelectorAll('button'); // returns browser's useless NodeList
for(var i = 0, l = buttons.length; i < l; i++) {
buttons[i].textContent = 'Click Me';
}
$('button').text('Click Me');
$$('button').textContent = 'Click Me';
Here we see that NodeList.js can effectively treat a NodeList
as a single node. That is to say, we have reference to a NodeList
and we just set its textContent
property to “Click Me”. NodeList.js will then do this for each node in the NodeList
. Neat, huh?NodeList
:$$('button').set('textContent', 'Click Me');
Now let’s add a click
event listener to each button: var buttons = document.querySelectorAll('button'); // returns browser's useless NodeList
for(var i = 0, l = buttons.length; i < l; i++) {
buttons[i].addEventListener('click', function() {
this.classList.add('clicked');
});
}
$('button').on('click', function() {
$(this).addClass('click');
// or mix jQuery with native using `classList`:
this.classList.add('clicked');
});
$$('button').addEventListener('click', function() {
this.classList.add('clicked');
});
Ok, so the jQuery on
method is fairly nice. My library uses the browser’s Native DOM APIs (hence addEventListener
), but it doesn’t stop us creating an alias for the method:$$.NL.on = $$.NL.addEventListener;
$$('button').on('click', function() {
this.classList.add('clicked');
});
Nice! And this demonstrates exactly the way we would add our own methods:$$.NL.myNewMethod = function() {
// loop through each node with a for loop or use forEach:
this.forEach(function(element, index, nodeList) {...}
// where `this` is the NodeList being manipulated
}
NodeList
(an array of nodes). var nodes = $$('body');
nodes.push(document.documentElement);
nodes.push(1); // Uncaught Error: Passed arguments must be a Node
So both push
and unshift
return the NodeList
to allow method chaining, meaning it’s not the same as JavaScript’s native Array#push
, or Array#unshift
methods, which accept anything and return the new length of the Array
. If we did want the length of the NodeList
we just use the length
property.Array
methods, do alter the NodeList
.Node
NodeList
(both the browser’s native one, and NodeList.js version)HTMLCollection
Array of Nodes
Array of NodeList
Array of HTMLCollection
concat
is a recursive method,
therefore those arrays can be as deep as we like and will be flattened.
However if any of the elements in the passed arrays are not of Node
, NodeList
, or HTMLCollection
it will throw an Error
.concat
does return a new NodeList
just like javascript’s Array#concat
method does.pop
or shift
from the NodeList
. Unlike JavaScript’s native Array#pop
or Array#shift
where will always pop
or shift
one element from the array regardless of what is passed as an argument.NodeList
if each mapped value is a Node
, or an array of the mapped values if not.NodeList
.Array.prototype
if a method is added to the Array.prototype
after NodeList.js is loaded, it won’t be inherited.owner
, which is the equivalent of jQuery’s prevObject
property.get
and set
Methods:href
property on an anchor tag). This is why $$('a').href
will return undefined
— because it’s a property that not every element in the NodeList
inherits. This is how we would use the get method to access those properties:$$('a').get('href'); // returns array of href values
The set method can be used to set those properties for each element:$$('a').set('href', 'https://sitepoint.com/');
set
also returns the NodeList
to allow method chaining. We can use this on things like textContent
(both are equivalent):$$('button').textContent = 'Click Me';
$$('button').set('textContent', 'Click Me'); // returns NodeList so you can method chain
We can also set multiple properties in one call:$$('button').set({
textContent: 'Click Me',
onclick: function() {...}
});
And all of the above can be done with arbitrary properties, such as style
:$$('button').style; // this returns an `Array` of `CSSStyleDeclaration`
$$('button').style.set('color', 'white');
$$('button').style.set({
color: 'white',
background: 'lightblue'
});
call
Methodpause
on a video element):$$('video').call('pause'); // returns NodeList back to allow Method Chaining
item
MethodNodeList
containing only the node of the passed index:$$('button').item(1); // returns NodeList containing the single Node at index 1
owner
PropertyprevObject
. var btns = $$('button');
btns.style.owner === btns; // true
btns.style
returns an array of styles and owner
gives you back the NodeList
which style
was mapped from.Browser | Version |
---|---|
FireFox | 6+ |
Safari | 5.0.5+ |
Chrome | 6+ |
IE | 9+ |
Opera | 11.6+ |
NodeList
object!
Comments
Post a Comment