Search⌘ K
Home
Courses
Web Development: Unraveling HTML, CSS, and JavaScript

How it Works: Querying the Document

Explore how to query the Document Object Model using JavaScript methods such as getElementsByTagName. Learn to retrieve and manipulate HTML elements for dynamic, responsive web pages. This lesson helps you understand how to access DOM elements and iterate over them to influence page content.

We'll cover the following...

How it works

Because originally hideandseek.js was empty, including it in index.html did not actually run any JavaScript code.

However, in step three, when you added code to this file it was executed. That is how the output in the below image was created.

You added this code:

Node.js
var titles = document.getElementsByTagName('h2');
for (var i = 0; i < titles.length; i++) {
  var title = titles[i];
  document.write('<h3>' + title.textContent + '</h3>');
}

The key operation is in line one. The document object represents the current document in the browser. ...