Home > Developer > Web Develop

HTML Dom (i): Understanding DOM

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

 Category:Html/javascript/css (Ten)

Copyright NOTICE: This article for Bo Master original article, reprint please indicate source Http://blog.csdn.net/ghsau.

What is DOM?
With JavaScript, you can refactor the entire HTML document. You can add, remove, change, or rearrange items on a page. To change something on a page, JavaScript requires access to all the elements in the HTML document. This portal, along with the methods and properties for adding, moving, changing, or removing HTML elements, is obtained through the Document Object Model (DOM). In 1998, the first level of the DOM specification was published by the consortium. This specification allows access to and manipulation of each individual element in an HTML page. All browsers have implemented this standard, so the DOM compatibility issue is almost impossible to trace. The DOM can be used by JavaScript to read, change HTML, XHTML, and XML documents.


The DOM is divided into different sections (core, XML, and HTML) and levels (DOM level 1/2/3):
Core DOM
Defines a standard set of objects for any structured document
XML DOM
Defines a standard set of objects for an XML document
HTML DOM
Defines a set of standard objects for HTML documents.

Node
Each component in the dom,html document is a node.
This is what the DOM provides:

    • The entire document is a document node
    • Each HTML tag is an element node
    • Text that is contained in an HTML element is a text node
    • Each HTML attribute is an attribute node
    • Comments belong to note nodes
Node Hierarchy
Nodes have hierarchical relationships with each other. All the nodes in the HTML document make up a document tree (or node tree). Each element, attribute, text, and so on in an HTML document represents a node in the tree. The tree starts at the document node and continues to extend its branches until all the text nodes are at the lowest level of the tree.

The following image represents a document tree (node tree):

Document tree (number of nodes)
Take a look at the following HTML document:

[HTML]View PlainCopyprint?
  2. <html>
  4. <head>
  6. <title>dom Tutorial</title>
  8. </head>
  10. <body>
  12. <H1>dom Lesson one</H1>
  14. <p>hello world! </P>
  16. </Body>
  18. </html>
All nodes above have relationships with each other. Each node except the document node has a parent node. For example, the parent node of,

HTML Dom (i): Understanding DOM

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
dom in html example html dom manipulation html dom reference html dom w3schools php html dom html dom nodes html dom select

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More