MSDN Library - MS174763

This document outlines the fundamental techniques for accessing and manipulating Document Object Model (DOM) elements using JavaScript. The DOM is a programming interface for HTML and XML documents. It represents the page structure as a tree of objects, where each object represents a part of the document, such as an element, attribute, or text node.

Understanding the DOM Tree

The DOM organizes the document into a hierarchical structure. The root element is typically the <html> tag. Each element can contain other elements, text, and attributes, forming a parent-child relationship.

Consider this simple HTML snippet:


<div id="container">
    <h1>My Page Title</h1>
    <p class="intro">Welcome to our documentation.</p>
</div>

In this example:

<div> is a child of the <html> element.
<h1> and <p> are children of the <div>.
The text "My Page Title" is a child of the <h1>.

Common Methods for Accessing Elements

1. By ID: `getElementById()`

This is the most direct way to access a single element when it has a unique ID. The ID attribute must be unique within the entire HTML document.


const containerElement = document.getElementById('container');
if (containerElement) {
    console.log('Found element with ID "container":', containerElement);
}

2. By Tag Name: `getElementsByTagName()`

This method returns a live HTMLCollection of all elements with the specified tag name within the document or a specific parent element.


const allParagraphs = document.getElementsByTagName('p');
console.log(`Found ${allParagraphs.length} paragraph elements.`);
// Accessing the first paragraph:
if (allParagraphs.length > 0) {
    const firstParagraph = allParagraphs[0];
    console.log('First paragraph:', firstParagraph);
}

3. By Class Name: `getElementsByClassName()`

This method returns a live HTMLCollection of all elements that have the specified class name. You can also call this method on a specific element to search within its descendants.


const introParagraphs = document.getElementsByClassName('intro');
console.log(`Found ${introParagraphs.length} elements with class "intro".`);
if (introParagraphs.length > 0) {
    const introPara = introParagraphs[0];
    console.log('Intro paragraph:', introPara);
}

4. By CSS Selector: `querySelector()` and `querySelectorAll()`

These are powerful and versatile methods that use CSS selector syntax to find elements.

querySelector() returns the first element that matches the specified selector.
querySelectorAll() returns a static NodeList of all elements that match the specified selector.


// Find the first element with id 'container'
const container = document.querySelector('#container');

// Find the first paragraph with class 'intro'
const intro = document.querySelector('p.intro');

// Find all h1 elements
const headings = document.querySelectorAll('h1');

// Find all paragraphs within the element with id 'container'
const paragraphsInContainer = document.querySelectorAll('#container p');

console.log('Container:', container);
console.log('Intro paragraph:', intro);
console.log('All headings:', headings);
console.log('Paragraphs in container:', paragraphsInContainer);

Manipulating Element Content and Attributes

Once you have a reference to a DOM element, you can modify its content, attributes, and styles.

innerHTML: Gets or sets the HTML content within an element.
textContent: Gets or sets the text content within an element.
setAttribute(name, value): Sets an attribute on an element.
getAttribute(name): Gets the value of an attribute.
style property: Accesses inline styles (e.g., element.style.color = 'blue';).

Example:


const heading = document.querySelector('h1');
if (heading) {
    heading.textContent = 'Welcome to the Updated Docs!';
    heading.style.color = 'darkgreen';
}

const introPara = document.querySelector('.intro');
if (introPara) {
    introPara.innerHTML += '<strong> We hope you find this helpful.</strong>';
}

Conclusion

Mastering DOM manipulation is crucial for creating dynamic and interactive web experiences. By understanding these core JavaScript methods, you can effectively access and modify HTML content, providing a richer user interface.