What’s a node? it is the name of any type of object in the DOM tree. It could be one of the built-in DOM elements such as the document itself, document.head or document.body. A node could be an HTML tag specified in the HTML such as <input>, <div>,<h2>, <p> or it could be a comment node, text node… In fact, a node is any DOM object and every node has a parent, every node is allowed to have one or more children or even zero children.
What’s an element? 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.
Nodes vs Elements: Nodes are all the different components that a webpage is made up of and elements are one type of node.
Let’s have a look on some types of node, their value and description
The following html element has two children: head (line 3) and body (line 10) and these are two ‘nodes’. The head and body are element nodes. Inside the body (line 12) there is a comment (navbar), it’s one children of the body and it’s a comment node
Since every node has properties, therefore let’s find out in the console the ones for element node ‘body’.
- .nodeName property has a return value “Body”
- .nodeType property returns a value of 1 which means that body is ELEMENT_NODE.
- .parentNode shows this element node “Body” has parentNode which is the html element.
- .children property returns HTML collection,
- .COMMENT_NODE has a return value of 8, which states that we have comment node as of the children of the body.
That’s all for this topic and thank you for reading this blog.