DOM Nodes

Node Types

<div></div>
<p></p>

<p>Hello</p>
Text: "Hello"

<div id="box">
Attribute: id

<!-- Comment -->

🔹 Node Relationships

Nodes in the DOM tree have family-like relationships. Each node can have a parent, children, and siblings. Understanding these relationships is crucial for navigating and manipulating the document structure programmatically.

<div id="parent">
  <p id="child1">First child</p>
  <p id="child2">Second child</p>
</div>

<script>
const parent = document.getElementById('parent');
const child1 = document.getElementById('child1');

// Parent
console.log(child1.parentNode);  // div#parent

// Children
console.log(parent.childNodes);  // NodeList

// Siblings
console.log(child1.nextSibling);  // text node or child2
</script>

🔹 Creating New Nodes

JavaScript allows you to create new DOM nodes dynamically. Use createElement for elements, createTextNode for text, and appendChild to add them to the document. This is fundamental for building dynamic content.

<div id="container"></div>
<button onclick="addElement()">Add Element</button>

<script>
function addElement() {
  // Create new element
  const newDiv = document.createElement('div');
  
  // Create text node
  const text = document.createTextNode('New element!');
  
  // Add text to element
  newDiv.appendChild(text);
  
  // Add element to container
  document.getElementById('container').appendChild(newDiv);
}
</script>

🔹 Removing Nodes

Remove nodes from the DOM using removeChild or the modern remove method. This is useful for deleting unwanted content, clearing forms, or removing temporary elements like notifications or modal dialogs from your page.

<div id="parent">
  <p id="child">This will be removed</p>
</div>
<button onclick="removeElement()">Remove Element</button>

<script>
function removeElement() {
  // Method 1: Using removeChild
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');
  parent.removeChild(child);
  
  // Method 2: Using remove (modern)
  // child.remove();
}
</script>

🔹 Replacing Nodes

Replace existing nodes with new ones using replaceChild. This is more efficient than removing and adding separately when you need to swap content, update components, or refresh parts of your page with new data.

<div id="parent">
  <p id="old">Old content</p>
</div>
<button onclick="replaceElement()">Replace Element</button>

<script>
function replaceElement() {
  const parent = document.getElementById('parent');
  const oldElement = document.getElementById('old');
  
  // Create new element
  const newElement = document.createElement('p');
  newElement.textContent = 'New content!';
  newElement.style.color = 'blue';
  
  // Replace old with new
  parent.replaceChild(newElement, oldElement);
}
</script>

🔹 Cloning Nodes

Create copies of existing nodes using cloneNode. Pass true for deep cloning (includes children) or false for shallow cloning (element only). This is useful for duplicating templates, creating multiple similar elements, or backing up content.

<div id="original">
  <p>Original content</p>
</div>
<div id="container"></div>
<button onclick="cloneElement()">Clone Element</button>

<script>
function cloneElement() {
  const original = document.getElementById('original');
  
  // Clone with children (deep clone)
  const clone = original.cloneNode(true);
  clone.id = 'clone';
  
  // Add clone to container
  document.getElementById('container').appendChild(clone);
}
</script>

🔹 Node Properties

Every node has properties that provide information about its type, name, value, and content. These properties help you identify and work with different types of nodes when traversing or manipulating the DOM tree.

const element = document.getElementById('demo');

// Node properties
console.log(element.nodeName);      // "DIV"
console.log(element.nodeType);      // 1 (Element)
console.log(element.nodeValue);     // null (for elements)
console.log(element.textContent);   // Text inside element
console.log(element.innerHTML);     // HTML inside element

// Check node type
if(element.nodeType === 1) {
  console.log('This is an element node');
}