Search⌘ K

Accessing DOM Elements

Explore how to use JavaScript to access DOM elements through methods like querySelector and getElementById. Learn to manipulate page content dynamically by changing HTML and styles, enabling interactive web applications. This lesson equips you to select single or multiple elements, modify their properties, and apply styles programmatically.

Now that you are more comfortable with some programming fundamentals, we can take a deeper dive into the programming interface the browser provides to control the DOM using JavaScript.

Working with element nodes

Each element on your HTML page has an associated element node in the Document Object Model (DOM). The DOM can be accessed using JavaScript through the document object. document behaves like any other JavaScript object, and has many different properties and methods that are useful in accessing nodes in the DOM.

document.querySelector(selector)

Let’s start with an example:

Implementation of document.querySelector(selector)

document.querySelector() is a function that takes an element selector as an argument. These selectors are the same as those ...