Dom programming (html and xml)

Source: Internet
Author: User

Relationship between html dom and xml dom:

What is DOM?

DOM is the W3C standard.

DOM defines the criteria for accessing HTML and XML documents:

"The W3C Document Object Model (DOM) is a platform-neutral and language-neutral interface that allows programs and scripts to dynamically access and update document content, structures, and styles ."

W3C DOM standards are divided into three different parts:

Core DOM-Standard Model for any structured document

Xml dom-Standard Model for XML documents

Html dom-Standard Model for HTML documents

DOM is the abbreviation of Document Object Model.

What is xml dom?

The xml dom defines the objects and attributes of all XML elements and their access methods.

What is html dom?

Html dom is:

Standard HTML Object Model

Standard HTML programming interface

W3C Standard

Html dom defines the objects and attributes of all HTML elements and the methods to access them.

In other words, html dom is a standard for getting, modifying, adding, or deleting HTML elements.

Html dom node tree

Html dom treats HTML documents as a tree structure. This structure is called a node tree:

With html dom, all nodes in the tree can be accessed through JavaScript. All HTML elements (nodes) can be modified or created or deleted.

DOM Node

According to W3C html dom standards, all content in HTML documents is node:

The entire document is a document Node

Each HTML element is an element node.

The text in the HTML element is a text node.

Each HTML attribute is an attribute node.

Annotation is a comment node.

Node parent, child, and compatriot

Nodes in the node tree have hierarchical relationships with each other.

Terms such as parent, child, and sibling are used to describe these relationships. The parent node has a subnode. Sub-nodes of the same level are called siblings ).

In the node tree, the top node is called root)

Each node has a parent node, except the root node (it does not have a parent node)

A node can have any number of sub-accounts

A compatriot is a node with the same parent node

The following figure shows a part of the node tree and the relationship between nodes:

Html dom method

The method is the action that can be executed on the node (HTML element.

Programming Interface

Html dom can be accessed through JavaScript (and other programming languages.

All HTML elements are defined as objects, while programming interfaces are object methods and object attributes.

Actions that you can perform (such as adding or modifying elements ).

Attribute is the value that you can obtain or set (such as the name or content of a node ).

Html dom object-methods and attributes

DOM attributes

InnerHTML attributes

The easiest way to get element content is to use the innerHTML attribute.

The innerHTML attribute is useful for retrieving or replacing HTML elements.

NodeName attribute

The name of the node specified by the nodeName attribute.

NodeName is read-only

The nodeName of the element node is the same as the label name.

The nodeName of the attribute node is the same as the attribute name.

The nodeName of the text node is always # text

The nodeName of the document node is always # document

Note: nodeName always contains the uppercase letter Tag Name of the HTML element.

NodeValue attributes

The nodeValue attribute specifies the value of a node.

The nodeValue of an element node is undefined or null.

The nodeValue of a text node is the text itself.

The nodeValue of the attribute node is the property value.

NodeType attributes

The nodeType attribute returns the node type. NodeType is read-only.

Important node types include:

Element type NodeType
Element 1
Attribute 2
Text 3
Note 8
Document 9

Html dom access

GetElementById () method

The getElementById () method returns the element with the specified ID:


GetElementsByTagName () method

GetElementsByTagName () returns all elements with the specified tag name.


GetElementsByClassName () method

If you want to find all HTML elements with the same class name, use this method:


The preceding example returns a list of all elements containing class = "intro:

Note: getElementsByClassName () is invalid in Internet Explorer 5, 6, 7, and 8.

Example of HTML events:

When a user clicks the mouse

When a webpage is loaded

When the image is loaded

When you move the cursor over an element

When the input field is changed

When an HTML form is submitted

When a user triggers a button

Onload and onunload events

When a user enters or leaves the page, the onload and onunload events are triggered.

The onload event can be used to check the browser type and version of a visitor so that different versions of web pages can be loaded based on the information.

Onload and onunload events can be used to process cookies.


Onchange event

Onchange events are often used for verification of input fields.

The following example shows how to use onchange. When you change the content of the input field, the upperCase () function is called.


Onmouseover and onmouseout events

Onmouseover and onmouseout events can be used to trigger a function when the mouse pointer moves to or leaves an element.

Onmousedown, onmouseup, and onclick events

Onmousedown, onmouseup, and onclick events are all the processes of Mouse clicking. When a mouse button is clicked

Onmousedown event. When the mouse button is released, the onmouseup event is triggered.

Onclick event.

Used to process DOM element attributes of XML documents

Attribute name



Returns an array of all child elements of the current element.


Returns the first subelement of the current element.


Returns the last child element of the current element.


Returns the elements that follow the current element.


Specifies the read/write attribute of the element value.


Returns the parent node of an element.


Returns the element adjacent to the current element.

DOM element method used to traverse XML documents

Attribute name


GetElementById (id) (document)

Obtain the elements in the document with the specified unique ID property value

GetElementsByTagName (name)

Returns the array of child elements specified by the calibration name in the current element.

HasChildNodes ()

Returns a Boolean value indicating whether the element has a child element.

GetAttribute (name)

Returns the attribute value of an element. The attribute is specified by name.

W3C DOM attributes and methods used for dynamic content creation



Document. createElement (tagName)

The createElement method on the document object can create elements specified by tagName. If the string div is used as the method parameter, a div element is generated.

Document. createTextNode (text)

The createTextNode method of the Document Object creates a node that contains static text.

. AppendChild (childNode)

The appendChild method adds the specified node to the subnode list of the current element (as a new subnode ). For example, you can add an option element as a subnode of the select element.

. Getattrure (name)

These methods obtain and set the value of the name attribute in the element respectively.

.. Setattrube (name, value)

. InsertBefore (newNode, targetNode)

This method inserts the node newNode as the child node of the current element in front of the targetNode element.

. RemoveAttribute (name)

This method deletes the attribute name from the element.

. RemoveChild (childNode)

This method deletes the child element childNode from the element.

. ReplaceChild (newNode, oldNode)

This method replaces the node oldNode with the node newNode.

. HasChildnodes ()

This method returns a Boolean value that specifies whether the element has child elements.

For the attributes and methods of all objects in dom, see w3cschool.

Browser Object Reference Manual

Click the following link to obtain more information about the following objects, including their collections, attributes, methods, and events. It contains a large number of instances!

Object Description
Window The top-level object in the JavaScript level, indicating the browser window.
Navigator Contains information about the client browser.
Screen Contains information about the client display.
History Contains the URL accessed by the browser window.
Location Contains information about the current URL.
Html dom object reference manual

Click the following link to learn more about objects, their collections, attributes, methods, and events. It contains a large number of instances!

Object Description
Document Represents the entire HTML document and can be used to access all elements on the page.
Anchor Element
Area Elements in image ing
Base RepresentativeElement
Body RepresentativeElement
Button RepresentativeElement
Event Indicates the status of an event.
Form Representative Element
Frame Represents the <frame> element
Frameset Represents the <frameset> element
Iframe Represents the <iframe> element
Image Element
Input button Represents a button in an HTML form.
Input checkbox Indicates the check box in an HTML form.
Input file Uploads files in HTML forms.
Input hidden Represents a hidden field in an HTML form.
Input password Indicates the password field in the HTML form.
Input radio Indicates the radio button in the HTML form.
Input reset Indicates the reset button in the HTML form.
Input submit The confirmation button in the HTML form.
Input text Indicates the text input field (text box) in an HTML form)
Link Representative Element
Meta Representative Element
Object RepresentativeElement
Option RepresentativeElement
Select Indicates the selection list in the HTML form.
Style Represents a separate style Declaration
Table Representative Element Element
TableData Representative Element
TableRow Representative
Textarea RepresentativeElement </td> </tr> </tbody> </table>

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: 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.