DOM enhancement in javascript

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.

<Input type = "text" value = "60 th anniversary of the National Day" id = "tid">
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.

<Form name = "form1">
<Input type = "text" name = "tname" value = "60_1"/> <br>
<Input type = "text" name = "tname" value = "60_2"/> <br>
<Input type = "text" name = "tname" value = "60_3"/> <br>
<Input type = "button" name = "OK" value = "save" id = "OK" onclick = "test ();">
</Form>
Function test (){
Var tnameArray = document. getElementsByName ("tname ");
Alert (tnameArray. length );
For (var I = 0; I <tnameArray. length; I ++ ){
Window. alert (tnameArray [I]. value );
}
}

 

Copy codeThe Code is as follows:
<Input type = "text" name = "username" value = "60_1"/> <br>
<Input type = "text" name = "username" value = "60_2"/> <br>
<Input type = "text" name = "username" value = "60_3"/> <br>
<Input type = "button" name = "OK" value = "save" id = "OK"> <br>
<Script language = "JavaScript">
// This method returns an array type
Var usernameElements = document. getElementsByName ("username ");
For (var I = 0; I <usernameElements. length; I ++ ){
// Obtain the element type
// Alert (usernameElements [I]. type)
// Obtain the value of the element value
// Alert (usernameElements [I]. value );
// Use the method of direct function quantity
UsernameElements [I]. onchange = function (){
Alert (this. value );
}
}
</Script>

<Input type = "text" name = "username" value = "60_1"/> <br> <input type = "text" name = "username" value = "National Day 60 years _ 2"/> <br> <input type = "text" name = "username" value = "National Day 60 years _ 3"/> <br> <input type = "button" name = "OK" value = "save" id = "OK"> <br> <script language = "JavaScript"> // This method returns an array type var usernameElements = document. getElementsByName ("username"); for (var I = 0; I <usernameElements. length; I ++) {// obtain the element type // alert (usernameElements [I]. type) // obtain the value of the element value // alert (usernameElements [I]. value); // usernameElements [I]. onchange = function () {alert (this. value) ;}}</script>
 

GetElementsByTagName ()
Search for all elements with a signature for the calibration. 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 in the current document that have signature for calibration.
Var elements = document. getElementsByTagName (tagName );
Var elements = element. getElementsByTagName (tagName );
This method does not have to be used throughout the document. It can also be used to search for elements with a calibration signature among the subnodes of a specific element.
Var container = document. getElementById ("sid ");
Var elements = container. getElementsByTagName ("p ");
Alert (elements. length );

Copy codeThe Code is as follows:
/// Process input
// Var inputElements = document. getElementsByTagName ("input ");
//// Length of the output input tag
//// Alert (inputElements. length );
// For (var I = 0; I <inputElements. length; I ++ ){
// If (inputElements [I]. type! = 'Button ') {// submit
// Alert (inputElements [I]. value );
//}
//}

// Process select
/// Obtain the select tag
// Var selectElements = document. getElementsByTagName ("select ");
//// Obtain the sub-tag under select
// For (var j = 0; j <selectElements. length; j ++ ){
// Var optionElements = selectElements [j]. getElementsByTagName ("option ");
// For (var I = 0; I <optionElements. length; I ++ ){
// Alert (optionElements [I]. value );
//}
//}


Var textareaElements = document. getElementsByTagName ("textarea ");
Alert (textareaElements [0]. value );

//// Process input // var inputElements = document. getElementsByTagName ("input"); // length of the output input tag /// alert (inputElements. length); // for (var I = 0; I <inputElements. length; I ++) {// if (inputElements [I]. type! = 'Button ') {// submit // alert (inputElements [I]. value); //} // process select // obtain the select tag // var selectElements = document. getElementsByTagName ("select"); // obtain the sub-tag under the select statement // for (var j = 0; j <selectElements. length; j ++) {// var optionElements = selectElements [j]. getElementsByTagName ("option"); // for (var I = 0; I <optionElements. length; I ++) {// alert (optionElements [I]. value); //} var textareaElements = document. getElementsByTagName ("textarea"); alert (textareaElements [0]. value );

Copy codeThe Code is as follows:
Var inputElements = document. getElementsByTagName ("input ");
For (var I = 0; I <inputElements. length; I ++ ){
If (inputElements. type! = 'Submit '){
InputElements [I]. onchange = function (){
Alert (this. value)
};
}

Var selectElements = document. getElementsByTagName ("select ");
For (var I = 0; I <selectElements. length; I ++ ){
SelectElements [I]. onchange = function (){
Alert (this. value );
}
}

 var inputElements=document.getElementsByTagName("input"); for(var i=0;i<inputElements.length;i++){ if (inputElements.type != 'submit') { inputElements[i].onchange = function(){ alert(this.value) }; } var selectElements=document.getElementsByTagName("select"); for (var i = 0; i < selectElements.length; i++) { selectElements[i].onchange=function(){ alert(this.value); } }

8. parentNode, firstChild, and lastChild

The three attributes parentNode, firstChild, and lastChild can follow the structure of the document and perform "short-distance travel" in the document ".
See the following HTML snippet:

Copy codeThe Code is as follows:
<Table>
<Tr>
<Td> John </td>
<Td> Doe </td>
<Td> Alaska </td>
</Tr>
</Table>

In the preceding HTML code, the first <td> is the first child element (firstChild) of the <tr> element ), the last <td> is the last child element (lastChild) of the <tr> element ).
<Tr> is the parent node of each <td> element ).

Copy codeThe Code is as follows:
Var textareaElements = document. getElementsByTagName ("textarea ");
For (var I = 0; I <textareaElements. length; I ++ ){
TextareaElements [I]. onchange = function (){
Alert (this. value );
};
}

 var textareaElements=document.getElementsByTagName("textarea"); for (var i = 0; i < textareaElements.length; i++) { textareaElements[i].onchange = function(){ alert(this.value); }; }
 

9. check whether a subnode exists.

HasChildNodes ()
This method is used to check whether an element has subnodes. the return value is true or false.
Var booleanValue = element. hasChildNodes ();
Text nodes and attribute nodes cannot contain any subnodes. Therefore, the return value of the hasChildNodes method for these two types of nodes is always false.
If the return value of the hasChildNodes method is false, childNodes, firstChild, and lastChild are empty arrays and empty strings.

HasChildNodes ()

Copy codeThe Code is as follows:
Var selectElements = document. getElementsByTagName ("select ");
Alert (selectElements [0]. hasChildNodes ())

Var inputElements = document. getElementsByTagName ("input ");
For (var I = 0; I <inputElements. length; I ++ ){
Alert (inputElements [I]. hasChildNodes ());
}

 var selectElements=document.getElementsByTagName("select"); alert(selectElements[0].hasChildNodes())var inputElements=document.getElementsByTagName("input");for(var i=0;i<inputElements.length;i++){ alert(inputElements[i].hasChildNodes());}
 

10. Root Node

There are two special document attributes available for accessing the root node:
Document.doc umentElement
Document. body
The first attribute can return the document root node that exists in XML and HTML documents.
The second property is a special extension of the HTML page, providing direct access to the <body> tag.

XI. DOM node Information

Each node has attributes related to certain node information. These attributes are:
NodeName (node name)

The nodeName attribute contains the name of a node.
Var name = node. nodeName;
The nodeName of the element node is the label name.
The nodeName of the attribute node is the attribute name.
The nodeName of the text node is always # text
The nodeName of the document node is always # document
Note: The Tag Name of the html element contained by nodeName is always capitalized.

NodeValue)

NodeValue: returns the current value (string) of the given node)
If a given node is an attribute node, the returned value is the value of this attribute.
If a given node is a text node, the returned value is the content of the text node.
If the given node is an element node, the return value is null.
NodeValue is a read/write attribute, but it cannot be set to the nodeValue attribute of an element node,
However, you can set a value for the nodeValue attribute of a text node.
Var li = document. getElementById ("li ");
If (li. firstChild. nodeType = 3)
Li. firstChild. nodeValue = "National Day 60 years ";

NodeType (node type)

NodeType: returns an integer representing the type of the given node.
The value returned by the nodeType attribute corresponds to 12 node types. There are three common types:
Node. ELEMENT_NODE --- 1 -- Element Node
Node. ATTRIBUTE_NODE --- 2 -- attribute Node
Node. TEXT_NODE --- 3 -- text Node
NodeType is a read-only attribute.