Comments are represented in the DOM by the Comment type. Comment nodes have the following characteristics:
- The value of nodeType is 8;
- The value of nodeName is "#comment";
- The value of nodeValue is the content of the annotation;
- parentNode may be Document or Element;
- No (no) child nodes are supported.
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 content of the annotation can also be obtained through the nodeValue or data properties.
Comment nodes can be accessed through their parent nodes, take 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 code below.
var div = document.getElementById("myDiv");
var comment = div.firstChild;
alert(comment.data); //"A comment"
Run it
. Alternatively, a comment node can be created using document.createComment() and passing it the comment text, as shown in the following example.
var comment = document.createComment("A comment ");
Obviously, developers rarely create and access annotation nodes because they have little impact on the algorithm. Also, browsers will not recognize comments placed after </html> tags. If you want to access comment nodes, make sure they are descendants of the <html> element (ie between <html> and </html>).
In Firefox, Safari, Chrome, and Opera, you can access the constructor and prototype of the Comment type. In IE8, comment nodes are treated as elements with the label "!". That is, use getElementsByTagName() to get annotation nodes. Although IE9 does not treat comments as elements, it still represents comments through a constructor called HTMLCommentElement.
10.1.6 CDATASection Type
The CDATASection type is for XML-based documents only and represents a CDATA section. Similar to Comment, the CDATASection type inherits from the Text type and thus has all string manipulation methods except splitText().
The CDATASection node has the following characteristics:
- The value of nodeType is 4;
- The value of nodeName is "#cdata-section";
- The value of nodeValue is the content in the CDATA area;
- parentNode may be Document or Element;
- No (no) child nodes are supported.
CDATA sections only appear in XML documents, so most browsers will incorrectly parse CDATA sections as 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 browsers can parse it this way. Browsers do not properly support embedded CDATA regions, even for valid XHTML pages.
In a real XML document, you can use document.createCDataSection() to create a CDATA section by simply passing in the content of the node.
In Firefox, Safari, Chrome, and Opera, the constructor and prototype of the CDATASection type can be accessed. This type is not supported in IE9 and earlier.
10.1.7 DocumentType
The DocumentType type is not commonly used in web browsers, only Firefox, Safari, and Opera support it①. ① Chrome 4.0 also supports the DocumentType type.
Type contains all the information about the doctype of the document, it 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;
- parentNode 是Document；
- No (no) child nodes are supported.
At DOM1 level, DocumentType objects cannot be created dynamically, but only by parsing the document code. Browsers that support it will store the DocumentType object in document.doctype. DOM1 level describes the three properties of the DocumentType object: name, entities and notations. Among them, name represents the name of the document type;
entities are NamedNodeMap objects of entities described by document types; notations are NamedNodeMap objects of symbols described by document types. Typically, documents in browsers are of either HTML or XHTML doctype, so entities and notations are empty lists (the items in the list come from inline doctype declarations). But anyway, only the name attribute is useful. This property holds the name of the document type, that is, the text that appears after <!DOCTYPE.
with the following strict HTML
4.01's document type declaration as an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
The name property of the DocumentType holds "HTML":
alert(document.doctype.name); //"HTML"
DocumentType is not supported in IE and earlier, so the value of document.doctype is always equal to null. However, these browsers incorrectly interpret the doctype declaration as a comment and create a comment node for it. IE9 will assign the correct object to document.doctype, but still does not support accessing the DocumentType type.
10.1.8 DocumentFragment Type
Of all node types, only DocumentFragment has no corresponding tag in the document. The DOM specifies that a document fragment is a "lightweight" document that can contain and control nodes, but does not take up additional resources like a full document. DocumentFragment nodes have 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.
While you can't add document fragments directly to a document, you can use it as a "repository" where you can store 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();
Document fragments inherit all of Node's methods and are typically used to perform DOM manipulations that are specific to the document. If you add a node from the document to the document fragment, the node is removed from the document tree and is no longer visible from the browser. New nodes added to a document fragment are also not part of the document tree. The content of the document fragment can be added to the document through appendChild() or insertBefore(). When a document fragment is passed as an argument to these two methods, all the child nodes of the document fragment are actually added to the corresponding positions; the document fragment itself is never part of the document tree. Take a 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 would cause the browser to repeatedly render (render) the new information. To avoid this problem, you can use a document fragment like below to save the list items you create and then add them to the document all at 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);
Running it
In this example, we first create a document fragment and obtain a reference to the <ul> element. Then, create 3 list items with a for loop and text their order. To do this, create a <li> element, create a text node, and add the text node to the <li> element. Then use appendChild() to add the <li> element to the document fragment. After the loop finishes, call appendChild() and pass in the document fragment to add all list items to the <ul> element. At this point, all child nodes of the document fragment are removed and moved into the <ul> element.
10.1.9 Attr type
The attributes of an element are represented in the DOM by the Attr type. In all browsers (including IE8), the constructor and prototype of the Attr type are accessible. Technically, an attribute is a node that exists in an element's attributes attribute. Property nodes have the following characteristics:
- The value of nodeType is 2;
- The value of nodeName is the name of the feature;
- The value of nodeValue is the value of the attribute;
- The value of parentNode is null;
- no support (no) child nodes in HTML;
- Child nodes can be Text or EntityReference in XML.
Although they are also nodes, attributes are not considered part of the DOM document tree. Developers use the getAttribute(), setAttribute(), and remveAttribute() methods most often, and rarely refer to attribute nodes directly.
Attr objects have 3 attributes: name, value and specified. where name is the attribute name (same value as nodeName), value is the value of the attribute (same value as nodeValue), and specified is a boolean value that distinguishes whether the attribute is specified in code or default.
Use document.createAttribute() and pass the name of the attribute to create a new attribute node. 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"
Running
this example creates a new feature node. Since the name attribute has already been assigned a value when calling createAttribute(), there is no need to assign it a value later. After that, set the value of the value property to "left". In order to add a newly created attribute to an element, the element's setAttributeNode() method must be used. After an attribute is added, it can be accessed in any of the following ways: the attributes property, the getAttributeNode() method, and the getAttribute() method. Among them, attributes and getAttributeNode() both return the Attr node of the corresponding attribute, while getAttribute() only returns the value of the attribute.
We do not recommend accessing feature nodes directly. In fact, using the getAttribute(), setAttribute(), and removeAttribute() methods is far more convenient than manipulating attribute nodes.
More chapter tutorials: http://www.shouce.ren/api/view/a/15218