DOM Node Info

Node Properties

element.nodeName
// "DIV", "P", etc.

element.nodeType
// 1, 3, 8, etc.

textNode.nodeValue
// "Hello"

element.textContent
// "Text content"

🔹 Node Name Property

The nodeName property returns the name of a node as a string. For element nodes, it returns the tag name in uppercase. For text nodes, it returns "#text", and for the document node, it returns "#document".

<div id="myDiv">Hello</div>
<p id="myPara">Paragraph</p>
<button onclick="showNodeNames()">Show Node Names</button>

<script>
function showNodeNames() {
  const div = document.getElementById('myDiv');
  const para = document.getElementById('myPara');
  
  console.log(div.nodeName);   // "DIV"
  console.log(para.nodeName);  // "P"
  console.log(document.nodeName);  // "#document"
  
  alert(`Div: ${div.nodeName}, Paragraph: ${para.nodeName}`);
}
</script>

🔹 Node Type Property

The nodeType property returns a number representing the node type. Element nodes are type 1, text nodes are type 3, and comment nodes are type 8. This helps you identify what kind of node you're working with programmatically.

<div id="container">
  Text content
  <!-- Comment -->
  <span>Span element</span>
</div>
<button onclick="checkNodeTypes()">Check Node Types</button>

<script>
function checkNodeTypes() {
  const container = document.getElementById('container');
  const children = container.childNodes;
  
  children.forEach(node => {
    console.log(`Type: ${node.nodeType}, Name: ${node.nodeName}`);
  });
  
  // Check specific type
  if(container.nodeType === 1) {
    alert('Container is an element node');
  }
}
</script>

🔹 Node Value Property

The nodeValue property gets or sets the value of a node. For text nodes, it contains the actual text. For element nodes, it's null. For attribute nodes, it contains the attribute value. Use it to read or modify text content directly.

<p id="para">Original text</p>
<button onclick="changeNodeValue()">Change Text</button>

<script>
function changeNodeValue() {
  const para = document.getElementById('para');
  const textNode = para.firstChild;
  
  console.log(para.nodeValue);      // null (element)
  console.log(textNode.nodeValue);  // "Original text"
  
  // Change text node value
  textNode.nodeValue = 'New text!';
}
</script>

🔹 Text Content Property

The textContent property returns or sets the text content of an element and all its descendants. It ignores HTML tags and returns only text. Unlike innerHTML, it's safer and faster for working with plain text content.

<div id="content">
  <h2>Title</h2>
  <p>Paragraph text</p>
</div>
<button onclick="showTextContent()">Show Text</button>

<script>
function showTextContent() {
  const div = document.getElementById('content');
  
  // Get all text content
  console.log(div.textContent);
  // Output: "Title Paragraph text"
  
  // Set text content (removes all HTML)
  div.textContent = 'New plain text';
}
</script>

🔹 innerHTML vs textContent

innerHTML returns HTML markup including tags, while textContent returns only text. innerHTML can execute scripts and is slower, making textContent safer and more efficient for plain text. Choose based on whether you need HTML or just text.

<div id="demo">
  <strong>Bold text</strong> and normal text
</div>
<button onclick="compareProperties()">Compare</button>

<script>
function compareProperties() {
  const div = document.getElementById('demo');
  
  console.log('innerHTML:', div.innerHTML);
  // "<strong>Bold text</strong> and normal text"
  
  console.log('textContent:', div.textContent);
  // "Bold text and normal text"
  
  console.log('innerText:', div.innerText);
  // "Bold text and normal text" (respects CSS)
}
</script>

🔹 Getting Element Attributes

Access element attributes using getAttribute, setAttribute, hasAttribute, and removeAttribute methods. Attributes provide additional information about elements like IDs, classes, data attributes, and custom properties for enhanced functionality.

<img id="myImage" src="photo.jpg" alt="Photo" data-category="nature">
<button onclick="showAttributes()">Show Attributes</button>

<script>
function showAttributes() {
  const img = document.getElementById('myImage');
  
  // Get attributes
  console.log(img.getAttribute('src'));   // "photo.jpg"
  console.log(img.getAttribute('alt'));   // "Photo"
  console.log(img.getAttribute('data-category'));  // "nature"
  
  // Check if attribute exists
  if(img.hasAttribute('alt')) {
    console.log('Image has alt text');
  }
  
  // Set new attribute
  img.setAttribute('title', 'Beautiful photo');
}
</script>

🔹 Node Relationship Info

Nodes have properties that reveal their relationships with other nodes in the DOM tree. Access parent, children, and sibling nodes to navigate the document structure and understand how elements are connected and organized.

<div id="parent">
  <p id="child1">First</p>
  <p id="child2">Second</p>
  <p id="child3">Third</p>
</div>
<button onclick="showRelationships()">Show Relationships</button>

<script>
function showRelationships() {
  const child2 = document.getElementById('child2');
  
  console.log('Parent:', child2.parentNode.id);
  console.log('Previous sibling:', child2.previousElementSibling.id);
  console.log('Next sibling:', child2.nextElementSibling.id);
  console.log('First child of parent:', child2.parentNode.firstElementChild.id);
  console.log('Last child of parent:', child2.parentNode.lastElementChild.id);
}
</script>