This is the 10th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Hello everyone, I am a bowl week, a front end that does not want to be drunk (inrolled). If I am lucky enough to write an article that you like, I am very lucky

This is the 40th article in the Front End from Scratch series – What is DOM?

This series of articles in the nuggets first, preparation is not easy to reprint please obtain permission

Use JavaScript on HTML pages

An overview of the

We’ve already learned the basic syntax of JavaScript and HTML and CSS, but we learned these two things separately, without any connection.

Is there a way to incorporate JavaScript into your HTML pages? The answer is yes, we can use

<script>The element

HTML provides

<script>Common attributes of the element

The attributes of

Async property: Indicates that scripts are requested in parallel and parsed and executed as soon as possible. TML5 new

Charset attribute: Represents the character set of code specified by the SRC attribute, but most browsers ignore its value. Not commonly used

The defer property: indicates that the script can be deferred until the document is fully parsed and displayed. Only for external files.

SRC attribute: This attribute defines the URI that refers to an external script, which can be used instead of embedding the script directly in the document. There should be no more embedded scripts in script element tags that specify SRC attributes.

Type attribute: This attribute defines the scripting language that the

use<script>The way of elements

There are two ways to use

  • Inline/inline: in<script>and</script>Write JavaScript code in between
  • External introduction mode: namely insrcProperty to introduce JavaScript files.

Example code is as follows:

<body>
  <! Use inline to import -->
  <script>
    console.log(This is a piece of JavaScript code)
  </script>
  <! SRC =' here can be absolute or relative paths; Usually relative path '-->
  <script src="01 text.js"></script>
</body>
Copy the code

<script>Position of elements

A 

<head>
  <script>
    console.log(This is a piece of JavaScript code)
  </script>
</head>

<body>
  <script>
    console.log(This is a piece of JavaScript code)
  </script>
</body>
Copy the code

The advantage in is that the CSS and JavaScript files are placed in the same place, but the result is that the page content in will not be rendered until all the JavaScript code has been downloaded and interpreted, leaving the page blank.

The best practice is to place all JavaScript references after the element content

Matters needing attention

Suggestion: keep

Both ways of using

What is the DOM

What is the DOM

DOM stands for Document Object Model. Among them

  • D saidDocumentThe DOM parses the HTML page into a document. A Document object is also provided
  • O saidObjectDOM parses each element of an HTML page into an object.
  • M saysModelIs the DOM that represents the relationship between objects.

The DOM standard

Since the standard specification of the DOM is organized and drafted by the W3C, the W3C definition of the DOM is the most authoritative interpretation available. The official translation is as follows:

DOM is a language – and platform-independent interface that allows any language or script to dynamically access and update the content, structure, and style of HTML documents. The HTML page can be further processed, and the results of that processing can be incorporated into the rendered HTML page.

The effect of DOM

DOM is designed to parse HTML page documents, making it easy for the JavaScript language to access and manipulate the content in HTML pages.

DOM is a standard specification defined by the W3C and supported by major browser vendors. DOM is not strictly a JavaScript language.

DOM can be used in the JavaScript language because browsers encapsulate the standard specification content of the DOM in a form supported by the JavaScript language.

This is also illustrated by the fact that we can only call objects in the DOM, but not modify them.

After the browser loads and runs the HTML page, the DOM structure is created. Because the content in the DOM is encapsulated as an object in the JavaScript language, we can use the JavaScript language to access and manipulate the content in the HTML page through the DOM structure.

The DOM tree

DOM can access and update content, structure, and style in HTML pages because DOM parses the HTML page into a tree structure.

{the}

Write in the last

If you are reading this, I am honored, if you like this article, you can give this article a little like; If you like this column, I will keep updating it to more than 100 posts, you can click on the link at the back to learn from the front – a bowl week column – nuggets (juejin. Cn) after entering to pay attention.

And you can give me a little attention, too.

Phase to recommend

  • Summary of 42 front-end layout schemes – Juejin (juejin. Cn)
  • – Juejin (juejin. Cn)