10.1.5 Comment Type "JavaScript Advanced Programming Third Edition"

Comments are represented in the DOM by the comment type. The Comment node has the following characteristics:

• The value of NodeType is 8;
• The value of the NodeName is "#comment";
• The value of the NodeValue is the content of the comment;
• ParentNode may be document or element;
• Child nodes are not supported (not).

The Comment type inherits from the same base class as the text type, so it has all string manipulation methods except Splittext (). Similar to the text type, the contents of the comment can also be obtained by nodevalue or the Data property.
The comment node can be accessed through its parent node, taking the following code as an example.

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

Here, the comment node is a child of the <div> element, so it can be accessed through the following code.

var div = document.getElementById ("mydiv"), var comment = Div.firstchild;alert (comment.data); "A Comment"

Run for a minute
Also, you can create a comment node by using document.createcomment () and passing the comment text for it, as shown in the following example.

var comment = document.createcomment ("A comment");

Obviously, developers rarely create and access comment nodes, because note nodes have little effect on algorithms. In addition, the browser does not recognize comments that are located behind the In Firefox, Safari, Chrome, and opera, you can access constructors and prototypes of the comment type. In IE8, the comment node is treated as an element with the label named "!". That is, the annotation node can be obtained using getElementsByTagName (). Although IE9 does not treat annotations as elements, it still represents annotations through a constructor called Htmlcommentelement.

10.1.6 cdatasection Type

The cdatasection type is only for XML-based documents, and it represents a CDATA region. Similar to comment, the Cdatasection type inherits from the text type and therefore has all the string manipulation methods except for Splittext ().
The Cdatasection node has the following characteristics:

• The value of NodeType is 4;
• The value of NodeName is "#cdata-section";
• The value of the NodeValue is the content in the CDATA area;
• ParentNode may be document or element;
• Child nodes are not supported (not).

CDATA regions appear only in XML documents, so most browsers incorrectly parse the CDATA region into comment or element. Take the following code as an example:

<div id= "Mydiv" ><! [Cdata[this is some content.] ></div>

The <div> element in this example should contain a cdatasection node. However, none of the four major mainstream browsers can parse it this way. Even for valid XHTML pages, the browser does not correctly support embedded CDATA regions.
In a real XML document, you can use Document.createcdatasection () to create a CDATA region, simply passing in the contents of the node.
In Firefox, Safari, Chrome, and opera, you can access constructors and prototypes of the Cdatasection type. IE9 and previous versions do not support this type.

10.1.7 DocumentType Type

DocumentType types are not commonly used in web browsers, only Firefox, Safari, and opera support it ①. ①chrome 4.0 also supports the DocumentType type.
The Type 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 DOCTYPE;
• The value of the nodevalue is null;
• ParentNode is document;
• Child nodes are not supported (not).

In the DOM1 class, the DocumentType object cannot be created dynamically, but only by parsing the document code. Browsers that support it will save the DocumentType object in the Document.doctype. The DOM1 level describes the 3 properties of a DocumentType object: Name, entities, and notations. Where name indicates the name of the document type;

Entities is the NamedNodeMap object of the entity that is described by the document type, and notations is the NamedNodeMap object of the symbol that is described by the document type. Typically, a document in a browser uses an HTML or XHTML document type, so both entities and notations are empty lists (items in the list are from the inline document type declaration). However, only the Name property is useful. This property holds the name of the document type, which appears in the <! The text after DOCTYPE.

With the following strict type HTML

4.01 document type declaration as an example:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >

The "HTML" is saved in the Name property of DocumentType:

alert (document.doctype.name); "HTML"

IE and earlier versions do not support DocumentType, so the value of document.doctype is always equal to null. However, these browsers interpret the document type declaration incorrectly as a comment and create a comment node for it. IE9 will assign the correct object to Document.doctype, but still does not support access to the DocumentType type.

10.1.8 DocumentFragment Type

Of all the node types, only documentfragment does not have a corresponding tag in the document. The DOM rules document fragment (Doc fragment) is a "lightweight" document that can contain and control nodes, but does not occupy additional resources like a complete document. The DocumentFragment node has the following characteristics:

• The value of NodeType is 11;
• The value of NodeName is "#document-fragment";
• The value of the nodevalue is null;
• The value of the 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:

var fragment = Document.createdocumentfragment ();

A document fragment inherits all of the methods of node and is typically used to perform DOM operations on the document. If you add a node in a document to a document fragment, the node is removed from the document tree, and the node is not visible from the browser. New nodes added to a document fragment are also not part of the document tree. You can add content from a document fragment to a document by AppendChild () or insertbefore (). When you pass a document fragment as an argument to both methods, you actually add all the child nodes of the document fragment to the appropriate location, and the document fragment itself never becomes part of the document tree. Look at the following HTML sample code:
<ul id= "MyList" ></ul>
Let's say we want to add 3 list items to this <ul> element. Adding list items One by one will cause the browser to render (render) new information over and over again. To avoid this problem, you can use a document fragment as follows to save the created list items, and then add them to the document once.

var fragment = Document.createdocumentfragment (), var ul = document.getElementById ("MyList"), var li = null;for (var i = 0; I < 3; i++) {li = document.createelement ("Li"), Li.appendchild (document.createTextNode ("Item" + (i + 1))); Fragment.appendchild (LI);} Ul.appendchild (fragment);

Run for a minute
In this example, we first create a document fragment and get a reference to the <ul> element. Then, 3 list items are created through a for loop, and their order is represented by text. To do this, you need to create a <li> element, create a text node, and then add the text node to the <li> element. The <li> element is then added to the document fragment using AppendChild (). After the loop is finished, call AppendChild () and pass in the document fragment to add all the list items to the <ul> element. At this point, all child nodes of the document fragment are deleted and transferred to the <ul> element.

10.1.9 attr Type

The attributes of an element are represented in the DOM by the attr type. Constructors and prototypes of the attr type can be accessed in all browsers, including IE8. Technically, a feature is a node that exists in the attributes attribute of an element. 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 the parentnode is null;
• (no) child nodes are not supported in HTML;
• A child node in XML can be either text or EntityReference.

Although they are also nodes, attributes are not considered to be part of the DOM document tree. Developers most often use the getattribute (), SetAttribute (), and Remveattribute () methods, and rarely directly reference attribute nodes.
The Attr object has 3 properties: Name, value, and specified. Where name is the attribute name (same as the value of nodename), value is the attribute (same as the value of NodeValue), and specified is a Boolean value that distinguishes whether the attribute is specified in code or is the default.
You can create a new attribute node by using Document.createattribute () and passing in the name of the attribute. For example, to add the align attribute to an element, you can use the following code:

var attr = Document.createattribute ("align"); Attr.value = "Left"; Element.setattributenode (attr); alert ( element.attributes["Align"].value); "Left" alert (Element.getattributenode ("Align"). Value); "Left" alert (Element.getattribute ("align")); "Left"

Run for a minute
This example creates a new feature node. Since the Name property has been assigned a value when calling CreateAttribute (), it is not necessary to assign a value to it later. After that, the Value property is set to "left". In order to add a newly created attribute to an element, you must use the Setattributenode () method of the element. After you add an attribute, you can access the attribute in any of the following ways: The Attributes property, the GetAttributeNode () method, and the GetAttribute () method. Where both attributes and GetAttributeNode () return the attr node of the corresponding attribute, getattribute () returns only the value of the attribute.
We do not recommend direct access to attribute nodes. In fact, using the getattribute (), SetAttribute (), and RemoveAttribute () methods is far more convenient than manipulating feature nodes.

More Chapters Tutorial: http://www.shouce.ren/api/view/a/15218

10.1.5 Comment Type "JavaScript Advanced Programming Third Edition"