[Browser] Talk about DOM

[Browser] Talk about DOM

Blog Description

The information involved in the article comes from the Internet and personal summary, which is intended to summarize personal learning and experience. If there is any infringement, please contact me to delete it, thank you!

illustrate

As a front-end development, most of the previous work was dealing with DOM. Now, most front-end engineers are dealing with Vue. Let Vue communicate with the DOM. This is not irony, it just illustrates this fact and also illustrates the power of Vue.

However, if you want a deeper understanding of the front-end, you need to open the Vue umbrella, look at the DOM, and even more so, be familiar with the DOM. To the bottom, but also to the top!

Maybe the next generation of "Vue" developers will not have the last name:laughing:.

What is DOM?

First of all, let me introduce what is DOM, this stinking problem can still be extended here, I am sorry, but still cannot remove this process:grimacing:.

Listen to W3C

DOM is a document object model ( D ocument O M odel), which is a W3C (World Wide Web Consortium) standard. It mainly defines the standards for accessing documents:

W3C Document Object Model (DOM) is a platform and language-neutral interface, which allows programs and scripts to dynamically access and update the content, structure and style of the document.

The W3C DOM standard is divided into 3 different parts:

• Core DOM-standard model for all document types

  • Document: Document object
  • Element: Element object
  • Attribute: attribute object
  • Text: text object
  • Comment: Comment object
  • Node: node object, the other 5 parent objects
• XML DOM-standard model for XML documents
• HTML DOM-Standard model of HTML documents

Listen to the summary

DOM is to encapsulate the various components of a markup language document into objects. Then the developer (front-end cut figure) can use these objects to perform dynamic CRUD operations on markup language documents.

What is HTML DOM?

When the web page is loaded, the browser will create the document object model of the page ( D ocument O M odel). Note that through HTML DOM, JavaScript can access and change all elements of HTML documents.

HTML DOM is a standard HTML objects model and programming interface . It defines:

• HTML element as object
• attributes of all HTML elements
• method to access all HTML elements
• events for all HTML elements

on how to get, change, add or delete HTML elements.

Summarize

We are familiar with the summary again: relaxed:, let’s not say much this time, HTML DOM is a set of CURD for HTML elements, CURD .

Document: Document object

Properties and methods of the HTML DOM Document object

Create (get)

In the html dom model, you can use the window object to get it. For example, if you type document in the browser, a document object will be returned.

window.document
document

Element object

The Element object can have child nodes of type element node, text node, and comment node.

Method to get the Element object

getElementById(): Get the element object according to the id attribute value. id attribute value is generally unique

getElementsByTagName(): Get the element objects based on the element name. The return value is an array

getElementsByClassName(): Get the element objects according to the Class attribute value. The return value is an array

getElementsByName(): Get the element objects according to the value of the name attribute. The return value is an array

Element properties and methods

At first glance, it seems too much, so much that I don't want to count at all, but I don't want to directly CV here.

Attribute/method	describe
element.accessKey	Sets or returns the shortcut key of the element.
element.appendChild()	Add a new child node to the element as the last child node.
element.attributes	Returns the NamedNodeMap of element attributes.
element.childNodes	Returns the NodeList of the element's child nodes.
element.className	Sets or returns the class attribute of an element.

Give the beginning, and then paste the full address, HTML DOM Element object

Attr object

In the HTML DOM, the Attr object represents HTML attributes, and HTML attributes always belong to HTML elements.

Method of operation

removeAttribute(): Remove attribute

setAttribute(): Set attributes

Attr's attributes and methods

HTML DOM Attr object

DOM 4 Warning!

In W3C DOM Core, Attr (attribute) objects inherit all attributes and methods from Node objects.

In DOM 4, Attr objects no longer inherit from Node. In order to ensure future code security, you should avoid using node object properties and methods on property objects.

NamedNodeMap object

In the HTML DOM, the NamedNodeMap object represents an unordered collection of element attribute nodes. The nodes in the NamedNodeMap can be accessed by name or index (number).

Text object

The Text object represents a text input field in an HTML form. This element can create a single-line text input field. When the user edits the displayed text and then transfers the input focus to other elements, the onchange event handler is triggered.

Text properties and methods

HTML DOM Input Text object

Comment object

Comment is a comment object. When encoding HTML, there will always be some comments, but the commented code, as we all know, is not executed. In HTML, it is stored in the Comment object.

The createComment() method can create comment nodes. Generally, there are relatively few operations on this object, and there is not much address to post.

Last words

When writing this article, I have been thinking about whether it is necessary to write such an article. In fact, it is difficult to write such an article. Although most of them are standards and protocols, it is often that these standards and protocols are difficult to break through. At the same time, I am slowly accumulating and accumulating, and I can write down my heart, even copy some basic things, and make up the round section, and it feels much more practical.

This article is also the second expansion, from 500 to 1500:relieved:. If you have a chance, or if you have accumulated more, then expand the writing, and hope to make a breakthrough on these standards by then.

thanks

Universal network

rookie tutorial , w3school

And hard-working self, personal blog , GitHub test , GitHub

Public Account-Guizimo, Mini Program-Xiaogui Blog