Table of Contents
Get to know DOM
DOM level
Node type
DOM ready
Inheritance hierarchy and nesting rules
Home Web Front-end HTML Tutorial Detailed explanation of the basics of Dom exploration

Detailed explanation of the basics of Dom exploration

Oct 12, 2016 am 09:50 AM

Get to know DOM

DOM level

enter description here



Note: The DOM level 0 standard does not actually exist, it is just a reference point for the historical coordinate system. Specifically, it refers to the DHTML originally supported by IE4.0 and Netscape Navigator4.0.

Node type

enter description here



Note: 1. The node represents the attribute in the element. Because the attribute is actually attached to the element, the attribute node cannot be regarded as a child node of the element. In the DOM, the attribute node is not considered to be part of the document tree, that is, the attribute A node is considered part of the element node that contains it and does not appear as a separate node in the document tree. 2. The document fragment node serves as a placeholder when inserting the node. 3.IE does not support character constants (because IE does not have Node objects).

DOM ready

Html tags must be parsed by the browser before they become DOM nodes.
enter description here
enter description here
DOM ready is more optimized than window.onload.

Inheritance hierarchy and nesting rules

enter description here



enter description here
HTML nesting rules
enter description here
Block and inline element nesting rules

  • Block elements can contain inline elements or certain block elements, but inline elements can only contain inline elements.

  • Special tags such as h1~h6, p, and dt can only contain inline elements.


Reference material: MOOC - Detailed explanation of the basics of DOM exploration

Statement of this Website
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

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Mar 04, 2025 pm 12:32 PM

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?

How do I use HTML5 form validation attributes to validate user input? How do I use HTML5 form validation attributes to validate user input? Mar 17, 2025 pm 12:27 PM

How do I use HTML5 form validation attributes to validate user input?

How to efficiently add stroke effects to PNG images on web pages? How to efficiently add stroke effects to PNG images on web pages? Mar 04, 2025 pm 02:39 PM

How to efficiently add stroke effects to PNG images on web pages?

What is the purpose of the <iframe> tag? What are the security considerations when using it? What is the purpose of the <iframe> tag? What are the security considerations when using it? Mar 20, 2025 pm 06:05 PM

What is the purpose of the <iframe> tag? What are the security considerations when using it?

What is the purpose of the <meter> element? What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

What is the purpose of the <meter> element?

What are the security implications of using iframes, and how can I mitigate them? What are the security implications of using iframes, and how can I mitigate them? Mar 18, 2025 pm 02:51 PM

What are the security implications of using iframes, and how can I mitigate them?

What is the purpose of the <datalist> element? What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

What is the purpose of the <datalist> element?

How do I use the HTML5 <meter> element to display numerical data within a range? How do I use the HTML5 <meter> element to display numerical data within a range? Mar 12, 2025 pm 04:08 PM

How do I use the HTML5 <meter> element to display numerical data within a range?

See all articles