Introduction to DOM Selection

Selecting elements in the Document Object Model (DOM) is essential for manipulating HTML content dynamically with JavaScript. The document object provides methods to locate elements by their ID, tag name, class, or name attribute.

Key Point: DOM selection methods allow you to get references to elements to perform actions like updating content, modifying styles, or handling events.

getElementById

The getElementById method retrieves a single element by its unique id attribute, which must be unique within the document.

getElementById Example

<!-- HTML -->
<h1 id="content">Content when page loaded</h1>
<button onclick="btnClicked()">Click me</button>

function btnClicked() {
    const contentElement = document.getElementById('content');
    contentElement.innerHTML = 'Content after button clicked!';
}

This changes the h1 content when the button is clicked.

Try it Yourself

Content when page loaded


getElementsByTagName

The getElementsByTagName method returns a live HTMLCollection of elements with the specified tag name.

getElementsByTagName Example

<!-- HTML -->
<p>Paragraph 1</p>
<p>Paragraph 2</p>

const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs); // Logs HTMLCollection of <p> elements
console.log(paragraphs[0]); // First paragraph

This retrieves all p elements in the document.

Tag Name Demo

This is paragraph 1

This is paragraph 2

This is paragraph 3

getElementsByClassName

The getElementsByClassName method returns a live HTMLCollection of elements with the specified class name.

getElementsByClassName Example

<!-- HTML -->
<p class="example">Paragraph 1</p>
<h3 class="example">Heading 3</h3>

const examples = document.getElementsByClassName('example');
console.log(examples); // Logs HTMLCollection of elements with class 'example'

This retrieves all elements with the example class.

getElementsByName

The getElementsByName method returns a live NodeList of elements with the specified name attribute, often used with form elements like radio buttons.

getElementsByName Example

<!-- HTML -->
<input type="text" name="para">
<input type="text" name="para">

const namedElements = document.getElementsByName('para');
console.log(namedElements); // Logs NodeList of elements with name 'para'

This retrieves all elements with the name="para" attribute.

Searching Within an Element

Methods like getElementsByTagName, getElementsByClassName, and getElementsByName can be called on specific elements to search within their descendants, unlike getElementById, which is document-level only.

Element-Specific Search

<!-- HTML -->
<div id="test">
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</div>
<div>
    <p>Paragraph 3</p>
</div>

const testDiv = document.getElementById('test');
const divParagraphs = testDiv.getElementsByTagName('p');
console.log(divParagraphs); // Logs HTMLCollection of <p> in test div only

This retrieves only the p elements within the test div.

Summary Table

Method Returns Live Collection Scope
getElementById() Single element No Document only
getElementsByTagName() HTMLCollection Yes Document or element
getElementsByClassName() HTMLCollection Yes Document or element
getElementsByName() NodeList Yes Document or element

Best Practices

  • Use getElementById for unique elements, ensuring IDs are unique.
  • Use getElementsByTagName or getElementsByClassName for collections of elements.
  • Use getElementsByName for form elements with shared names, like radio buttons.
  • Scope searches to specific elements when possible to improve performance.
  • Handle collections carefully, as they are live and reflect DOM changes.