HTML CSS JAVASCRIPT MySQL PHP JQUERY LIQUID

JavaScript HTML DOM

❮ Previous Next ❯

Using the HTML DOM, JavaScript has the ability to reach and modify every part of an HTML documen

The HTML DOM (Document Object Model)

When a webpage loads, the browser forms aDocument Object Model (DOM) of the page.

The HTML DOM model is like a tree made up of Objects:

The HTML DOM Tree of Objects

html
└── head
|   ├── title
|   |   └── Text
|   └── meta
└── body
    ├── div
    |   ├── h1
    |   |   └── Text
    |   ├── p

    |   |   └── Text
    |   └── img
    └── p
        └── Text

JavaScript gains the necessary capabilities to generate dynamic HTML through the object model.

  • JavaScript has the ability to modify all the elements on a webpage.
  • JavaScript has the ability to modify every attribute in an HTML page.
  • JavaScript has the ability to modify the CSS styles on a webpage.
  • JavaScript has the ability to delete current HTML elements and attributes.
  • JavaScript can include fresh HTML elements and features.
  • JavaScript can respond to every HTML event on the page.
  • JavaScript has the ability to generate fresh events in an HTML page.

What You Will Learn

In the upcoming sections of this guide, you will discover:

  • How to modify the text inside HTML elements
  • How to modify the appearance (CSS) of HTML elements
  • How to respond to HTML DOM events
  • How to insert and remove HTML elements

What is the DOM?

The DOM follows the W3C standard for the World Wide Web.

The DOM sets a rule for getting into documents.

The W3C Document Object Model (DOM) is like a bridge that lets programs and scripts easily interact with and change the content, structure, and style of a document. It's a versatile interface that works across different platforms and programming languages.

The W3C DOM standard is divided into three parts:

  • Core DOM is the universal model for various document types.
  • XML DOM is a standard model used for XML documents.
  • HTML DOM is a standard model used for HTML documents.

What is the HTML DOM?

The HTML DOM is a regular object model and programming interface for HTML. It outlines:

  • HTML elements are like objects
  • The properties of every HTML element.
  • Ways to reach all parts of an HTML document.
  • The events or occurrences for all HTML elements.

Put simply, the HTML DOM is a set of rules that explains how to access, modify, include, or remove HTML elements.
❮ Previous Next ❯