#

API Docs for: 3.10.3
Show: Inherited Protected Private Deprecated

# NodeList Class

Defined in: `node/js/nodelist.js:7`
Module: node-core
Parent Module: node

The NodeList class provides a wrapper for manipulating DOM NodeLists. NodeList properties can be accessed via the set/get methods. Use Y.all() to retrieve NodeList instances.

## Constructor

### `NodeList`

(

- `nodes`

)

Defined in `node/js/nodelist.js:7`

#### Parameters:

- `nodes` String | Element | Node | Array

  A selector, DOM element, Node, list of DOM elements, or list of Nodes with which to populate this NodeList.

- Index
- Methods
- Properties

## Item Index

### Methods

- addClass
- after
- append
- appendChild
- clearData
- concat
- destroy
- detach
- detachAll
- each
- empty
- even
- filter
- generateID
- get
- getAttribute
- getAttribute
- getComputedStyle
- getContent deprecated
- getData
- getDOMNodes
- getDOMNodes static
- getHTML
- getStyle
- hasClass
- hide
- indexOf
- insert
- insertBefore
- isEmpty
- item
- modulus
- odd
- on
- once
- onceAfter
- plug
- pop
- prepend
- push
- refresh
- remove
- removeAttribute
- removeClass
- replaceClass
- set
- setAttribute
- setAttribute
- setContent deprecated
- setData
- setHTML
- setStyle
- setStyles
- shift
- show
- size
- slice
- some
- splice
- toFrag
- toggleClass
- toggleView
- transition
- unplug
- unshift
- unwrap
- wrap

### Properties

- _nodes

## Methods

### `addClass`

(

- `className`

)
chainable

Provided by the node-base module.

Defined in `node/js/node-class.js:62`

Adds a class name to each node.

#### Parameters:

- `className` String

  the class name to add to the node's class attribute

### `after`

(

- `type`
- `fn`
- `context`

)
EventHandle

Provided by the node-base module.

Defined in `node/js/node-event.js:164`

Applies an event listener to each Node bound to the NodeList. The handler is called only after all on() handlers are called and the event is not prevented.

#### Parameters:

- `type` String

  The event being listened for

- `fn` Function

  The handler to call when the event fires

- `context` Object

  The context to call the handler with. Default is the NodeList instance.

#### Returns:

EventHandle: A subscription handle capable of detaching that subscription

### `append`

()

Provided by the node-base module.

Defined in `node/js/node-create.js:190`

Called on each Node instance

### `appendChild`

()

Provided by the node-base module.

Defined in `node/js/node-create.js:206`

Called on each Node instance

### `clearData`

(

- `name`

)
chainable

Provided by the node-data module.

Defined in `node/js/node-data.js:160`

Clears data on all Node instances bound to the NodeList.

#### Parameters:

- `name` String

  The name of the field to clear. If no name is given, all data is cleared.

### `concat`

(

- `valueN`

)
NodeList

Defined in `node/js/nodelist-array.js:9`

#### Parameters:

- `valueN` NodeList | Array

  Arrays/NodeLists and/or values to concatenate to the resulting NodeList

#### Returns:

NodeList: A new NodeList comprised of this NodeList joined with the input.

### `destroy`

(

- `recursivePurge`

)

Defined in `node/js/nodelist.js:352`

Called on each Node instance. Nulls internal node references, removes any plugins and event listeners

#### Parameters:

- `recursivePurge` Boolean

  (optional) Whether or not to remove listeners from the node's subtree (default is false)

### `detach`

()

Provided by the node-base module.

Defined in `node/js/node-event.js:201`

Called on each Node instance

### `detachAll`

()

Provided by the node-base module.

Defined in `node/js/node-event.js:209`

### `each`

(

- `fn`
- `context`

)
chainable

Defined in `node/js/nodelist.js:149`

Applies the given function to each Node in the NodeList.

#### Parameters:

- `fn` Function

  The function to apply. It receives 3 arguments: the current node instance, the node's index, and the NodeList instance

- `context` Object

  optional An optional context to apply the function with Default context is the current Node instance

### `empty`

() chainable

Defined in `node/js/nodelist.js:362`

Called on each Node instance. Removes and destroys all of the nodes within the node

### `even`

() NodeList

Defined in `node/js/nodelist.js:262`

Creates a new NodeList containing all nodes at even indices (zero-based index), including zero.

#### Returns:

NodeList: NodeList containing the updated collection

### `filter`

(

- `selector`

)
NodeList

Defined in `node/js/nodelist.js:219`

Filters the NodeList instance down to only nodes matching the given selector.

#### Parameters:

- `selector` String

  The selector to filter against

#### Returns:

NodeList: NodeList containing the updated collection

### `generateID`

() String

Defined in `node/js/node-imports.js:223`

Applies a unique ID to each node if none exists

#### Returns:

String: The existing or generated ID

### `get`

()

Defined in `node/js/nodelist.js:400`

### `getAttribute`

(

- `name`

)
String

Defined in `node/js/node-imports.js:177`

Allows getting attributes on DOM nodes, normalizing in some cases. This passes through to the DOM node, allowing for custom attributes.

#### Parameters:

- `name` String

  The attribute name

#### Returns:

String: The attribute value

### `getAttribute`

(

- `name`

)
String

Provided by the node-base module.

Defined in `node/js/node-attrs.js:106`

Allows getting attributes on DOM nodes, normalizing in some cases. This passes through to the DOM node, allowing for custom attributes.

#### Parameters:

- `name` String

  The attribute name

#### Returns:

String: The attribute value

### `getComputedStyle`

(

- `attr`

)
Array

Provided by the node-style module.

Defined in `node/js/node-style.js:69`

Returns an array of the computed value for each node. Use camelCase (e.g. 'backgroundColor') for multi-word properties.

#### Parameters:

- `attr` String

  The style attribute to retrieve.

#### Returns:

Array: The computed values for each node.

### `getContent`

() deprecated

Provided by the node-base module.

Defined in `node/js/node-create.js:240`

Deprecated: Use getHTML

Called on each Node instance

### `getData`

(

- `name`

)
Array

Provided by the node-data module.

Defined in `node/js/node-data.js:129`

Retrieves arbitrary data stored on each Node instance bound to the NodeList.

#### Parameters:

- `name` String

  Optional name of the data field to retrieve. If no name is given, all data is returned.

#### Returns:

Array: An array containing all of the data for each Node instance. or an object hash of all fields.

### `getDOMNodes`

() Array

Defined in `node/js/nodelist.js:341`

Returns the DOM node bound to the Node instance

#### Returns:

Array:

### `getDOMNodes`

(

- `nodelist`

)
Array static

Defined in `node/js/nodelist.js:50`

Retrieves the DOM nodes bound to a NodeList instance

#### Parameters:

- `nodelist` NodeList

  The NodeList instance

#### Returns:

Array: The array of DOM nodes bound to the NodeList

### `getHTML`

()

Provided by the node-base module.

Defined in `node/js/node-create.js:258`

Called on each Node instance

### `getStyle`

(

- `attr`

)
Array

Provided by the node-style module.

Defined in `node/js/node-style.js:59`

Returns an array of values for each node. Use camelCase (e.g. 'backgroundColor') for multi-word properties.

#### Parameters:

- `attr` String

  The style attribute to retrieve.

#### Returns:

Array: The current values of the style property for the element.

### `hasClass`

(

- `className`

)
Array

Provided by the node-base module.

Defined in `node/js/node-class.js:53`

Determines whether each node has the given className.

#### Parameters:

- `className` String

  the class name to search for

#### Returns:

Array: An array of booleans for each node bound to the NodeList.

### `hide`

(

- `name`
- `config`
- `callback`

)
chainable

Provided by the node-base module.

Defined in `node/js/node-view.js:134`

Hides each node. If the "transition" module is loaded, hide optionally animates the hiding of the node using either the default transition effect ('fadeOut'), or the given named effect.

#### Parameters:

- `name` String

  A named Transition effect to use as the show effect.

- `config` Object

  Options to use with the transition.

- `callback` Function

  An optional function to run after the transition completes.

### `indexOf`

(

- `node`

)
Int

Defined in `node/js/nodelist.js:208`

Returns the index of the node in the NodeList instance or -1 if the node isn't found.

#### Parameters:

- `node` Node | DOMNode

  the node to search for

#### Returns:

Int: the index of the node value or -1 if not found

### `insert`

()

Provided by the node-base module.

Defined in `node/js/node-create.js:198`

Called on each Node instance

### `insertBefore`

()

Provided by the node-base module.

Defined in `node/js/node-create.js:214`

Called on each Node instance

### `isEmpty`

() Boolean

Defined in `node/js/nodelist.js:308`

Determines if the instance is bound to any nodes

#### Returns:

Boolean: Whether or not the NodeList is bound to any nodes

### `item`

(

- `index`

)
Node

Defined in `node/js/nodelist.js:138`

Retrieves the Node instance at the given index.

#### Parameters:

- `index` Number

  The index of the target Node.

#### Returns:

Node: The Node instance at the given index.

### `modulus`

(

- `n`
- `r`

)
NodeList

Defined in `node/js/nodelist.js:231`

Creates a new NodeList containing all nodes at every n indices, where remainder n % index equals r. (zero-based index).

#### Parameters:

- `n` Int

  The offset to use (return every nth node)

- `r` Int

  An optional remainder to use with the modulus operation (defaults to zero)

#### Returns:

NodeList: NodeList containing the updated collection

### `odd`

() NodeList

Defined in `node/js/nodelist.js:252`

Creates a new NodeList containing all nodes at odd indices (zero-based index).

#### Returns:

NodeList: NodeList containing the updated collection

### `on`

(

- `type`
- `fn`
- `[context]`
- `[arg*]`

)
EventHandle

Provided by the node-base module.

Defined in `node/js/node-event.js:101`

Subscribe a callback function for each `Node` in the collection to execute in response to a DOM event.

NOTE: Generally, the `on()` method should be avoided on `NodeLists`, in favor of using event delegation from a parent Node. See the Event user guide for details.

Most DOM events are associated with a preventable default behavior, such as link clicks navigating to a new page. Callbacks are passed a `DOMEventFacade` object as their first argument (usually called `e`) that can be used to prevent this default behavior with `e.preventDefault()`. See the `DOMEventFacade` API for all available properties and methods on the object.

By default, the `this` object will be the `NodeList` that the subscription came from, not the `Node` that received the event. Use `e.currentTarget` to refer to the `Node`.

Returning `false` from a callback is supported as an alternative to calling `e.preventDefault(); e.stopPropagation();`. However, it is recommended to use the event methods.

#### Parameters:

- `type` String

  The name of the event

- `fn` Function

  The callback to execute in response to the event

- `[context]` Object optional

  Override `this` object in callback

- `[arg*]` Any optional

  0..n additional arguments to supply to the subscriber

#### Returns:

EventHandle: A subscription handle capable of detaching that subscription

#### Example:

    Y.all(".sku").on("keydown", function (e) {
        if (e.keyCode === 13) {
            e.preventDefault();

            // Use e.currentTarget to refer to the individual Node
            var item = Y.MyApp.searchInventory( e.currentTarget.get('value') );
            // etc ...
        }
    });

### `once`

(

- `type`
- `fn`
- `context`

)
EventHandle

Provided by the node-base module.

Defined in `node/js/node-event.js:149`

Applies an one-time event listener to each Node bound to the NodeList.

#### Parameters:

- `type` String

  The event being listened for

- `fn` Function

  The handler to call when the event fires

- `context` Object

  The context to call the handler with. Default is the NodeList instance.

#### Returns:

EventHandle: A subscription handle capable of detaching that subscription

### `onceAfter`

(

- `type`
- `fn`
- `context`

)
EventHandle

Provided by the node-base module.

Defined in `node/js/node-event.js:181`

Applies an one-time event listener to each Node bound to the NodeList that will be called only after all on() handlers are called and the event is not prevented.

#### Parameters:

- `type` String

  The event being listened for

- `fn` Function

  The handler to call when the event fires

- `context` Object

  The context to call the handler with. Default is the NodeList instance.

#### Returns:

EventHandle: A subscription handle capable of detaching that subscription

### `plug`

(

- `P`
- `config`

)
chainable

Provided by the node-pluginhost module.

Defined in `node/js/node-pluginhost.js:42`

Adds a plugin to each node in the NodeList. This will instantiate the plugin and attach it to the configured namespace on each node

#### Parameters:

- `P` Function | Object | Array

  Accepts the plugin class, or an object with a "fn" property specifying the plugin class and a "cfg" property specifying the configuration for the Plugin.

  Additionally an Array can also be passed in, with the above function or object values, allowing the user to add multiple plugins in a single call.

- `config` Object

  (Optional) If the first argument is the plugin class, the second argument can be the configuration for the plugin.

### `pop`

() Node | null

Defined in `node/js/nodelist-array.js:17`

#### Returns:

Node | null: The last item in the NodeList, or null if the list is empty.

### `prepend`

()

Provided by the node-base module.

Defined in `node/js/node-create.js:222`

Called on each Node instance

### `push`

(

- `nodes`

)

Defined in `node/js/nodelist-array.js:23`

#### Parameters:

- `nodes` Node | DOMNode

  One or more nodes to add to the end of the NodeList.

### `refresh`

() chainable

Defined in `node/js/nodelist.js:275`

Reruns the initial query, when created using a selector query

### `remove`

(

- `destroy`

)
chainable

Defined in `node/js/nodelist.js:371`

Called on each Node instance. Removes the node from its parent. Shortcut for myNode.get('parentNode').removeChild(myNode);

#### Parameters:

- `destroy` Boolean

  whether or not to call destroy() on the node after removal.

### `removeAttribute`

(

- `name`

)

Defined in `node/js/node-imports.js:200`

Allows for removing attributes on DOM nodes. This passes through to the DOM node, allowing for custom attributes.

#### Parameters:

- `name` String

  The attribute to remove

### `removeClass`

(

- `className`

)
chainable

Provided by the node-base module.

Defined in `node/js/node-class.js:70`

Removes a class name from each node.

#### Parameters:

- `className` String

  the class name to remove from the node's class attribute

### `replaceClass`

(

- `oldClassName`
- `newClassName`

)
chainable

Provided by the node-base module.

Defined in `node/js/node-class.js:78`

Replace a class with another class for each node. If no oldClassName is present, the newClassName is simply added.

#### Parameters:

- `oldClassName` String

  the class name to be replaced

- `newClassName` String

  the class name that will be replacing the old class name

### `set`

(

- `attr`
- `val`

)
chainable

Defined in `node/js/nodelist.js:382`

Called on each Node instance. Sets an attribute on the Node instance. Unless pre-configured (via Node.ATTRS), set hands off to the underlying DOM node. Only valid attributes/properties for the node will be set. To set custom attributes use setAttribute.

#### Parameters:

- `attr` String

  The attribute to be set.

- `val` Any

  The value to set the attribute to.

### `setAttribute`

(

- `name`
- `value`

)
chainable

Defined in `node/js/node-imports.js:188`

Allows setting attributes on DOM nodes, normalizing in some cases. This passes through to the DOM node, allowing for custom attributes.

#### Parameters:

- `name` String

  The attribute name

- `value` String

  The value to set

### `setAttribute`

(

- `name`
- `value`

)
chainable

Provided by the node-base module.

Defined in `node/js/node-attrs.js:95`

Allows setting attributes on DOM nodes, normalizing in some cases. This passes through to the DOM node, allowing for custom attributes.

#### Parameters:

- `name` String

  The attribute name

- `value` String

  The value to set

### `setContent`

() deprecated

Provided by the node-base module.

Defined in `node/js/node-create.js:230`

Deprecated: Use setHTML

Called on each Node instance Note that this passes to innerHTML and is not escaped. Use `Y.Escape.html()` to escape HTML, or `set('text')` to add as text.

### `setData`

(

- `name`
- `val`

)
chainable

Provided by the node-data module.

Defined in `node/js/node-data.js:145`

Stores arbitrary data on each Node instance bound to the NodeList. This is not stored with the DOM node.

#### Parameters:

- `name` String

  The name of the field to set. If no name is given, name is treated as the data and overrides any existing data.

- `val` Any

  The value to be assigned to the field.

### `setHTML`

()

Provided by the node-base module.

Defined in `node/js/node-create.js:248`

Called on each Node instance Note that this passes to innerHTML and is not escaped. Use `Y.Escape.html()` to escape HTML, or `set('text')` to add as text.

### `setStyle`

(

- `attr`
- `val`

)
chainable

Provided by the node-style module.

Defined in `node/js/node-style.js:78`

Sets a style property on each node. Use camelCase (e.g. 'backgroundColor') for multi-word properties.

#### Parameters:

- `attr` String

  The style attribute to set.

- `val` String | Number

  The value.

### `setStyles`

(

- `hash`

)
chainable

Provided by the node-style module.

Defined in `node/js/node-style.js:88`

Sets multiple style properties on each node. Use camelCase (e.g. 'backgroundColor') for multi-word properties.

#### Parameters:

- `hash` Object

  An object literal of property:value pairs.

### `shift`

() Node | null

Defined in `node/js/nodelist-array.js:29`

#### Returns:

Node | null: The first item in the NodeList, or null if the NodeList is empty.

### `show`

(

- `name`
- `config`
- `callback`

)
chainable

Provided by the node-base module.

Defined in `node/js/node-view.js:120`

Makes each node visible. If the "transition" module is loaded, show optionally animates the showing of the node using either the default transition effect ('fadeIn'), or the given named effect.

#### Parameters:

- `name` String

  A named Transition effect to use as the show effect.

- `config` Object

  Options to use with the transition.

- `callback` Function

  An optional function to run after the transition completes.

### `size`

() Int

Defined in `node/js/nodelist.js:299`

Returns the current number of items in the NodeList.

#### Returns:

Int: The number of items in the NodeList.

### `slice`

(

- `begin`
- `end`

)
NodeList

Defined in `node/js/nodelist-array.js:35`

#### Parameters:

- `begin` Number

  Zero-based index at which to begin extraction. As a negative index, start indicates an offset from the end of the sequence. slice(-2) extracts the second-to-last element and the last element in the sequence.

- `end` Number

  Zero-based index at which to end extraction. slice extracts up to but not including end. slice(1,4) extracts the second element through the fourth element (elements indexed 1, 2, and 3). As a negative index, end indicates an offset from the end of the sequence. slice(2,-1) extracts the third element through the second-to-last element in the sequence. If end is omitted, slice extracts to the end of the sequence.

#### Returns:

NodeList: A new NodeList comprised of this NodeList joined with the input.

### `some`

(

- `fn`
- `context`

)
Boolean

Defined in `node/js/nodelist.js:181`

Executes the function once for each node until a true value is returned.

#### Parameters:

- `fn` Function

  The function to apply. It receives 3 arguments: the current node instance, the node's index, and the NodeList instance

- `context` Object

  optional An optional context to execute the function from. Default context is the current Node instance

#### Returns:

Boolean: Whether or not the function returned true for any node.

### `splice`

(

- `index`
- `howMany`

)
NodeList

Defined in `node/js/nodelist-array.js:47`

#### Parameters:

- `index` Number

  Index at which to start changing the array. If negative, will begin that many elements from the end.

- `howMany` Number

  An integer indicating the number of old array elements to remove. If howMany is 0, no elements are removed. In this case, you should specify at least one new element. If no howMany parameter is specified (second syntax above, which is a SpiderMonkey extension), all elements after index are removed. {Node | DOMNode| element1, ..., elementN The elements to add to the array. If you don't specify any elements, splice simply removes elements from the array.

#### Returns:

NodeList: The element(s) removed.

### `toFrag`

() Node

Defined in `node/js/nodelist.js:199`

Creates a documenFragment from the nodes bound to the NodeList instance

#### Returns:

Node: a Node instance bound to the documentFragment

### `toggleClass`

(

- `className`

)
chainable

Provided by the node-base module.

Defined in `node/js/node-class.js:88`

If the className exists on the node it is removed, if it doesn't exist it is added.

#### Parameters:

- `className` String

  the class name to be toggled

### `toggleView`

(

- `[name]`
- `[on]`
- `[callback]`

)
chainable

Provided by the node-base module.

Defined in `node/js/node-view.js:147`

Displays or hides each node. If the "transition" module is loaded, toggleView optionally animates the toggling of the nodes using given named effect.

#### Parameters:

- `[name]` String optional

  An optional string value to use as transition effect.

- `[on]` Boolean optional

  An optional boolean value to force the nodes to be shown or hidden

- `[callback]` Function optional

  An optional function to run after the transition completes.

### `transition`

(

- `config`
- `callback`

)
chainable

Provided by the transition module.

Defined in `transition/js/transition-native.js:613`

Animate one or more css properties to a given value. Requires the "transition" module.

    example usage:
        Y.all('.demo').transition({
            duration: 1, // in seconds, default is 0.5
            easing: 'ease-out', // default is 'ease'
            delay: '1', // delay start for 1 second, default is 0

            height: '10px',
            width: '10px',

            opacity: { // per property
                value: 0,
                duration: 2,
                delay: 2,
                easing: 'ease-in'
            }
        });

#### Parameters:

- `config` Object

  An object containing one or more style properties, a duration and an easing.

- `callback` Function

  A function to run after the transition has completed. The callback fires once per item in the NodeList.

### `unplug`

(

- `plugin`

)
chainable

Provided by the node-pluginhost module.

Defined in `node/js/node-pluginhost.js:66`

Removes a plugin from all nodes in the NodeList. This will destroy the plugin instance and delete the namespace each node.

#### Parameters:

- `plugin` String | Function

  The namespace of the plugin, or the plugin class with the static NS namespace property defined. If not provided, all registered plugins are unplugged.

### `unshift`

(

- `nodes`

)

Defined in `node/js/nodelist-array.js:57`

#### Parameters:

- `nodes` Node | DOMNode

  One or more nodes to add to the NodeList.

### `unwrap`

() chainable

Defined in `node/js/node-imports.js:209`

Removes the parent node from node in the list.

### `wrap`

(

- `html`

)
chainable

Defined in `node/js/node-imports.js:215`

Wraps the given HTML around each node.

#### Parameters:

- `html` String

  The markup to wrap around the node.

## Properties

### `_nodes`

Unknown private

Defined in `node/js/nodelist.js:40`

The underlying array of DOM nodes bound to the Y.NodeList instance