Dom-text type, comment type, cdatasection type, DocumentType type, documentfragment type, attr type

Text type

Text nodes are denoted by the text type and contain plain text content that can be literally interpreted. The text node has the following characteristics:

The value of NodeType is 3
The value of nodename is "text"
The value of NodeValue is the text that the node contains
The value of the parentnode is an element
No child nodes

the text contained in the text node can be accessed through the NodeValue property or the Data property. You can manipulate the text in a node by using the following methods:

AppendData (text): Adds text to the end of the node.
DeleteData (offset,count): Deletes count characters from the position specified by offset.
InsertData (Offset,text): Inserts text at offset-specified position.
ReplaceData (Offset,count,text): Replaces all text from offset to count with text.
Splittext (offset): divides the current text into two text nodes from the location specified by offset.
Substringdata (Offset,count): Extracts a string from the position specified by offset to Offset+count

In addition to these methods there is a length property that holds the number of characters in the node. and the same values are preserved in nodevalue.length and Data.length.

By default, each element that can contain content can have at most one text node, and there must indeed be content present.

1. Create a text node

document.createTextNode () creates a new text node that takes a parameter that is the text to be inserted into the node. as with the values of the existing text nodes, the text that is the parameter is encoded in HTML or XML format. When you create
The Ownerdocuemnt property is also set for the new text node.

1         var textnode = document.createTextNode ("<strong>Hello</strong> world!");

In general, each element has only one text child node. However, in some cases it may also contain multiple text subnodes, as follows:

1         varelement = document.createelement (' div ');2Element.classname = "message";3 4         varTextnode = Docuemnt.createtextnode (' Hello world! ');5 Element.appendchild (textnode);6 7         varAnothertextnode = document.createTextNode (' yippee! '));8 Element.appendchild (anothertextnode);9 TenDocument.body.appendChild (Element);

If two text nodes are adjacent sibling nodes, then the text in these two nodes will be displayed with no spaces in the middle.

2. Normalize text nodes

the presence of adjacent sibling text nodes in a DOM document can easily cause confusion because it is unclear which text node represents which string. Normalize () a method that merges adjacent text nodes to invoke on a parent element that contains two or more text nodes
Normalize () method, all text nodes are merged into one node.

1         varelement = document.createelement (' div ');2Element.classname = "message";3 4         varTextnode = document.createTextNode (' Hello world! ');5 Element.appendchild (textnode);6 7         varAnothertextnode = document.createTextNode (' yippee! '));8 Element.appendchild (anothertextnode);9 Ten document.body.appendChild (element); One  Aalert (element.childNodes.length);//2 -  - element.normalize (); thealert (element.childNodes.length);//1 -alert (Element.firstChild.nodeValue);//Hello world! yippee!

3. Split text nodes

Splittext () divides a text node into two text nodes. This method returns a new text node that is the same as the parentnode of the original node

1         varelement = document.createelement (' div ');2Element.classname = "message";3 4         varTextnode = document.createTextNode (' Hello world! ');5 Element.appendchild (textnode);6 7 document.body.appendChild (element);8 9         varNewNode = Element.firstChild.splitText (5);Tenalert (Element.firstChild.nodeValue);//Hello Onealert (Newnode.nodevalue);//world! Aalert (element.childNodes.length);//2

Comment Type

Annotations are represented in the DOM by the comment type, and the comment node has the following characteristics:

The value of NodeType is 8
The value of NodeName is "#comment"
The value of the NodeValue is the content of the comment
The value of the parentnode is document or element

The comment type inherits from the same base class as the text type, so it has all string manipulation methods except Splittext ().
The comment node can be visited by its parent node:

1     <div id= "mydiv" ><!--A Comment--></div>

Here, the comment node is a child node of the <div> element.

Cdatasection type

The cdatasection type is only for XML-based documents, and it represents a CDATA region, and the Cdatasection type inherits from the same base class as the text type, so it has all string manipulation methods except for Splittext ()

The value of NodeType is 4
The value of NodeName is "#cdata-section"
The value of NodeValue is the content in the CDATA area
The value of the parentnode is document or element

DocumentType type

DocumentType contains all the information about the document's DOCTYPE, which has the following characteristics:

The value of NodeType is 10
The value of NodeName is the name of the DOCTYPE
The value of NodeValue is null
The value of the parentnode is document or element

DocumentFragment type

The DOM specifies that a document fragment is a "lightweight" document that can contain and control nodes, but does not occupy additional resources like a complete document. The DocumentFragment type has the following characteristics:

The value of NodeType is 11
The value of NodeName is "#document-fragment"
The value of NodeValue is null
The value of parentnode is null
Child nodes can be element, ProcessingInstruction, Comment, Text, cdatasection, or EntityReference.

Although you cannot add a document fragment directly to a document, you can use it as a "warehouse" where you can save nodes that may be added to the document in the future. To create a document fragment, you can use the Document.createdocumentfragment () method, as follows:

1     var fragment = Document.createdocumentfragment ();

Add 3 list items to a <ul> element

1<ul id= "MyList" ></ul>2 3     varFragment =document.createdocumentfragment ();4     varUL = document.getElementById (' myList ');5     varLi =NULL;6 7      for(vari=0;i<3;i++){8Li = document.createelement (' li ');9Li.appendchild (document.createTextNode ("Item" + (i+1)));Ten Fragment.appendchild (LI); One     } A  -Ul.appendchild (fragment);

attr type

The attributes of an element are represented in the DOM by the attr type, which is the node that exists in the element's attributes attribute. Attribute nodes have the following characteristics:

The value of NodeType is 2
The value of the nodename is the name of the attribute
The value of the NodeValue is the value of the attribute
The value of parentnode is null

The Attr object has 3 properties: Name, value, and specified. Where name is the attribute name, value is the attribute, and specified is a Boolean value that distinguishes whether the attribute is specified in the code or is the default.

Dom-text type, comment type, cdatasection type, DocumentType type, documentfragment type, attr type