Namespace $.dom.NodeList
Holds the DOM NodeList methods, which allow the manipulation of
multiple nodes in a single step.
Defined in: core-dom.js.
| Constructor Attributes | Constructor Name and Description |
|---|---|
|
Holds the DOM NodeList methods, which allow the manipulation of multiple
nodes in a single step.
|
| Method Attributes | Method Name and Description |
|---|---|
| <static> |
$.dom.NodeList.addClass(token)
Add the token to the class list of each element in the current
NodeList.
|
| <static> |
$.dom.NodeList.appendChild(child)
Insert a new node as the last child into each element from the current
NodeList.
|
| <static> |
$.dom.NodeList.appendTo(target)
Append all the nodes in the current NodeList to the target node.
|
| <static> |
$.dom.NodeList.children()
Create a new array containing the list of child elements of each item in
the current NodeList.
|
| <static> |
$.dom.NodeList.empty()
Remove all the child nodes from each element in the current NodeList.
|
| <static> |
$.dom.NodeList.every(callback, thisObject)
Check if the callback function returns true for every node in
the current NodeList.
|
| <static> |
$.dom.NodeList.filter(callback, thisObject)
Filter the current NodeList using the callback function.
|
| <static> |
$.dom.NodeList.forEach(callback, thisObject)
Execute the callback function for each node in the current
NodeList.
|
| <static> |
$.dom.NodeList.hasAttribute(attr)
Check if an attribute is defined for all the elements in the current
NodeList.
|
| <static> |
$.dom.NodeList.hasAttributeNS(ns, attr)
Check if a namespaced attribute is defined for all the elements in the
current NodeList.
|
| <static> |
$.dom.NodeList.hasClass(token)
Check if all the elements in the current NodeList have the token
in their list of class names.
|
| <static> |
$.dom.NodeList.insertAfter(ref)
Insert all the nodes in the current NodeList after a reference element.
|
| <static> |
$.dom.NodeList.insertBefore(ref)
Insert all the nodes in the current NodeList before a reference element.
|
| <static> |
$.dom.NodeList.map(callback, thisObject)
Create a new array with the same length as the current NodeList using the
values returned by the callback function.
|
| <static> |
$.dom.NodeList.prependChild(child)
Insert a new node as the first child into each element from the current
NodeList.
|
| <static> |
$.dom.NodeList.prependTo(target)
Prepend all the nodes in the current NodeList to the target
node.
|
| <static> |
$.dom.NodeList.reduce(callback, initialValue)
Apply the callback function to two values in the current
NodeList, from left to right, simultaneously, for the purpose of reducing
the NodeList to a single value.
|
| <static> |
$.dom.NodeList.reduceRight(callback, initialValue)
Apply the callback function to two values from the current
NodeList, from right to left, simultaneously, for the purpose of reducing
the NodeList to a single value.
|
| <static> |
$.dom.NodeList.removeAttribute(attr)
Remove an attribute from all the elements in the current NodeList.
|
| <static> |
$.dom.NodeList.removeAttributeNS(ns, attr)
Remove a namespaced attribute from all the elements in the current
NodeList.
|
| <static> |
$.dom.NodeList.removeClass(token)
Remove the token from the class list of each element in the
current NodeList.
|
| <static> |
$.dom.NodeList.removeFirstChild()
Remove the first child from each element in the current NodeList.
|
| <static> |
$.dom.NodeList.removeLastChild()
Remove the last child from each element in the current NodeList.
|
| <static> |
$.dom.NodeList.setAttribute(attr, val)
Set the value of an attribute, for each element in the current NodeList.
|
| <static> |
$.dom.NodeList.setAttributeNS(ns, attr, val)
Set the value of a namespaced attribute, for each element in the current
NodeList.
|
| <static> |
$.dom.NodeList.slice(begin, end)
Extract a section of the current NodeList and return it.
|
| <static> |
$.dom.NodeList.some(callback, thisObject)
Check if the callback function returns true for at least one
node in the current NodeList.
|
| <static> |
$.dom.NodeList.style(property, value)
Get/set the style for all the elements in the current NodeList.
|
| <static> |
$.dom.NodeList.toArray()
Convert the current NodeList to an array.
|
| <static> |
$.dom.NodeList.toggleClass(token)
Toggle the presence of token in the class list of each element
in the current NodeList.
|
| <static> |
$.dom.NodeList.wrapAll(wrapper)
Wrap all the nodes from the current NodeList inside a single
wrapper.
|
| <static> |
$.dom.NodeList.wrapEach(wrapper)
Wrap each node from the current NodeList inside the given
wrapper.
|
| <static> |
$.dom.NodeList.wrapInner(wrapper)
Wrap the content of the nodes from the current NodeList inside the given
wrapper.
|
By default, the global NodeList.prototype object is extended to contain all the methods defined in this namespace.
These methods are also used for extending the global HTMLCollection.prototype object.
All of these methods use their this object. As such, you need to pass the correct this object.
In the examples provided for each method we will assume that the objects
defined are already extended. Thus code like
element.childNodes.wrap('<p>') can be written
directly.
// DOM elements have the .childNodes property object which holds
// the list of child nodes. This object is an instance of NodeList. By
// extending the NodeList.prototype you can do the following:
var new_child = document.createElement('p');
document.body.childNodes.appendChild(new_child);
// The above code appends a clone of the new_child into each child
// node of the document body.
// As expected, you can use any of the methods defined in this namespace.
- Requires:
- $.js.Array
- See:
- $.dom.Node
- $.dom.Element
This method takes a single token, no spaces allowed.
document.body.childNodes.addClass('test');
- Parameters:
- {String} token
- The token to add to the list of class names, for each element in the current NodeList.
- Throws:
- {DOMException.INVALID_CHARACTER_ERR|Error}
- If the token contains a space character.
Given a node, this method clones it for every element in the current NodeList. The clone is then appended as the last child into each element.
// Given a DOM tree like:<body> <ul> <li>test 1.1</li> <li>test 1.2</li> </ul> <ol> <li>test 2.1</li> <li>test 2.2</li> </ol> </body>// You can do:var elem = document.createElement('li'); elem.className = 'test';// Append the element to the document.body child nodes.document.body.childNodes.appendChild(elem);// The body would then serialize to something like:<body> <ul> <li>test 1.1</li> <li>test 1.2</li> <li class="test"></li> </ul> <ol> <li>test 2.1</li> <li>test 2.2</li> <li class="test"></li> </ol> </body>
- Parameters:
- {Node} child
- The node to append as a child.
- Returns:
- {Array} An array containing the inserted child nodes.
// Given a DOM tree like:<body> <div> <p>test a</p> <p>test b</p> </div> <p>Test 1</p> <p>Test 2</p> </body>// You can do the following:var div = document.body.firstElementChild;// Move the <div> child nodes into the body element.div.childNodes.appendTo(document.body);// Now the body would serialize to something like:<body> <div></div> <p>Test 1</p> <p>Test 2</p> <p>test a</p> <p>test b</p> </body>
- Parameters:
- {Node} target
- The target node where to append all of the nodes from the current NodeList.
- Throws:
- {TypeError}
- If target is not an instance of Node.
- Returns:
- {NodeList} The child nodes of the target node.
(
target.childNodes)
// Given a DOM tree like:<body> <ul> <li>test 1.1</li> <li>test 1.2</li> </ul> <ol> <li>test 2.1</li> <li>test 2.2</li> </ol> </body>// You can do:var elems = document.body.childNodes.children();// Now elems is an array having four elements: the <li> // nodes from the two body child nodes, the <ul> and the <ol>.
- Returns:
- {Array} The array containing the child elements of each item in the current NodeList.
- Returns:
- {Array} The array returned contains references to the removed nodes.
- Parameters:
- {Function} callback
- {Object} thisObject Optional
- Throws:
- {TypeError}
- If callback is not a function.
- Returns:
- {Boolean} False is returned if the callback returns false once. Otherwise, this method returns true.
- Requires:
- $.js.Array.every
- See:
- $.js.Array.every for more details and examples
- Parameters:
- {Function} callback
- {Object} thisObject Optional
- Throws:
- {TypeError}
- If callback is not a function.
- Returns:
- {Array} The new array contains the nodes for which the callback function returned true.
- Requires:
- $.js.Array.filter
- See:
- $.js.Array.filter for more details and examples
- Parameters:
- {Function} callback
- {Object} thisObject Optional
- Throws:
- {TypeError}
- If callback is not a function.
- Requires:
- $.js.Array.forEach
- See:
- $.js.Array.forEach for more details and examples
// Check if the border attribute is set for all the image elements.
var imgs = $('img');
imgs.hasAttribute('border');
- Parameters:
- {String} attr
- The attribute name to be checked.
- See:
- $.dom.NodeList.setAttribute
- $.dom.NodeList.setAttributeNS
- $.dom.NodeList.removeAttribute
- $.dom.NodeList.removeAttributeNS
- $.dom.NodeList.hasAttributeNS
// Check if the border attribute is set for all the image elements.
var imgs = $('img'),
ns = 'http://www.w3.org/1999/xhtml';
imgs.hasAttributeNS(ns, 'border');
- Parameters:
- {String} ns
- The attribute XML namespace.
- {String} attr
- The attribute name to be checked.
- See:
- $.dom.NodeList.setAttribute
- $.dom.NodeList.setAttributeNS
- $.dom.NodeList.removeAttribute
- $.dom.NodeList.removeAttributeNS
- $.dom.NodeList.hasAttribute
This method takes a single token, no spaces allowed.
document.body.childNodes.hasClass('test');
- Parameters:
- {String} token
- The token you want to toggle in the list of class names, for each element in the current NodeList.
- Throws:
- {DOMException.INVALID_CHARACTER_ERR|Error}
- If the token contains a space character.
- Returns:
- {Boolean} This method returns true if all the elements have the token in their class list. Otherwise, false is returned.
The reference element must have a parent element. All the nodes from the current NodeList will be inserted into the parent element. The inserted nodes will be positioned after the reference element.
// Given a DOM tree like:<body> <div> <p>test a</p> <p>test b</p> </div> <p id="test1">Test 1</p> <p>Test 2</p> </body>// You can do the following:var div = document.body.firstElementChild, test1 = $('#test1');// Move the <div> child nodes after test1.div.childNodes.insertAfter(test1);// Now the body would serialize to something like:<body> <div></div> <p id="test1">Test 1</p> <p>test a</p> <p>test b</p> <p>Test 2</p> </body>
- Parameters:
- {Element} ref
- The reference element.
- Throws:
- {TypeError}
- If ref is not an element node.
- {ReferenceError}
- If ref.parentNode is not an element node.
- Returns:
- {NodeList} The NodeList containing the child nodes of the
reference parent element.
(
ref.parentNode.childNodes)
The reference element must have a parent element. All the nodes from the current NodeList will be inserted into the parent element. The inserted nodes will be positioned before the reference element.
// Given a DOM tree like:<body> <div> <p>test a</p> <p>test b</p> </div> <p id="test1">Test 1</p> <p>Test 2</p> </body>// You can do the following:var div = document.body.firstElementChild, test1 = $('#test1');// Move the <div> child nodes before test1.div.childNodes.insertBefore(test1);// Now the body would serialize to something like:<body> <div></div> <p>test a</p> <p>test b</p> <p id="test1">Test 1</p> <p>Test 2</p> </body>
- Parameters:
- {Element} ref
- The reference element.
- Throws:
- {TypeError}
- If ref is not an element node.
- {ReferenceError}
- If ref.parentNode is not an element node.
- Returns:
- {NodeList} The NodeList containing the child nodes of the
reference parent element.
(
ref.parentNode.childNodes)
- Parameters:
- {Function} callback
- {Object} thisObject Optional
- Throws:
- {TypeError}
- If callback is not a function.
- Returns:
- {Boolean} The new array has the same length, but the values are those returned by the callback function.
- Requires:
- $.js.Array.map
- See:
- $.js.Array.map for more details and examples
Given a node, this method clones it for every element in the current NodeList. The clone is then inserted as the first child into each element.
// Given a DOM tree like:<body> <ul> <li>test 1.1</li> <li>test 1.2</li> </ul> <ol> <li>test 2.1</li> <li>test 2.2</li> </ol> </body>// You can do:var elem = document.createElement('li'); elem.className = 'test';// Prepend the element to the document.body child nodes.document.body.childNodes.prependChild(elem);// The body would then serialize to something like:<body> <ul> <li class="test"></li> <li>test 1.1</li> <li>test 1.2</li> </ul> <ol> <li class="test"></li> <li>test 2.1</li> <li>test 2.2</li> </ol> </body>
- Parameters:
- {Node} child
- The node to prepend as a child.
- Returns:
- {Array} An array containing the inserted child nodes.
// Given a DOM tree like:<body> <div> <p>test a</p> <p>test b</p> </div> <p>Test 1</p> <p>Test 2</p> </body>// You can do the following:var div = document.body.firstElementChild;// Move the <div> child nodes into the body element.div.childNodes.prependTo(document.body);// Now the body would serialize to something like:<body> <p>test a</p> <p>test b</p> <div></div> <p>Test 1</p> <p>Test 2</p> </body>
- Parameters:
- {Node} target
- The target node where to prepend all of the nodes from the current NodeList.
- Throws:
- {TypeError}
- If target is not an instance of Node.
- Returns:
- {NodeList} The child nodes of the target node.
(
target.childNodes)
- Parameters:
- {Function} callback
- initialValue Optional
- Throws:
- {TypeError}
- If callback is not a function.
- Returns:
- The result of the last callback function invocation.
- Requires:
- $.js.Array.reduce
- See:
- $.js.Array.reduce for more details and examples
- $.dom.NodeList.reduceRight
- Parameters:
- {Function} callback
- initialValue Optional
- Throws:
- {TypeError}
- If callback is not a function.
- Returns:
- The result of the last callback function invocation.
- Requires:
- $.js.Array.reduceRight
- See:
- $.js.Array.reduceRight for more details and examples
- $.dom.NodeList.reduce
// Remove the border attribute from all the images in the document.
var imgs = $('img');
imgs.removeAttribute('border');
- Parameters:
- {String} attr
- The attribute name to be removed.
- See:
- $.dom.NodeList.setAttribute
- $.dom.NodeList.setAttributeNS
- $.dom.NodeList.removeAttributeNS
- $.dom.NodeList.hasAttribute
- $.dom.NodeList.hasAttributeNS
// Remove the border attribute from all the images in the document.
var imgs = $('img'),
ns = 'http://www.w3.org/1999/xhtml';
imgs.removeAttributeNS(ns, 'border');
- Parameters:
- {String} ns
- The attribute XML namespace.
- {String} attr
- The attribute name to be removed.
- See:
- $.dom.NodeList.setAttribute
- $.dom.NodeList.setAttributeNS
- $.dom.NodeList.removeAttribute
- $.dom.NodeList.hasAttribute
- $.dom.NodeList.hasAttributeNS
This method takes a single token, no spaces allowed.
document.body.childNodes.removeClass('test');
- Parameters:
- {String} token
- The token you want removed from the list of class names, for each element in the current NodeList.
- Throws:
- {DOMException.INVALID_CHARACTER_ERR|Error}
- If the token contains a space character.
- Returns:
- {Array} The array returned contains references to the removed nodes.
- Returns:
- {Array} The array returned contains references to the removed nodes.
// Set the border attribute for all images in the document.
var imgs = $('img');
imgs.setAttribute('border', 0);
- Parameters:
- {String} attr
- The attribute name.
- {String} val
- The attribute value you want to set.
- See:
- $.dom.NodeList.setAttributeNS
- $.dom.NodeList.removeAttribute
- $.dom.NodeList.removeAttributeNS
- $.dom.NodeList.hasAttribute
- $.dom.NodeList.hasAttributeNS
// Set the border attribute for all images in the document.
var imgs = $('img'),
ns = 'http://www.w3.org/1999/xhtml';
imgs.setAttributeNS(ns, 'border', 0);
- Parameters:
- {String} ns
- The attribute XML namespace.
- {String} attr
- The attribute name.
- {String} val
- The attribute value you want to set.
- See:
- $.dom.NodeList.setAttribute
- $.dom.NodeList.removeAttribute
- $.dom.NodeList.removeAttributeNS
- $.dom.NodeList.hasAttribute
- $.dom.NodeList.hasAttributeNS
- Parameters:
- {Number} begin
- {Number} end Optional, Default: this.length
- Throws:
- {TypeError}
- If begin is not a number, or if it is a negative number.
- {TypeError}
- If end is provided, but it is not a number.
- Returns:
- {Array} The new array returned contains all the nodes starting from the begin index (including it) up to the end index (excluding it).
- Requires:
- $.js.Array.slice
- See:
- $.js.Array.slice for more details and examples
- Parameters:
- {Function} callback
- {Object} thisObject Optional
- Throws:
- {TypeError}
- If callback is not a function.
- Returns:
- {Boolean} True is returned if the callback returns true once. Otherwise, this method returns false.
- Requires:
- $.js.Array.some
- See:
- $.js.Array.some for more details and examples
If the property argument is a string, but the value is undefined, then this method finds the first element child in the current NodeList. The computed style of property is returned.
If the property and the value arguments are both strings, then this method changes the style property to value. This is done for all the elements in the current NodeList.
Similarly, if the property argument is an object, then all the values and properties in the object are used for changing the styles for all the elements in the current NodeList.
- Parameters:
- {String|Object} property
- The style property name to get/set (if the argument is a string), or the list of properties to set (if the argument is an object).
- {String} value Optional
- The value you want to set for the given property.
- Throws:
- {TypeError}
- If the property argument is not a string, nor an object.
- Returns:
- {String|undefined} If the property argument is a string and if the value argument is undefined, then this method returns the computed style of the given property. Otherwise, this method does not return anything.
- See:
- $.dom.getStyle
Each NodeList item becomes an array element. The array has the same length as the NodeList object.
The returned array is a static list. If the NodeList changes, the array does not.
- Returns:
- {Array} The current NodeList converted to an array, having the same length.
- See:
- $.js.Array
This method takes a single token, no spaces allowed.
For each element, it is checked if the token is found in the list of class names. If yes, then the token is removed. If not, then the token is added.
document.body.childNodes.toggleClass('test');
- Parameters:
- {String} token
- The token you want to toggle in the list of class names, for each element in the current NodeList.
- Throws:
- {DOMException.INVALID_CHARACTER_ERR|Error}
- If the token contains a space character.
This method moves all the nodes from the current NodeList into the given wrapper. The effect of this action is that the current NodeList will only hold one child node (the wrapper) after this method executes.
// Given a DOM tree like the following:<body> <p>test 1</p> <p>test 2</p> </body>// You can do:document.body.childNodes.wrapAll('<div>');// The body would then serialize to:<body> <div> <p>test 1</p> <p>test 2</p> </div> </body>
- Parameters:
- {Element|String} wrapper
- The element or the string to use for wrapping all the nodes.
- Returns:
- {NodeList} The list of wrapped child nodes.
(
wrapper.childNodes)
- See:
- $.dom.Element.wrap for more details and examples
This method clones the wrapper for each node in the current NodeList. Then each node is inserted into its own wrapper clone. The effect of this action is that the current NodeList will only hold the cloned wrapper nodes themselves, after this method executes. The length of the NodeList does not change.
// Given a DOM tree like the following:<body> <ul> <p>test 1</p> <p>test 2</p> </ul> </body>// You can do:$('body > ul')[0].childNodes.wrapEach('<li>');// The body would then serialize to:<body> <ul> <li><p>test 1</p></li> <li><p>test 2</p></li> </ul> </body>
- Parameters:
- {Element|String} wrapper
- The element or the string to use for wrapping each node.
- See:
- $.dom.Element.wrap for more details and examples
This method wraps the content of the nodes from the current NodeList into clones of the given wrapper.
// Given a DOM tree like the following:<body> <p>test 1</p> <p>test 2</p> </body>// You can do:document.body.childNodes.wrapInner('<strong>');// The body would then serialize to:<body> <p><strong>test 1</strong></p> <p><strong>test 2</strong></p> </body>
- Parameters:
- {Element|String} wrapper
- The element or the string to use for wrapping the content of all the nodes in the current NodeList.
- See:
- $.dom.Element.wrap for more details and examples