the difference:


JavaScript is the most popular browser scripting language on the Internet.Very easy to use! You will love it!

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

html dom

html dom is the w3c standard (short for html document object model,document object model for html).

html dom defines a standard set of objects for html,And standard methods for accessing and processing html documents.

With dom, you can access all the html elements, along with the text and attributes they contain.You can modify and delete the content,You can also create new elements.

html dom is platform and programming language independent.It can be used by any programming language such as java, javascript, and vbscript.


With javascript, you can reconstruct the entire html document. You can add, remove, change, or rearrange items on the page.

To change something on the page,JavaScript needs to have access to all elements in the html document.This entrance,Along with methods and attributes that add, move, change, or remove html elements,They are all obtained through the document object model (dom).

JavaScript mainly uses html dom to obtain, change, and create html elements, so as to achieve the goal of beautifying pages and manipulating page elements.Therefore, the most common in JavaScript are the various html dom elements and their respective attributes.In addition to these dom elements, javascript has its own objects,For example an array.

Simply put, you can think of javascript as mainly manipulating the html dom. The two are different.

JavaScript is a language, and dom is a model that can dynamically modify documents in various languages ​​(not only js, but also PHP).

The following is a separate explanation of the relationship between javascript and dom.

javascript working with browser

1. The browser fetches and loads your page,Parse its contents from top to bottom.

When encountering javascript, the browser will parse the code,Check its correctness,Then execute the code.

The browser will also build an internal model (dom) of the html page.

2.javascript continues to execute,Use dom to check the page, complete the modification, receive events from the page,Or ask the browser to get other data from the web server.

How does javascript interact with the page?

javascript is code, html is markup, something completely different

How do you make them interact?

The answer is to use a document object model (dom).

The beauty of dom is that it provides a consistent way across all browsers,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.It contains all the elements of the html tag.

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

A document is an object that reflects html. The state of the dom is changed by calling the document method, which is to change the html page.

3. When the DOM is modified by JavaScript, the browser will dynamically update the page.

Homemade dom

Material:well-formed html5 page, web browser


1, create a document node on the top

2, take the topmost element of the html page,Here is theelement, add it to the dom as a child of the document

3. For each element nested in the current element,Add this element as a child of the current element to the dom

4. For the newly added element,Perform the third step,repeating work,Until all elements are processed

The html page is as follows:

<! Doctype html>
 <html lang="helloworld">
 <meta cherset="utf-">
 <script src="dom.js"></script>
 <h>my dom</h>
  today, i am making a dom !!!

The resulting dom is shown below

  • Previous Method for JS to read and parse JSON type data
  • Next PHP using PHPexcel to import and export data