HTML DOM (Study Notes 1)_html/css_WEB-ITnose-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

HTML DOM (Study Notes 1)_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:50 AM

Well, I have been working for a while, and my understanding of programming has become deeper. I used to think that HTML/CSS/JAVASCRIPT was relatively simple and I could just read online tutorials. W3C is my go-to place for learning this knowledge. I went to a website. I am very grateful to her for letting me learn more about the front-end. But now I don’t see it that way. The most important thing for front-end engineers is to work through these (of course, there are definitely more issues to consider. It is broader and deeper, including architectural issues, compatibility issues, performance issues, various plug-ins, JS libraries and various front-end tools, etc.). These contents are very rich. I am also very interested and think so. More professional! At least it makes me feel that it is more fun than fixing bugs, modifying data for customers, writing some documents, testing, publishing, and switching back and forth between several projects every day! In the past, when I wrote blogs, I always wanted to write something that others had never written before, that I had personally experienced, and that was of some value to others and myself! Now I feel that my learning experience should be recorded. After all, even simple knowledge will gradually become blurred with the passage of time if it is not used frequently. Recording it, even if it is organized according to my own understanding, can Deepen your understanding of knowledge! I am not a genius. I have no formulas, no codes, and no special way of understanding the world in my head. So I will choose to go step by step in a down-to-earth manner!

1: What is HTML DOM?

Let’s first look at the structure of a simple HTML document

<!DOCTYPE html><html lang="en">    <head>        <link rel=stylesheet href="">        <meta charset="UTF-8">        <title>文档标题</title>    </head>    <body>        <div>文本内容</div>        <div>             <div></div>        </div>        <table></table>    </body></html>

If we rotate the entire document 90 degrees clockwise, we will see It looks like the following

The full English name of HTML DOM is: Hyper Text Markup Language Document Object Model translated into Chinese is the document object model of hypertext markup language. My understanding is to look at the HTML document from another perspective, as an upside-down DOM tree. The operation of the HTML document can be regarded as the operation of the DOM tree. Everything in the HTML document is mapped here. On a DOM tree!

W3C’s explanation is: DOM is a W3C standard. DOM defines standards for accessing HTML and XML documents (W3C DOM is a platform- and language-neutral interface that allows programs and scripts to dynamically access and update documents. content, structure and style. ) The W3C standard is divided into 3 different parts:

1) Core DOM?? A standard model for any structured document

2) XML DOM?? Standard model for XML documents

3) HTML DOM?? Model for HTML documents

We only care about HTML DOM here. The official description is:

1) HTML standard object model

2) HTML standard programming interface

3) W3C standard

HTML DOM defines the objects and attributes of all HTML elements, as well as accessing them method. To put it simply, HTML DOM is a standard on how to obtain, modify, add or delete HTML elements. That is to change the method of operating HTML documents. The main thing is to add the participation of JAVASCRIPT, a scripting language, to operate HTML documents!

2: What is the role of HTML DOM?

Well, the most important thing is to enhance the dynamic interactivity of the website, because you can use JAVASCRIPT or server-side scripts to control HTML documents!

3: What are the key points of the content of HTML DOM?

I think that after changing the HTML document into a DOM tree, you can operate on the DOM tree, whether it is modifying, adding, deleting, or changing the structure or style of the node. , the first step is always to obtain a node first, just like adding, deleting, modifying and checking the data in the database, the status of checking is very important! Therefore, we need to study the methods and attributes of query with special care!

4: The basic content of HTML DOM?

Before learning HTML DOM, you need to understand HTML/CSS/JAVASCRIPT. As expressed in the picture below, only the cooperation of these four can make the display more flexible, colorful and fun. web page!

Of course, using the DOM tree to express HTML documents must also have its own set of control methods. We need to comprehensively change the perspective. We need to learn some methods to obtain nodes in the DOM tree, modify nodes, add nodes, delete nodes; change the style, structure, etc. of nodes. We need to learn some various types of nodes and node attributes. Content, related to HTML, we need to know what tag a certain node is, its attributes, its events, its connection with other nodes, etc. You can think of more reasonable ways and methods to control the DOM tree. , attributes, events, etc. HTML DOM has been thought of for us. These are what we need to learn!

Well, the goal of this article is to give me a clearer understanding of HTML DOM, let me know what it is, what it is used for, and what content it contains, and then I will slowly upload its content. Supplement it! Thanks W3C!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

Understanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

The Role of HTML: Structuring Web ContentApr 11, 2025 am 12:12 AM

The role of HTML is to define the structure and content of a web page through tags and attributes. 1. HTML organizes content through tags such as , making it easy to read and understand. 2. Use semantic tags such as, etc. to enhance accessibility and SEO. 3. Optimizing HTML code can improve web page loading speed and user experience.

HTML and Code: A Closer Look at the TerminologyApr 10, 2025 am 09:28 AM

HTMLisaspecifictypeofcodefocusedonstructuringwebcontent,while"code"broadlyincludeslanguageslikeJavaScriptandPythonforfunctionality.1)HTMLdefineswebpagestructureusingtags.2)"Code"encompassesawiderrangeoflanguagesforlogicandinteract

HTML, CSS, and JavaScript: Essential Tools for Web DevelopersApr 09, 2025 am 12:12 AM

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

The Roles of HTML, CSS, and JavaScript: Core ResponsibilitiesApr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

See all articles