The way JavaScript uses HTML DOM for document manipulation _javascript tips

HTML DOM Tree

A brief introduction of DOM

Dom is a standard set up by the consortium for accessing structured documents such as XML and XHTML.

The Consortium Document Object Model (DOM) is a platform and language neutral interface that enables programs and scripts to dynamically access and update the content, structure, and style of a document

Core DOM: A standard model for any structured document

XML DOM: A standard Model for XML documents. Is the standard used to get, change, add, or delete XML elements.

HTML DOM: The Standard Model for HTML documents. Defines the objects and properties of all HTML elements, and the methods (interfaces) that access them.

Second, DOM node

According to the DOM specification, each component in the document is a node. Dom's 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 the label is an attribute node

Comments belong to annotation nodes

2.1DOM interface and its properties and methods

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

The programming interface of the DOM is defined by a set of standard properties and methods.

2.1.1DOM Properties

Some typical DOM properties:

Name of X.nodename:x

Value of X.nodevalue:x

The parent node of the x.parentnode:x, except for the root node, where only one parent node

X.childnodes:x child nodes, can have multiple child nodes

X.attributes:x a collection of attribute nodes that can have multiple properties

where x is a node object

2.1.2DOM method

Some typical DOM methods:

X.getelementsbytagname (name): Gets all elements with the specified label name

X.appendchild (node): Inserting child nodes into X

X.removechild (node): Removing child nodes from X

Instance:

Get the text content of the document title
document.getElementsByTagName ("title") [0].childnode[0].nodevalue

2.1.3 Access Node

Method one: By using the getElementsByTagName () method

Method Two: Traversing the node tree by looping

Method Three: Navigating in the node tree by using the relationship of nodes

2.1.4 Node Information :

NodeName: Gets the name of the node and is read-only.

NodeValue: Gets or sets the value of the node

NodeType: The type of node, is read-only. 1, representing elements, 2 for attributes, 3 for text, 8

Represents a comment, 9 represents a document

Third, node operation

3.1 Creating nodes

CreateElement (TagName): Creating ELEMENT nodes

createTextNode (text): Creating a text node

CreateAttribute (attrname): Creating an Attribute Node

3.2 Adding nodes

The newly created node needs to be associated with other existing nodes in order for it to truly belong to the document tree.

AppendChild (node) adds a new child node after the last child node within the current node, and the parameter is a new child node

InsertBefore (Newnode,node) adds a new child node before the child node specified within the current node, the first parameter is a new child node, and the second parameter is the child node specified within the current node

InsertAfter () Adds a new child node after the child node specified within the current node, the first parameter is the new child node, and the second parameter is the child node specified within the current node

Setattributenode () Sets the property node at the current element node, inviting the type of the node that calls this method to be the element type and the property node to which the parameter is set

Example:

3.3 Modifying nodes

Changing the node generally means changing the text inside the element, or changing the attribute value of the element. In both cases, the changes can be implemented by assigning values to the text node or attribute node after it has been accessed to the nodevalue. For the latter, you can also

Call the SetAttribute method on the element node to implement a change in the property value.

Example:

3.3 Deleting nodes

Deleting a node generally refers to deleting a child element or element containing text from within an element node, or to deleting an attribute node contained by an element node

Iv. Summary

Dom is the tree structure that the document behaves in memory, called the DOM tree; The DOM is the standard method and attribute for accessing documents developed by the consortium, called the DOM interface
Each data in the document is represented as a node on the tree structure, and the tree structure consisting of all nodes is called a node tree or a DOM tree
There are many types of nodes, such as element nodes, attribute nodes, text nodes, root nodes, and so on. Nodes have names and values, but different types of nodes have different name and value meanings

The createelement () method is used to create the element node, and the CreateAttribute () method is used to create the attribute node, and the createTextNode () method is used to create the text node and add child element nodes or text nodes to the element nodes. You can use the AppendChild () method. There are also InsertAfter () and InsertBefore () methods that are used to insert new nodes before and after a particular node. Note that the method of adding an attribute node for an element node is the Setattributenode () method.

To modify the value of a text node or to change the value of an attribute node, use the NodeValue property of the node

The delete node uses the RemoveChild () method.

About JavaScript use HTML DOM for document operation method, small make up to everybody introduce so much, hope to help everybody!