Difference between Node object and Element object?
A node
is the generic name for any type of object in the DOM hierarchy. A node
could be one of the built-in DOM elements such as document
or document.body
, it could be an HTML tag specified in the HTML such as <input>
or <p>
or it could be a text node that is created by the system to hold a block of text inside another element. So, in a nutshell, a node
is any DOM object.
An element
is one specific type of node
as there are many other types of nodes (text nodes, comment nodes, document nodes, etc...).
The DOM consists of a hierarchy of nodes where each node can have a parent, a list of child nodes and a nextSibling and previousSibling. That structure forms a tree-like hierarchy. The document
node has the html
node as its child.
The html
node has its list of child nodes (the head
node and the body
node). The body
node would have its list of child nodes (the top level elements in your HTML page) and so on.
So, a nodeList
is simply an array-like list of nodes
.
An element is a specific type of node, one that can be directly specified in the HTML with an HTML tag and can have properties like an id
or a class
. can have children, etc... There are other types of nodes such as comment nodes, text nodes, etc... with different characteristics. Each node has a property .nodeType
which reports what type of node it is. You can see the various types of nodes here (diagram from MDN):
You can see an ELEMENT_NODE
is one particular type of node where the nodeType
property has a value of 1
.
So document.getElementById("test")
can only return one node and it's guaranteed to be an element (a specific type of node). Because of that it just returns the element rather than a list.
Since document.getElementsByClassName("para")
can return more than one object, the designers chose to return a nodeList
because that's the data type they created for a list of more than one node. Since these can only be elements (only elements typically have a class name), it's technically a nodeList
that only has nodes of type element in it and the designers could have made a differently named collection that was an elementList
, but they chose to use just one type of collection whether it had only elements in it or not.
EDIT: HTML5 defines an HTMLCollection
which is a list of HTML Elements (not any node, only Elements). A number of properties or methods in HTML5 now return an HTMLCollection
. While it is very similar in interface to a nodeList
, a distinction is now made in that it only contains Elements, not any type of node.
The distinction between a nodeList
and an HTMLCollection
has little impact on how you use one (as far as I can tell), but the designers of HTML5 have now made that distinction.
For example, the element.children
property returns a live HTMLCollection.
What's the difference between Node/Element/Object?
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
What's the difference between node and object in JavaScript?
Lots and lots of things in JavaScript are objects. For example, the following is an object:
const obj = {};
What's the difference between an element and a node in XML?
The Node object is the primary data type for the entire DOM.
A node can be an element node, an attribute node, a text node, or any other of the node types explained in the "Node types" chapter.
An XML element is everything from (including) the element's start tag to (including) the element's end tag.
How to get Element from Node
To add classes to the elements in the container
variable, I used the following code:
container.children[i].className = 'myClass';
I had to use children
instead of childNodes
. You can see the context in which this code was used here: http://codepen.io/robkom/pen/RWmodz.
html element - property of document object ? or an object?
The document object has a title property, which is a string, which is an object. But the document object does not have direct properties for the html elements in the page, that's why you have accessor functions like document.getElementById('id'), which return objects representing html elements. Open up a console in chrome and type document. to see all the properties the document object has. Also see that document.title and document.getElementByTagName('title')[0] do not return the same thing.
Related Topics
Do Html5 Custom Data Attributes "Work" in Ie 6
Navbar Dropdown (Collapse) Is Not Working in Bootstrap 5
Changing Source on Html5 Video Tag
Dynamically Set Value of a File Input
Why I Have to Put All the Script to Index.Html in Jquery Mobile
What Is the Most Efficient Way to Create HTML Elements Using Jquery
How to Use Checkbox Inside Select Option
Remove CSS Class from Element With JavaScript (No Jquery)
Vue.Js Dynamic Images Not Working
How to Pass Parameters Using Ui-Sref in Ui-Router to the Controller
JavaScript String/Integer Comparisons
Jquery: Get Height of Hidden Element in Jquery
"Uncaught Typeerror: Illegal Invocation" in Chrome
Non-Standard Attributes on HTML Tags. Good Thing? Bad Thing? Your Thoughts
Method to Show Native Datepicker in Chrome
Submit Multiple Forms With One Submit Button
Edit, Save, Self-Modifying HTML Document; Format Generated Html, JavaScript
How to Change the Href Attribute For a Hyperlink Using Jquery