Unlock the Power of HTML DOM Nodes: A Comprehensive Guide

Getting Started with HTML DOM Nodes

A DOM node represents an element in an HTML document, and each node has a set of properties and methods that can be used to manipulate and interact with it.

Popular HTML DOM Node APIs

Here are 21 of the most popular and widely used HTML DOM node APIs:

Node Selection

The following methods are used to select nodes in the DOM:

• getElementById(id): Returns the DOM node instance of an element with a specified id attribute.
• getElementsByClassName(className): Returns a collection of DOM nodes whose class attribute matches the specified className.
• getElementsByTagName(tagName): Returns a collection of DOM nodes whose tag name matches the specified tagName.
• getSelection(): Returns the text node of the selected text in a document.
• getElementsByName and querySelector(selector): Return the first occurrence of a DOM node that matches the specified selector.
• querySelectorAll(selector): Returns a NodeList of all occurrences of a DOM node that matches the specified selector.

Node Manipulation

The following methods are used to manipulate nodes in the DOM:

• • parentNode.insertBefore(newNode, refNode): Inserts a new node before a reference node in a parent node.

const parentNode = document.getElementById('parent');
const newNode = document.createElement('div');
const refNode = parentNode.children[0];
parentNode.insertBefore(newNode, refNode);

• • appendChild(node): Adds a new node to the end of an element.

const element = document.getElementById('element');
const newNode = document.createElement('div');
element.appendChild(newNode);

• • createElement(elementName): Creates a new DOM node instance of a specified element.

const newNode = document.createElement('div');

• • createTextNode(textString): Creates a new text node with a specified text string.

const textNode = document.createTextNode('Hello World');

• • removeChild(childNode): Removes a child node from a parent node.

const parentNode = document.getElementById('parent');
const childNode = parentNode.children[0];
parentNode.removeChild(childNode);

• • replaceChild(newNode, childNode): Replaces a child node with a new node in a parent node.

const parentNode = document.getElementById('parent');
const newNode = document.createElement('div');
const childNode = parentNode.children[0];
parentNode.replaceChild(newNode, childNode);

Attribute Manipulation

The following methods are used to manipulate attributes on nodes:

• • setAttribute(attrKey, attrValue): Sets an attribute on an element.

const element = document.getElementById('element');
element.setAttribute('class', 'new-class');

• • getAttribute(attrKey): Returns the value of an attribute on an element.

const element = document.getElementById('element');
const attributeName = element.getAttribute('class');

• • getAttributeNames(): Returns an array of all attribute names on an element.

const element = document.getElementById('element');
const attributeNames = element.getAttributeNames();

Node Properties

The following properties are used to access information about nodes:

• • classList: Returns an array of class names on an element.

const element = document.getElementById('element');
const classNames = element.classList;

• • parentNode: Returns the parent node of an element.

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

• • parentElement: Returns the parent element of an element.

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

• • innerHTML: Returns the HTML markup of an element.

const element = document.getElementById('element');
const htmlMarkup = element.innerHTML;

• • innerText: Returns the text content of an element.

const element = document.getElementById('element');
const textContent = element.innerText;

• • cloneNode(): Creates a copy of a DOM node.

const node = document.getElementById('node');
const clone = node.cloneNode();

By mastering these 21 HTML DOM node APIs, you’ll be well on your way to building dynamic and interactive web applications. Remember to practice and experiment with different scenarios to solidify your understanding of these essential APIs.