Class: Node

Node

The DOM Node interface.
It should be noted that all functions that do not have a specified return value, return the calling object, allowing for function chaining.

Mixes In

Methods

afterPut(content)

Inserts content after the node.

Parameters:
Name Type Argument Description
content String | Node | NodeCollection <repeatable>

One or more HTML strings, nodes, or collections of nodes to insert.

Source:
Throws:
TypeError | NoModificationAllowedError
The subject node must have a ParentNode.

appendTo(target)

Appends this node to the end of the target element(s).

Parameters:
Name Type Description
target String | ParentNode | NodeCollection

A specific node, collection of nodes, or a selector to find a set of nodes to which this node will be appended.

Source:
Throws:
HierarchyRequestError
The target(s) must implement the ParentNode interface.

appendWith(content)

Appends content to the end of the node.

Parameters:
Name Type Argument Description
content String | Node | NodeCollection <repeatable>

One or more HTML strings, nodes, or collections of nodes to insert.

Source:
Throws:
HierarchyRequestError
This node must implement the ParentNode interface.

beforePut(content)

Inserts content before the node.

Parameters:
Name Type Argument Description
content String | Node | NodeCollection <repeatable>

One or more HTML strings, nodes, or collections of nodes to insert.

Source:
Throws:
TypeError | NoModificationAllowedError
The subject node must have a ParentNode.

childElements(selector) → {NodeCollection}

Gets the node's child elements, optionally filtered by a selector.

Parameters:
Name Type Argument Description
selector String <optional>

A CSS selector used to filter the returned set of elements.

Source:
Returns:
Type
NodeCollection

clone(withDataAndEvents, deepWithDataAndEvents) → {NodeCollection}

Create a clone of the node.

Parameters:
Name Type Argument Default Description
withDataAndEvents Boolean <optional>
false

A boolean indicating if the node's data and events should be copied over to the clone.

deepWithDataAndEvents Boolean <optional>
value of withDataAndEvents

If false, data and events for the descendants of the cloned node will not be copied over. If cloning with data and events and you know the descendants do not have any data or events that should be copied, using this variable (by setting it to false) will improve performance.

Source:
Returns:
Type
NodeCollection

closest(selector) → {Node}

Gets the first node that matches the selector by testing the node itself and traversing up through its ancestors in the DOM tree.
Parameters:
Name Type Description
selector String | Node | Array.<Node>

A CSS selector, a node, or a collection of nodes used to match the node and its parents against.

Note: Unlike jQuery, there is no version of this function where you can provide a "context" element, whose children that match the input CSS selector will be searched for a match. This is because it is very easy to get the matching children of an element yourself using Element#QSA() or Element#find() and you may find that one of these functions suits your needs better than the other.

Source:
Returns:
Type
Node
  • The first node that matches the selector.

contents() → {NodeCollection}

Gets the child nodes of the element as a NodeCollection.

This method can also be used to get the content document of an iframe, if the iframe has permission to access its content document.

ProTip: If you don't need the child nodes in a NodeCollection, you should access them using the native childNodes property (which is a NodeList).

Source:
See:
Returns:
Type
NodeCollection

next(selector) → {Element}

Get the node's immediately following sibling element. If a selector is provided, it retrieves the next sibling only if it matches that selector.

Parameters:
Name Type Argument Description
selector String <optional>

A CSS selector to match the next sibling against.

Source:
Returns:
Type
Element

nextAll(selector) → {NodeCollection}

Gets all following siblings of the node, optionally filtered by a selector.

Parameters:
Name Type Argument Description
selector String <optional>

A CSS selector used to filter the returned set of elements.

Source:
Returns:
Type
NodeCollection

The set of following sibling elements in order beginning with the closest sibling.

nextUntil(selector, filter) → {NodeCollection}

Gets the node's following siblings, up to but not including the element matched by the selector, DOM node, or node in a collection.

Parameters:
Name Type Argument Description
selector String | Element | Array.<Node> <optional>

A CSS selector, an element, or a collection of nodes used to indicate where to stop matching following sibling elements.

filter String <optional>

A CSS selector used to filter the returned set of elements.

Source:
Returns:
Type
NodeCollection
  • The set of following sibling elements in order beginning with the closest sibling.

off(events, selector, handler)

Removes one or more event handlers set by .on() or .one().

Parameters:
Name Type Argument Description
events String

One or more space-separated event types, such as "click" or "click keypress".

selector String <optional>

A selector which should match the one originally passed to .on() when attaching event handlers.

handler function <optional>

A handler function previously attached for the event(s), or the special value false (see Node#on()).

Source:
See:

off(events, selector)

Removes one or more event handlers set by .on() or .one().

Parameters:
Name Type Argument Description
events Object

An object where the string keys represent one or more space-separated event types and the values represent handler functions previously attached for the event(s).

selector String <optional>

A selector which should match the one originally passed to .on() when attaching event handlers.

Source:
See:

off()

Removes all event handlers set by .on() or .one().

Source:
See:

on(events, selector, data, handler(eventObject))

Attaches an event handler function for one or more events to the node.
Parameters:
Name Type Argument Description
events String

One or more space-separated event types, such as "click" or "click keypress".

selector String <optional>

A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

data * <optional>

Data to be passed to the handler in eventObject.data when an event is triggered.

handler(eventObject) function

A function to execute when the event is triggered. Inside the function, this will refer to the node the event was triggered on. The value false is also allowed as a shorthand for a function that simply does return false.

Check out jQuery's documentation for details. There are only a couple minor differences:

  1. Firebolt does not offer event namespacing.
  2. The native Event object is passed to the handler (with an added data property, and if propagation is stopped, there will be a propagationStopped property set to true).
Source:
See:

on(events, selector, data)

Attaches an event handler function for one or more events to the node.
Parameters:
Name Type Argument Description
events Object

An object where the string keys represent one or more space-separated event types and the values represent handler functions to be called for the event(s).

selector String <optional>

A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

data * <optional>

Data to be passed to the handler in eventObject.data when an event is triggered.

Check out jQuery's documentation for details. There are only a couple minor differences:

  1. Firebolt does not offer event namespacing.
  2. The native Event object is passed to the handler (with an added data property, and if propagation is stopped, there will be a propagationStopped property set to true).
Source:
See:

one(events, selector, data, handler(eventObject))

Attaches a handler to an event for the node. The handler is executed at most once per event type.
Exactly the same as Node#on() except the event handler is removed after it executes for the first time.

Parameters:
Name Type Argument Description
events String
selector String <optional>
data * <optional>
handler(eventObject) function
Source:
See:

one(events, selector, data)

Attaches a handler to an event for the node. The handler is executed at most once per event type.
Exactly the same as Node#on() except the event handler is removed after it executes for the first time.

Parameters:
Name Type Argument Description
events Object
selector String <optional>
data * <optional>
Source:
See:

parents(selector) → {NodeCollection}

Gets the node's ancestors, optionally filtered by a selector.

Parameters:
Name Type Argument Description
selector String <optional>

A CSS selector used to filter the returned set of elements.

Source:
Returns:
Type
NodeCollection
  • The set of the node's ancestors, ordered from the immediate parent on up.

parentsUntil(selector, filter) → {NodeCollection}

Gets the node's ancestors, up to but not including the element matched by the selector, DOM node, or node in a collection.

Parameters:
Name Type Argument Description
selector String | Element | Array.<Node> <optional>

A CSS selector, an element, or a collection of nodes used to indicate where to stop matching ancestor elements.

filter String <optional>

A CSS selector used to filter the returned set of elements.

Source:
Returns:
Type
NodeCollection
  • The set of the node's ancestors, ordered from the immediate parent on up.

prependTo(target)

Prepends this node to the beginning of the target element(s).

Parameters:
Name Type Description
target String | ParentNode | NodeCollection

A specific node, collection of nodes, or a selector to find a set of nodes to which this node will be prepended.

Source:
Throws:
HierarchyRequestError
The target(s) must implement the ParentNode interface.

prependWith(content)

Prepends content to the beginning of the node.

Parameters:
Name Type Argument Description
content String | Node | NodeCollection <repeatable>

One or more HTML strings, nodes, or collections of nodes to insert.

Source:
Throws:
HierarchyRequestError
This node must implement the ParentNode interface.

prev(selector) → {Element}

Get the node's immediately preceeding sibling element. If a selector is provided, it retrieves the previous sibling only if it matches that selector.

Parameters:
Name Type Argument Description
selector String <optional>

A CSS selector to match the previous sibling against.

Source:
Returns:
Type
Element

prevAll(selector) → {NodeCollection}

Gets all preceeding siblings of the node, optionally filtered by a selector.

Parameters:
Name Type Argument Description
selector String <optional>

A CSS selector used to filter the returned set of elements.

Source:
Returns:
Type
NodeCollection

The set of preceeding sibling elements in order beginning with the closest sibling.

prevUntil(selector, filter) → {NodeCollection}

Gets the node's preceeding siblings, up to but not including the element matched by the selector, DOM node, or node in a collection.

Parameters:
Name Type Argument Description
selector String | Element | Array.<Node> <optional>

A CSS selector, an element, or a collection of nodes used to indicate where to stop matching preceeding sibling elements.

filter String <optional>

A CSS selector used to filter the returned set of elements.

Source:
Returns:
Type
NodeCollection
  • The set of preceeding sibling elements in order beginning with the closest sibling.

putAfter(target)

Inserts this node directly after the specified target(s).

Parameters:
Name Type Description
target String | Node | NodeCollection

A specific node, collection of nodes, or a selector to find a set of nodes after which this node will be inserted.

Source:
Throws:
TypeError
The target node(s) must have a ParentNode.

putBefore(target)

Inserts this node directly before the specified target(s).

Parameters:
Name Type Description
target String | Node | NodeCollection

A specific node, collection of nodes, or a selector to find a set of nodes after which this node will be inserted.

Source:
Throws:
TypeError
The target node(s) must have a ParentNode.

remove()

Removes this node from the DOM.

Source:
Returns:

replaceAll(target)

Replace the target with this node.

Parameters:
Name Type Description
target String | Node | NodeCollection

A specific node, collection of nodes, or a selector to find a set of nodes to be replaced by this node.

Source:
Throws:
TypeError
The target node(s) must have a ParentNode.

replaceWith(content)

Replace the node with some other content.

Parameters:
Name Type Argument Description
content String | Node | NodeCollection <repeatable>

A specific node, a collection of nodes, or some HTML to replace the subject node.

Source:
Throws:
TypeError
The subject node must have a ParentNode.

siblings(selector) → {NodeCollection}

Gets the node's siblings, optionally filtered by a selector.

Parameters:
Name Type Argument Description
selector String <optional>

A CSS selector used to filter the returned set of elements.

Source:
Throws:
TypeError
The subject node must have a ParentNode.
Returns:
Type
NodeCollection
  • The set of the node's ancestors, ordered from the immediate parent on up.

text() → {String}

Gets this node's text content.

Note: Consider using the native textContent property instead of this function.

Warning #1: There is a known bug where <body> elements will have an empty string as the text property instead of this function due to browsers continuing to implement a deprecated API on the HTMLBodyElement prototype. Please use the native textContent property to get and set the text content of <body> elements instead of attempting to use this function.

Warning #2: <script> elements have a text property with the exact same functionality as the textContent property that cannot be overwritten. Please use the native text property or the textContent property to get and set the text content of <script> elements instead of attempting to use this function.

Source:
See:
Returns:
Type
String

The node's text content.

text(text)

Sets this node's text content.
Parameters:
Name Type Description
text String

The text or content that will be converted to a string to be set as the node's text content.

Note: Consider using the native textContent property instead of this function.

Warning #1: There is a known bug where <body> elements will have an empty string as the text property instead of this function due to browsers continuing to implement a deprecated API on the HTMLBodyElement prototype. Please use the native textContent property to get and set the text content of <body> elements instead of attempting to use this function.

Warning #2: <script> elements have a text property with the exact same functionality as the textContent property that cannot be overwritten. Please use the native text property or the textContent property to get and set the text content of <script> elements instead of attempting to use this function.

Source:
See:

trigger(eventType, extraParameters)

Triggers a real DOM event on the node for the given event type.

Parameters:
Name Type Description
eventType String

A string containing a JavaScript event type, such as "click" or "submit".

extraParameters *

Additional parameters that will be passed as the second argument to the triggered event handler(s).

Source:

trigger(event, extraParameters)

Uses the input Event object to trigger the specified event on the node.

Parameters:
Name Type Description
event Event

An Event object.

extraParameters *

Additional parameters that will be passed as the second argument to the triggered event handler(s).

Source:

triggerHandler(eventType, extraParameters)

Executes all handlers attached to the node for an event type.
Parameters:
Name Type Description
eventType String

A string containing a JavaScript event type, such as "click" or "submit".

extraParameters *

Additional parameters that will be passed as the second argument to the triggered event handler(s).

The .triggerHandler() method behaves similarly to .trigger(), with the following exceptions:

  • The .triggerHandler() method does not cause the default behavior of an event to occur (such as a form submission or button click).
  • Events triggered with .triggerHandler() do not bubble up the DOM hierarchy; if they are not handled by the target node directly, they do nothing.
  • Instead of returning the node, .triggerHandler() returns whatever value was returned by the last handler it caused to be executed. If no handlers are triggered, it returns undefined.
Source:

unwrap()

Remove the node's parent from the DOM, leaving the node in its place.

Source:
Throws:
TypeError
The subject node must have a ParentNode, which in turn must also have a ParentNode.

wrapInner(wrappingElement)

Wrap an HTML structure around the content of the node.

Parameters:
Name Type Description
wrappingElement String | Element | Array.<Element>

CSS selector—to select wrapping element(s)—, HTML string—to create wrapping element(s)—, element, or collection of elements used to specify the structure to wrap around the node's contents.

Source:
Throws:
HierarchyRequestError
The node must implement the ParentNode interface.

wrapWith(wrappingElement)

Wrap an HTML structure around the node.

Parameters:
Name Type Description
wrappingElement String | Element | Array.<Element>

CSS selector—to select wrapping element(s)—, HTML string—to create wrapping element(s)—, element, or collection of elements used to specify the structure to wrap around the node.

Source:
Throws:
TypeError
The subject node must have a ParentNode.