DOM reinforcement in javascript _ basic knowledge

This article introduces how to enhance DOM in javascript. If you need it, please refer to it. I. DOM

DOM: DOM = Document Object Model, Document Object Model. DOM can be used to access and modify the content and structure of a Document in a way independent of platform and language. In other words, this is a common way to represent and process an HTML or XML document. It is very important that DOM is designed based on the specification of Object Management Organization (OMG), so it can be used in any programming language.
D: Document-html or xml
O: attributes and methods of Object-document objects
M: Model
DOM is a tree-based API for xml (html.
DOM tree: the hierarchy of nodes.
DOM represents a document as a family tree (parent, child, brother)
DOM defines the Node interface and many Node types to represent multiple aspects of XML nodes.

Ii. DOM Structure

Iii. Nodes

According to the DOM, each component in the HTML document is a node. DOM is as follows:
The entire document is a document Node
Each HTML Tag is an element node.
Text contained in HTML elements is a text node
Each HTML attribute is an attribute node.
Annotation belongs to the annotation Node

Iv. Node hierarchy

Nodes have a hierarchical relationship with each other.
All nodes in the HTML document form a document tree (or node tree ). Each element, attribute, and text in an HTML document represents a node in the tree. The tree begins with the document node and continues to expand until all text nodes at the lowest level of the tree.

V. nodes and their types

Node
* As shown in the structure chart, the entire document is a document node.
* Each HMTL label is an element node.
* The text in the label is a text node.
* The attribute of a tag is an attribute node.
* Everything is a node ......

Node tree
The concept of the node tree is clear at a glance, and the top is the "root. Nodes have parent-child relationships, ancestor-child relationships, and sibling relationships. These relationships look good, and the parent-child relationship is connected directly. One of my fathers is a sibling relationship ......

6. Search for and access nodes

You can find the elements you want to operate on in several ways:
Use the getElementById () and getElementsByTagName () Methods
Use the parentNode, firstChild, and lastChild attributes of an element node

7. Search for element nodes

GetElementById ()
Find an element with a given id attribute value. The returned value is an element node with a given id attribute value. If such an element does not exist, it returns null.
Var oElement = document. getElementById (sID)
This method can only be used for document objects.

Function test (){
Var usernameElement = document. getElementById ("tid ");
// Obtain the element value
Alert ("usernameElement. value:" + usernameElement. value)
// Obtain the element type
Alert ("usernameElement. type:" + usernameElement. type)
}

GetElementsByName ()
Search for all elements with the given name attribute. This method returns a node set, which can be processed as an array. The length attribute of this set is equal to the total number of all elements with the given name attribute in the current document.

Function test (){
Var tnameArray = document. getElementsByName ("tname ");
Alert (tnameArray. length );
For (var I = 0; I Window. alert (tnameArray [I]. value );
}
}

The Code is as follows: