Skip to content

Elements Nodes

Arthur Guiot edited this page Sep 23, 2017 · 2 revisions

Difference between Nodes and Elements

A Node is an interface from which a number of DOM types inherit, and allows these various types to be treated (or tested) similarly. Ref: https://developer.mozilla.org/en-US/docs/Web/API/Node

The Element interface represents an object of a Document. This interface describes methods and properties common to all kinds of elements. Specific behaviors are described in interfaces which inherit from Element but add additional functionality. For example, the HTMLElement interface is the base interface for HTML elements, while the SVGElement interface is the basis for all SVG elements. Ref: https://developer.mozilla.org/en-US/docs/Web/API/Element

An object may represent anything. Objects have properties, which describe them, and methods which are actions that can be performed on them.

Putting it together:

You can create a DOM Node in a web page like so:

var node = document.createTextNode('A Node');

Then you can create a paragraph element:

var p = document.createElement('p');

Attach the node to the paragraph:

p.appendChild(node);

You may also reference the node and element as objects:

p.className = 'description';  // set the class property of the paragraph to 'description';

p.setAttribute('data-item', '8');  // add an attribute named data-item with a value of 8

$.isNode

This function will simply return true or false if the object that you gave it is a Node element

⚠️ Do not use the $.select() / $.s() function to select something. Use instead the $.single() function or native JavaScript functions.

$.isElement

This function will simply return true or false if the object that you gave it is an element

⚠️ As the $.isNode() function, do not use the $.select() / $.s() function to select something. Use instead the $.single() function or native JavaScript functions.

$.toNodeList

This function will take as argument a single element ($.single()), and will convert it to a NodeList with this element


⚠️ Questions?

Don't hesitate to ask your questions ⁉️ in the issue part 😁

Clone this wiki locally