Extension of the Dom_ node type of javascript

The DOM itself has many types, such as the element type (elements node), and then the text type (the literal node). The DOM also provides some extended functionality.

One, node type

The node interface is defined at the DOM1 level, and the node interface defines 12 numeric constants to represent the type values of each node. ie6,7,8 is not supported, and all other browsers have access to this type.

Although the properties of 12 kinds of node objects are introduced here, many of them are in fact just a few.

　　

<script>     =function() {        alert (Node);             // Firefox prints out the function itself         alert (node.element_node);        alert (Node.text_node);      }; </script>

IE 6,7,8, does not support, we can simulate a class, let IE 6,7,8 also support.

<script>window.onload=function() {alert (Node); //Firefox prints out the function itselfalert (Node.element_node);      alert (Node.text_node);     }; if(typeofNode = = ' undefined ') {//IE returnWindow. Node = {//Create a global node, so use windowElement_node:1, Text_node:3//...... It's going to be all written here.        }; }</script>

Ii. type of Document

　1. The document type represents the documentation, or the root node of the document, and the node is hidden, with no specific element tags.

Window.onload =function() {        alert (document);        alert (document.nodetype);     // type is 9        alert (document.nodevalue);  // The result is null  without content        alert (document.nodename);   #document     };

<script>window.onload=function() {alert (document.childnodes[0]);//DocumentType, first child node objectalert (Document.childnodes[0].nodetype);//non-IE is 10,ie6,7,8 for 8alert (document.childnodes[0].nodename);//all compatible results in the new version of the browser are lowercase HTML (in the document Declaration), the old version of Firefox is uppercase, ie6,7,8 is #commentAlert (document.childnodes[1]);//htmlhtmlelementalert (document.childnodes[1].nodename);//HTML     };</script>

2, if you want to directly get

Window.onload =function() {        //htmlhtmlelement     };

3, in many cases, we do not need to get the

So here's a more convenient way:document.body.

Window.onload =function() {        //[object htmlbodyelement]     };

4, there are some legacy attributes and objects in Document collection, can quickly help us to accurately handle some tasks.

<script>window.onload=function(){        //Propertiesalert (document.title);//gets the value of the <title> tag, and can also set theAlert (document. URL);//Get URL Pathalert (document.domain);//get domain name, server sidealert (document.referrer);//gets the previous URL, server-side                //Object Collectionalert (document.anchors);//gets a collection of <a> elements with the name attribute in the documentalert (document.links);//gets a collection of <a> elements with HREF attributes in the document        //document.applets;//Get collection of <applet> elements in document, nodocument.forms;//get a collection of <form> elements in a documentDocument.images;//get a collection of  elements in a document     };</script>

Iii. type of Element
The element type is used to represent the elements node in the HTML. The nodeType of the element node is 1,nodename as the label name of the element.

Iv. type of Text

The text type is used to represent the literal node type, the text does not contain HTML, or contains the escaped HTML. The nodeType of the text node is 3. When you create two text nodes of the same level at the same time, a separate two nodes are generated

<script>window.onload=function(){        varbox = document.getElementById ("box"); varText1 = document.createTextNode ("Mr."); varText2 = document.createTextNode ("Lee");        Box.appendchild (Text1);        Box.appendchild (TEXT2); alert (box.childNodes.length); //2, two text nodesbox.normalize (); //merging into one node merges two same-level text nodes in the same neighborhood with normalize (). alert (box.childNodes.length);//1, merged into 1 text nodesAlert (box.childnodes[0].nodevalue); };</script>
There is a separation of merges, and the separation of nodes can be achieved by Splittext (NUM).
<script>     =function() {        var box = document.getElementById ("box" );        Alert (box.childnodes[0].nodevalue); // Mr.Lee of a node        // separate the first three characters into one node, and the rest is a node        alert (Box.childnodes[0].nodevalue); // Mr.      }; </script>
In addition to the two methods above, Text provides some other ways to manipulate the DOM as follows:
<script>window.onload=function(){        varbox = document.getElementById ("box"); //Box.firstChild.deleteData (0,2);//delete 2 characters from 0 position the result is. Lee        //box.firstChild.insertData (0, ' Hello. ');//Add the specified character from the 0 position        //box.firstChild.replaceData (0,2, ' Miss ');//replacement of 2 specified characters from 0 position the result is Miss.leeAlert (Box.firstChild.substringData (0,2));//get 2 characters from 0 position, direct outputalert (box.firstChild.nodeValue);//Output Results     };</script>
V. Types of Comment
The Comment type represents a comment in the document. NodeType is 8,nodename is #comment,nodevalue is the content of the comment.
<script>     =function() {        var box = document.getElementById ("box" );         // [Object Comment]        alert (box.firstChild.nodeName); // #comment        alert (Box.firstChild.nodeType); // 8        alert (Box.firstChild.nodeValue); // I'm a note .      }; </script>
In ie6,7,8, the comment node can be used! As an element to access
<script>     =function() {        var comment = document.getElementsByTagName ('! ') );        alert (comment.length);     }; </script>
Vi. Types of Attr
The Attr type represents a property in a document element. NodeType is the property name for 2,nodename, and NodeValue is the property value.
Extension of the Dom_ node type of javascript