Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.What is the DOM? | DOM Manipulation
Advanced JavaScript Mastery
course content

Course Content

Advanced JavaScript Mastery

Advanced JavaScript Mastery

1. Classes
Welcome to the CourseClass DeclarationChallenge: Building a Class Class MethodsChallenge: Adding Methods to a ClassParameter ObjectPrivate PropertiesChallenge: Implementing Private Properties in a ClassGetters and SettersChallenge: Managing Properties with Getters and SettersStatic PropertiesStatic MethodsChallenge: Using Static Properties and Methods in a ClassInheritance with extends and Using super()Challenge: Class Inheritance with Extends and Using Super
2. DOM Manipulation
What is the DOM?Querying the DOMChallenge: Querying the DOMUnderstanding the DOM HierarchyChallenge: DOM HierarchyDOM PropertiesWorking with Element AttributesChallenge: Working with Element Properties and AttributesAdding ElementsRemoving ElementsChallenge: Adding and Removing ElementsModifying Element StylesChallenge: Modifying Element Styles
3. Events and Event Handling
Introduction to Events and Event ListenersThe Event ObjectChallenge: Events and Event ListenersEvent Propagation and DelegationChallenge: Event Propagation and DelegationKeyboard and Mouse EventsManaging Event Listeners
4. Asynchronous JavaScript and APIs
Introduction to Asynchronous JavaScriptCallbacksPromisesAsync/AwaitWorking with APIsPractical API IntegrationChallenge: Working with APIWorking with Third-Party LibrariesChallenge: Working with Third-Party LibrariesHandling Multiple Asynchronous Requests

bookWhat is the DOM?

Now that we've covered JavaScript classes let's switch our focus to the Document Object Model (DOM), which is the interface that allows us to manipulate web pages. The next section will explore how JavaScript interacts with the DOM to create dynamic, interactive content.

Think of the DOM like a family tree. Each element in the document is like a family member, connected by relationships - parents, children, and siblings.

In the DOM, elements, attributes, and text are called nodes, and these nodes are arranged hierarchically, just like family members in a family tree. Some nodes are parents with children, while others are siblings.

The Relationship Between HTML and the DOM

When a browser loads an HTML document, it reads the HTML code and builds a corresponding DOM tree. HTML provides the static structure of the webpage, while the DOM is the live, dynamic representation that JavaScript can manipulate.

  1. HTML defines the initial family tree structure of who is connected to whom, but it is static and doesn't change on its own;   
  2. The DOM is the family tree in real-time, and it can be changed. New members (elements) can be added or removed, and relationships (parent-child, siblings) can be updated by JavaScript.

For example:

This HTML creates a basic family tree with an <html> node as the parent, and the <head> and <body> nodes as its children. Within the body, <h1> and <p> are siblings.

This structure is the DOM's live, interactive version of the HTML, where JavaScript can manipulate relationships between nodes (family members).

How JavaScript Interacts with the DOM

JavaScript can access and manipulate the DOM to make changes to the family tree in real-time. You can add new members, remove existing ones, or change their information.

  1. Accessing Family Members: Just like you can find a specific person in a family tree, JavaScript can access individual nodes in the DOM using methods like document.getElementById() or document.querySelector();
  2. Changing Information: Once a family member is accessed, their details can be updated. For example, JavaScript can change the text content or attributes of an element using properties like innerHTML or textContent;
  3. Modifying Relationships: JavaScript can also add new family members to the tree or remove them. This is done by manipulating the DOM structure with methods like appendChild() or removeChild().

Example

Consider this HTML:

Using JavaScript, we can change the text of the paragraph, just like updating the name of a family member:

After running the JavaScript code, the family tree (DOM) is updated, and the text of the paragraph changes from "Hello, World!" to "Hello, JavaScript!"

html

index

css

index

js

index

copy

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 2. Chapter 1
some-alt