HTML DOM Nodes

In JavaScript, DOM (Document Object Model) Nodes are objects that represent different types of elements or entities within an HTML or XML document. DOM Nodes form the structure of the DOM tree, representing elements, text nodes, comments, attributes, and more.

Element Nodes

Element Nodes represent HTML elements in the DOM tree. Each HTML tag in your document corresponds to an Element Node. For example, <div>, <p>, <a>, etc., are all Element Nodes. These nodes have properties and methods that allow you to access and modify their attributes, child nodes, and content. You can retrieve elements using methods like getElementById(), querySelector(), or getElementsByTagName().

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Element Node</h1>
<div id="wlc">
    <p>Learn To Code For Free</p>
</div>

<script>
    let wlc = document.createElement("p");
    let node = document.createTextNode("WebTutor is a learning-based website where you can learn various front-end languages.");
    wlc.appendChild(node);

    let ele = document.getElementById("wlc");
    ele.appendChild(wlc);
</script>

</body>
</html>

Preview

Text Nodes

Text Nodes represent the text content within an element. They can be found between the opening and closing tags of an element. For example, the text between <p> tags would be a Text Node. Text Nodes can be accessed and modified using the nodeValue property. You can retrieve text nodes by accessing the childNodes property of an element.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Text Node</h1>
<button onclick="myFunction()">Click me</button><br>

<script>
    function myFunction() {
        let txtnode = document.createTextNode("WebTutor");
        document.body.appendChild(txtnode);
    }
</script>

</body>
</html>

Preview

Attribute Nodes

Attribute Nodes represent attributes of an element. Each HTML attribute within an element is considered an Attribute Node. For example, the href attribute of an <a> tag would be an Attribute Node. Attribute Nodes can be accessed and modified using properties and methods specific to attributes, such as getAttribute() and setAttribute().

Example

<!DOCTYPE html>
<html>
<style>
    .red { color: red; }
</style>
<body>

<h1 class="red">JavaScript Attribute Node</h1>
<p id="demo"></p>

<script>
    let ele = document.getElementsByTagName("H1")[0];
    let attr = ele.getAttributeNode("class");
    document.getElementById("demo").innerHTML = attr.value;
</script>

</body>
</html>

Preview

Comment Nodes

Comment Nodes represent HTML comments within the document. Comments are special markers in the HTML code that are not rendered on the page. Comment Nodes can be accessed and manipulated like other nodes using properties and methods. They are useful for leaving notes or explanations within the HTML code

Document Node

The Document Node represents the entire HTML or XML document. It serves as the root of the DOM tree. You can access and manipulate the document structure using properties and methods provided by the Document Node.

DOM Nodes can be accessed and manipulated using various methods and properties provided by the DOM API. You can navigate through the DOM tree, create or remove nodes, modify attributes and content, and interact with the document structure dynamically using JavaScript.

DOM Navigation

DOM Collections

HTML DOM Nodes

Element Nodes

Example

Text Nodes

Example

Attribute Nodes

Example

Comment Nodes

Document Node

Links

Tutorials

Connect with us