JavaScript and HTML: Exploring the DOM

What is the DOM

When dealing with JavaScript and HTML, you will likely hear people refer to the DOM. DOM stands for Document Object Model, and it is essentially an interface that allows JavaScript to access the web page “document.”

To illustrate this point, imagine a string puppet for a minute. If you think of a web page as a puppet, then the DOM could be thought of as the strings and the points at which they attach to the puppet.

The Document Object Model (DOM) represents the structure of a web page as a tree-like structure of nodes. Each node corresponds to an element, attribute, or text within the HTML document. JavaScript interacts with the DOM to dynamically update and manipulate web content, providing interactivity and responsiveness.

Using this same analogy, JavaScript is best compared to the stick that controls the strings. The DOM allows us to connect JavaScript and HTML together.

Included with a browser’s JavaScript version is an object called the “document.” It is on this object that we find methods that allow us to interact and manipulate the DOM. Continuing with the analogy, the puppet control sticks have multiple “methods” or actions that can be used to manipulate the puppet.

The DOM is made up of elements that are connected in a tree-like structure. The elements of this tree are objects, and they can be accessed from the root document object mentioned in the previous paragraph.

In a tree form, this would look like:

Selecting DOM Elements

Selecting DOM elements is the first step in manipulating them. JavaScript provides several methods to select elements from the DOM:

getElementById: Selects an element by its ID.

  const element = document.getElementById('myElement');

getElementsByClassName: Selects all elements with a specific class name.
```
  const elements = document.getElementsByClassName('myClass');
```
getElementsByTagName: Selects all elements with a specific tag name.
```
  const elements = document.getElementsByTagName('div');
```
querySelector: Selects the first element that matches a CSS selector.
```
  const element = document.querySelector('.myClass');
```
querySelectorAll: Selects all elements that match a CSS selector.
```
  const elements = document.querySelectorAll('.myClass');
```

Modifying DOM Elements

Once you’ve selected an element, you can modify it in various ways:

Changing Text Content:

  const element = document.getElementById('myElement');
  element.textContent = 'Hello, World!';

Changing HTML Content:

  const element = document.getElementById('myElement');
  element.innerHTML = '<strong>Hello, World!</strong>';

Changing Attributes:

  const element = document.querySelector('img');
  element.src = 'newImage.jpg';

Changing Styles:

  const element = document.getElementById('myElement');
  element.style.color = 'blue';
  element.style.fontSize = '20px';

Adding and Removing Classes:

  const element = document.getElementById('myElement');
  element.classList.add('newClass');
  element.classList.remove('oldClass');

Conclusion

The DOM (Document Object Model) acts as a bridge between HTML and JavaScript, allowing you to interact with and modify the structure, content, and styles of a web page dynamically. By selecting DOM elements and using JavaScript methods, you can create responsive, interactive web experiences. Mastering DOM manipulation is essential for modern web development.