JS DOM Nodes

In the context of the Document Object Model (DOM), nodes are the individual elements or components that make up an HTML or XML document. The DOM represents the structure of a web page as a hierarchical tree-like structure, with each node in the tree corresponding to an element, attribute, or text content in the document.


There are several types of nodes in the DOM:


1. **Element Nodes**:

Element nodes represent HTML or XML elements in the document. They are the primary building blocks of the DOM and can contain other nodes, including other elements, text nodes, and attributes. Element nodes have properties such as `nodeName`, `nodeType`, and `nodeValue`.


2. **Text Nodes**:

Text nodes represent the text content within an element. For example, the text between `<p>` and `</p>` tags will be represented by a text node. Text nodes have a node type of `3` and contain the actual text content in their `nodeValue` property.


3. **Attribute Nodes**:

Attribute nodes represent the attributes of an HTML or XML element. They are used to store additional information about an element. Attribute nodes have a node type of `2` and contain the attribute value in their `nodeValue` property.


4. **Comment Nodes**:

Comment nodes represent HTML or XML comments in the document. They are used to add comments within the markup. Comment nodes have a node type of `8` and contain the comment text in their `nodeValue` property.


5. **Document Node**:

The document node represents the entire HTML or XML document. It is the root of the DOM tree and provides an entry point to access and manipulate the entire document. The document node has a node type of `9`.


6. **Document Type Node**:

The document type node represents the `<!DOCTYPE>` declaration in an HTML or XML document. It defines the document type and its public identifier. The document type node has a node type of `10`.


7. **Document Fragment Node**:

The document fragment node is a lightweight container that can hold multiple nodes. It allows you to manipulate a group of nodes before inserting them into the DOM, improving performance and reducing reflows. Document fragment nodes have a node type of `11`.


DOM nodes are organized in a hierarchical structure, with parent-child relationships, siblings, and ancestors. You can access, create, and manipulate DOM nodes using JavaScript, allowing you to dynamically update the content, structure, and appearance of a web page to create interactive and responsive user interfaces.



About the Author



Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.

We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc





 PreviousNext