JavaScript method for using HTMLDOM for document operations _ javascript skills

DOM is a W3C standard for accessing structured documents such as XML and XHTML. This article describes how to use HTML Dom to perform document operations in JavaScript. For more information, see. Html dom tree

1. Introduction to DOM

DOM is a W3C standard for accessing structured documents such as XML and XHTML.

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

Core DOM: Standard Model for any structured document

Xml dom: a standard model for XML documents. Is a standard used to obtain, modify, add, or delete XML elements.

Html dom: a standard model for HTML documents. Defines the objects and attributes of all HTML elements and the methods (interfaces) for accessing them ).

Ii. DOM nodes

According to the DOM specification, each component in the document is a node. DOM rules:

The entire document is a document node, also known as the root node.

Each label is an element node.

The text contained in the label is a text node.

Each attribute of a tag is an attribute node.

Annotation belongs to the annotation Node

2.1DOM interface and its attributes and Methods

DOM simulates a document as a series of node interfaces. Nodes can be accessed through JavaScript or other programming languages. Pair

DOM programming interfaces are defined through a set of standard attributes and methods.

2.1.1DOM attributes

Some typical DOM attributes:

X. nodeName: name of x

X. nodeValue: the value of x.

X. parentNode: the parent node of x. Except for the root node, there is only one parent node.

X. childNodes: child node of x, which can have multiple child nodes

X. attributes: a set of attribute nodes of x, which can have multiple attributes.

X is a Node object.

2.1.2DOM Method

Some typical DOM methods:

X. getElementsByTagName (name): obtains all elements with the specified tag name.

X. appendChild (node): Insert a subnode to x

X. removeChild (node): deletes a subnode from x.

Instance:

// Obtain the text content of the document title document. getElementsByTagName ("title") [0]. childNode [0]. nodeValue

2.1.3 Access Node

Method 1: Use the getElementsByTagName () method

Method 2: traverse the node tree cyclically

Method 3: Use the node relationship to navigate to the node tree

2.1.4 node Information:

NodeName: Get the node name, which is read-only.

NodeValue: gets or sets the value of a node.

NodeType: the node type, which is read-only. 1, indicating element, 2 indicating attribute, 3 indicating text, 8

Comment, 9 document

Iii. node operations

3.1 create a node

CreateElement (tagName): creates an element node.

CreateTextNode (text): Creates a text node.

CreateAttribute (attrName): creates an attribute node.

3.2 Add a node

The newly created node must be organized with other existing nodes to make it truly a document tree.

AppendChild (node) adds a new subnode after the last subnode in the current node. The parameter is a new subnode.

InsertBefore (newNode, node) adds a new subnode before the subnode specified inside the current node. The first parameter is the new subnode, and the second parameter is the subnode specified inside the current node.

InsertAfter () adds a new subnode after the subnode specified inside the current node. The first parameter is a new subnode, and the second parameter is a subnode specified inside the current node.

SetAttributeNode () is used to set attribute nodes on the current element node. The node that calls this method is invited to be of the element type, and the attribute node to be set for parameters

Example:

 Use DOM to create and add nodes