Introduction to Ajax technology section 3 Dom basics and Dom operations html

Source: Internet
Author: User

1. Dom (Document Object Model) is called the Document Object Model.

It is a language-and platform-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of documents.

In Ajax, Dom is an application interface for HTML and XML documents. It can connect HTML and XML with the development language Javascript in Ajax.

Dom implementation in Javascript allows us to perform Dom operations on HTML and XML data through JavaScript code in Ajax, so as to dynamically modify and update pages and extract data.

 

2. xml and HTML dom

The DOM of HTML is basically the same as that of XML on the API interface. There is little difference in use, but there is essentially a difference.

The HTML Dom is a memory object tree. Only one copy is saved in the browser, and the HTML content modified by the HTML Dom is directly reflected in the browser;

The DOM of XML can be created multiple times, each of which can correspond to one XML text.

 

3. DOM object tree

In the eyes of Dom, HTML is composed of many different types of nodes, all of which belong to node objects.

The Node object has a nodetype attribute that can be used to determine the node type.

Table:

 

 

Node Type:

L element nodes are the most common nodes in HTML. <body>, <input>, and <div> are all element nodes on the page.

L an attribute node represents an attribute of an element node. For example, the value attribute in <input> can be considered as an attribute node.

L a text node represents a text message in an HTML page. For example, <div> Hello World </div>, "Hello world" is a text node.

L annotation text node is also easy to understand, HTML annotation information, <! -Comment message --> For example, such a piece of content is a comment text node.

L as the name suggests, the root node represents the HTML root. In JavaScript, there is a special object document, which can represent the HTML root node,

We will introduce many methods that are commonly used in Ajax for this special object.

 

 

4. Dom APIs

Attributes and methods of the root node:

 

Attributes and methods of element nodes:

 

(All) Node object attributes:

 

Method list:

 

Insertbefore can be inserted or moved! Very powerful!

 

Use apanta studio for development:

 

The first test code:

<HTML> 

Test in Firefox:

 

The second test code:

<HTML> 

 

Running result:

Click Insert node three times: Three divs are displayed.

Click Clone node twice: two more divs 2 are displayed.

Click Remove node: The last node has been removed.

Click replace node: the first and last node locations are replaced.

Related Article

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.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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