DOM Selection and Manipulation

Selecting Elements

To work with elements, you first need to select them. Here are some common methods:

  • getElementById: Find an element by its ID

    let title = document.getElementById('main-title');

  • getElementsByClassName: Find elements by their class name

    let paragraphs = document.getElementsByClassName('content');

  • getElementsByTagName: Find elements by their tag name

    let allDivs = document.getElementsByTagName('div');

  • querySelector: Find the first element that matches a CSS selector

    let firstButton = document.querySelector('button');

  • querySelectorAll: Find all elements that match a CSS selector

    let allButtons = document.querySelectorAll('button');

DOM Manipulation

Once elements are selected, you can manipulate them in various ways:

2.1 Changing Content

textContent: Sets or returns the text content of an element.

element.textContent = 'New text content';

innerHTML: Sets or returns the HTML content inside an element.

element.innerHTML = '<strong>New HTML content</strong>';

2.2 Changing Attributes

setAttribute(): Sets the value of an attribute on the specified element.

element.setAttribute('class', 'newClass');

removeAttribute(): Removes an attribute from the specified element.

element.removeAttribute('class');

2.3 Changing Styles

style property: Allows direct manipulation of an element's inline styles.

element.style.color = 'red';
element.style.fontSize = '20px';

classList: Provides methods to add, remove, or toggle classes.

element.classList.add('newClass');
element.classList.remove('oldClass');
element.classList.toggle('activeClass');

2.4 Creating and Removing Elements

createElement(): Creates a new element.

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

appendChild(): Adds a node to the end of the list of children of a specified parent node.

parentElement.appendChild(newDiv);

removeChild(): Removes a child node from the DOM.

parentElement.removeChild(childElement);

Example: Lets put it all together

// Select the container
const container = document.getElementById('container');

// Create a new paragraph
const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph.';
newParagraph.classList.add('highlight');

// Append the new paragraph to the container
container.appendChild(newParagraph);

Node Properties

Once you've selected an element, you can access its properties:

  • nodeType: Type of the node (1 for element nodes, 3 for text nodes)
  • nodeName / tagName: For element nodes, this is the tag name (in uppercase)
  • innerHTML: The HTML content inside the element
  • outerHTML: The full HTML of the element, including the element itself
  • textContent: All text content of the element and its descendants
  • hidden: If true, the element is hidden on the page

Example:

let paragraph = document.querySelector('p');

console.log(paragraph.nodeType);  // 1 (Element node)
console.log(paragraph.tagName);   // "P"
console.log(paragraph.innerHTML); // The HTML content inside the paragraph
console.log(paragraph.textContent); // Just the text, without HTML tags