Differences and connections between JavaScript and HTML DOM and the relationship between JavaScript and Dom _javascript tips

Source: Internet
Author: User



JavaScript is the most popular browser scripting language on the Internet. It's easy to use! You're going to love it!

JavaScript is used by millions of of pages to improve design, validate forms, detect browsers, create cookies, and apply more.


The HTML DOM is the standard for the International Consortium (the English abbreviation for the HTML Document Object model, Document Object model for HTML).

The HTML DOM defines a set of standard objects for HTML and a standard way to access and process HTML documents.

Through the DOM, you can access all HTML elements, along with the text and attributes they contain. The contents can be modified and deleted, and new elements can be created.

The HTML DOM is independent of the platform and programming languages. It can be used by any programming language, such as Java, JavaScript, and VBScript.


With JavaScript, you can refactor the entire HTML document. You can add, remove, change, or rearrange items on a page.

To change something on a page, JavaScript needs to get access to all the elements in the HTML document. This portal, along with methods and properties for adding, moving, changing, or removing HTML elements, is obtained through the Document Object Model (DOM).
JavaScript primarily uses the HTML DOM to get, change, and create HTML elements to achieve the goal of beautifying the page and manipulating the elements of the page. Therefore, the most common in JavaScript is the various HTML DOM elements and their respective properties. In addition to these DOM elements, JavaScript has its own objects, such as arrays.

Simply put, JavaScript can be considered primarily manipulating HTML DOM. The two are not the same.
JavaScript is a language, and Dom is a model that can dynamically modify documents in various languages, not just js,php.

The following separate pull out JavaScript and Dom relationship for everyone to explain

JavaScript and browser work

1. The browser gets and loads your page, parsing its contents from top to bottom.

When you encounter JavaScript, the browser parses the code, checks it for correctness, and executes the code.

The browser also creates an internal model (DOM) of an HTML page.

2.JavaScript continues, using the DOM to check the page, complete the modification, accept events from the page, or ask the browser to obtain additional data from the Web server.

How does JavaScript interact with a page?

JavaScript is code, HTML is labeled, something completely different

How do you make them interact?

The answer is to use the Document Object model (Docunment object models, referred to as DOM).

The beauty of DOM is that it provides a consistent way for all browsers to access the structure and content of HTML through code.

1. When the browser loads a page, the browser parses the HTML and creates an internal model of the document that contains all the elements of the HTML tag.

2, JavaScript can interact with the DOM (JavaScript uses DOM to create or delete elements, etc.)

Document is an object that reflects HTML, changing the state of the DOM by invoking the document method, which is to change the HTML page

3. When JavaScript modifies the DOM, the browser updates the page as it is dynamically updated.

Homemade Dom

Material: HTML5 page, web browser


1. Create a document node on top

2, take the top element of HTML page, here is the <HTML> element, add it as a child node of document into the DOM

3. For each element nested within the current element, add the element to the DOM as a child of the current element

4. For newly added elements, perform the third step and repeat the work until all elements are processed

The HTML page looks like this 

<! DOCTYPE html>

The DOM gets the following figure

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.