JavaScript DOM Selection — JavaScript Tutorial

Finding HTML Elements

The Document Object Model (DOM) represents your HTML as JavaScript objects.

You can select and manipulate HTML elements using JavaScript.

Example

// Select by ID
const element = document.getElementById('myId');

// Select by Class Name
const elements = document.getElementsByClassName('myClass');
// Returns HTMLCollection (array-like)

// Select by Tag Name
const paragraphs = document.getElementsByTagName('p');

// Query Selector (CSS selector)
const first = document.querySelector('.myClass');
const all = document.querySelectorAll('.myClass');
// Returns first match / NodeList of all matches

// Complex Selectors
document.querySelector('#container .item:first-child');
document.querySelectorAll('div.card[data-active="true"]');

// Parent/Child Navigation
element.parentElement;     // Parent
element.children;          // Children
element.firstElementChild; // First child
element.lastElementChild;  // Last child
element.nextElementSibling; // Next sibling
element.previousElementSibling; // Previous sibling

getElementById() - Select by ID
getElementsByClassName() - Select by class
getElementsByTagName() - Select by tag
querySelector() - Select first match (CSS)
querySelectorAll() - Select all matches
querySelector is most versatile
Returns null if not found

Try DOM Selection

HTML

<div class="dom-demo">
  <h3>Element Selector</h3>
  <div id="container">
    <p class="text" data-type="intro">First paragraph</p>
    <p class="text" data-type="content">Second paragraph</p>
    <p class="text highlight" data-type="content">Third paragraph (highlighted)</p>
  </div>
  <button onclick="selectById()">Select by ID</button>
  <button onclick="selectByClass()">Select by Class</button>
  <button onclick="selectHighlight()">Select Highlighted</button>
  <div id="selectionOutput"></div>
</div>

CSS

.dom-demo { padding: 20px; background: #f0f0f0; border-radius: 8px; }
#container { background: white; padding: 15px; margin: 10px 0; border-radius: 5px; }
.text { padding: 8px; margin: 5px 0; background: #f9f9f9; border-left: 3px solid #ddd; }
.highlight { background: #fff3cd; border-left-color: #ffc107; }
button { padding: 10px 15px; background: #d1039e; color: white; border: none; border-radius: 5px; cursor: pointer; margin: 5px; font-size: 13px; }
#selectionOutput { margin-top: 15px; padding: 15px; background: white; border-radius: 5px; }

JavaScript

function selectById() {
  const container = document.getElementById('container');
  const output = document.getElementById('selectionOutput');
  output.innerHTML = `
    <strong>Selected by ID (#container):</strong><br>
    Tag: ${container.tagName}<br>
    Children count: ${container.children.length}<br>
    Text content: ${container.textContent.trim().substring(0, 50)}...
  `;
}

function selectByClass() {
  const texts = document.querySelectorAll('.text');
  const output = document.getElementById('selectionOutput');
  let html = '<strong>Selected by Class (.text):</strong><br><br>';
  
  texts.forEach((text, index) => {
    html += `Paragraph ${index + 1}: "${text.textContent}"<br>`;
  });
  
  output.innerHTML = html;
}

function selectHighlight() {
  const highlighted = document.querySelector('.highlight');
  const output = document.getElementById('selectionOutput');
  
  if (highlighted) {
    output.innerHTML = `
      <strong>Selected .highlight element:</strong><br>
      Content: "${highlighted.textContent}"<br>
      Data-type: ${highlighted.dataset.type}<br>
      Classes: ${highlighted.className}
    `;
  } else {
    output.innerHTML = 'No highlighted element found';
  }
}

Notes

querySelector and querySelectorAll are the most flexible. Use them for most selections!