This concludes with the rest of these DOM type nodes, which you may have seen but don't use very often, but it's always good to know about it, and you can deepen your overall understanding of the DOM system. This article is about the comment,cdatasection,documenttype,documentfragment,attr type.
Comment Type
The prototype chain inherits from the Comment instance .__proto__->comment.prototype->characterdata.prototype->node.prototype-> Eventtarget.prototype->object.prototype.
Similar to the text node, the contents of the comment can also be accessed through nodevalue or data.
var com=document.createcomment (' I am Comment '); com; // <!--I am comment-->com.data; // "I am Comment"com.nodevalue; // "I am Comment"Annotations are represented in the DOM by the comment type, and the comment node has the following characteristics:
1. Use Document.createcomment () and pass the comment text for it to create a comment node. Createcomment inherits from Document.prototype.
2. There are some gaps in the browser's handling of annotation nodes
(1). When the comment is outside the HTML element: Chrome,<=ie9 the comment node before processing the HTML element, FF and >IE9 all nodes outside the processing.
<!--I am First comment -<!DOCTYPE HTML><HTML><Head> <title></title></Head><Body></Body></HTML><!--I am last comment -
Chrome46.0.2490.80: Only the comment node that appears before the HTML element is processed, ignoring the comment node that appears after the HTML element.
FF44.0.2: The comment node that appears before the HTML element is processed.
>IE9: The comment node that appears before the HTML element is processed.
<=IE9: Only the comment node before the HTML element is processed.
Note: The comment node and document declaration in IE8 are treated as a label named "!" Element, after opening IE8 emulation mode, since IE8 does not support accessing some API native objects in the DOM, by using the getElementsByTagName () (inherited from Document.prototype) you can get the annotation node and the document declaration node that are treated as element nodes.
IE9 does not treat annotations and document declarations as element nodes, but <! the document declaration node Doctype html> as a comment node. This diagram is tested for IE9 simulation
(2). When a comment is inside an HTML element
<!DOCTYPE HTML><HTML><Head> <title></title> <!--I am Comment -</Head><Body> <!--I am Comment too -</Body></HTML>
All three browsers can be interpreted as annotation nodes.
Cdatasection type
Speaking of the Cdatasection type node, we'll start with XHTML (Extensible Hypertext Markup Language), which is a standard for redefining HTML as an application of XML, and the rules for writing XHTML code are much stricter than HTML, such as
As an example of the following code blocks, they are valid in HTML, but are not valid in XHTML
<script type= "Text/javascript" > function compare (A, b) { if (A < B) {Console.log ( "A is less than B" else if (A > B) {Console.log ( "A is greater than B" else {Console.log ( "A is equal To B "); }} </script> The
has special rules in HTML to determine what content in the <script> element can be parsed, but these rules do not apply in XHTML. Here the comparison statement a < b less than the number in XHTML will be used as a starting a new label to parse, but as the label is less than the number and can not be followed by a space, it will result in a syntax error as follows "illegal element name", so the JS code is not parsed as it appears on the page.
Even if you remove the space between a < b in your code to A<B, you will be prompted with an error "Parse property error", after all B followed by ")".
There are two ways to avoid this:
(1). Apply the corresponding HTML entity (<), replace all the less-than sign (<) in the code, and everything is OK after replacement
(2). Use a CDATA fragment to contain the JS code, because the CDATA fragment in XHTML (XML) is a special area in the document that can contain text content in any format that you do not need to parse. It is obvious that CDATA is parsed for a node.
<script type= "Text/javascript" ><! [cdata[ function Compare (A, b) { if(a < b) { Console.log ( "A is less than B"); if (A > b) { console.log ("A is greater than B"); Else { console.log ("A is equal to B"); } ]] ></script>
This approach works in XHTML-compatible browsers, but there are actually many browsers that are incompatible with XHTML and therefore do not support CDATA fragments. In this case, use the JS comment to comment out the CDATA tag.
<script type= "Text/javascript" >//<![ [ function Compare (A, b) { if(a < b) { }elseif (A >b) { }else{ } }//]]></ Script>You can also create CDATA fragments with JS:
Cdatasection is only for XML-based documents, it represents a CDATA region, and the inheritance of the prototype chain is cdatasection instance .__proto__=>cdatasection.prototype=> Text.prototype=>characterdata.prototype=>node.protoype=>eventtarget.prototype.
The Cdatasection node has the following characteristics:
(1). Compatibility: CDATA zones appear only in xml/xhtml documents, and for HTML documents the CDATA areas are parsed incorrectly to comment nodes or filtered out, and >=IE10 and FF and Chrome resolve to comment type nodes. <ie10 ignores the node because the cdatasection type is not supported in previous versions of IE9.
(2). In a real XML document, you can use Document.createcdatasection (text) to create a CDATA region, just passing in the node content. Using Document.createcdatasection () on an HTML document will cause an error that the HTML document is not supported. CDATA nodes cannot be inserted into the document node, only in tags.
<! [Cdata[mycdata]] >
Nodes of type ' #cdata-section ' May is inserted inside Nodes of type ' #document '. */
CDATA Extents cannot be nested, CDATA sections contain text that is not parsed by the parser, and the labels in CDATA are not treated as labels and the entities are not expanded, primarily to contain materials such as injected XML fragments, without escaping all separators.
DocumentType type
The DocumentType node contains information about the DOCTYPE of the document, and the prototype chain inherits Document.doctype.__proto__=>documenttype.prototype=> Node.prototype=>eventtarget.prototype.
It has the following characteristics:
Note: It is doubtful that the test document.doctype can only get the DocumentType node in the HTML document, which is null in xml/xhtml (indicating that document.doctype is a null pointer).
In the DOM1 level, the DocumentType object cannot be created dynamically and can only be created by parsing the document code, and the browser that supports it saves the DocumentType object in Document.doctype. The DOM1 level describes the three properties of a DocumentType object: Name,entities, Notations (they are all three properties on the Documenttype.prototype object, but there seems to be no last two properties in Chrome, but these two properties are not available anyway).
DocumentFragment type
Of all node types, only documentfragment does not have a corresponding tag in the document. The prototype chain relationship is: a document fragment instance. __proto__=>documentfragment.prototype=>node.prototype=>eventtarget.prototype
Note the document fragment type only supports getElementById get elements, no getelementsbytagname that series, but can be obtained through queryselector, after all, is omnipotent ~
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 node has the following characteristics:
The
can use a document fragment as a repository, where it can hold nodes that may be added to the document in the future. Create a document fragment using the Document.createdocumentfragment () method.
If you add a node in the document that itself exists in the document fragment, the node is removed from the document tree.
You can add content from a document fragment to a document by AppendChild or insertbefore (in fact, or from Node.prototype), and 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 Location, the document fragment node itself will never become part of the document tree. Assuming that you want to add three list items to the UL element, adding the list items one by one will cause the browser to render the new information repeatedly. We can add all of the list items to the document fragment, and then one at a time, adding them to the document.
var df = document.createdocumentfragment (); var ul= document.createelement (' ul '); var li=null; for (var i=0;i<3;i++) { = document.createelement (' li '); Li.appendchild (document.createTextNode ("Item" + (i+1))); Df.appendchild (LI);} Ul.appendchild (DF);Now look at the UL and DF elements, the document fragment node is not added to the UL, but the contents of it added in.
attr type
The attributes of an element are represented in the DOM by the attr type, and all browsers except <=IE7 can access constructors and prototypes of the attr type. An attribute node is an object, which is a node that exists in the element's attributes attribute (inherited from Element.prototype). The Attributes property of an element points to an instance collection of type NamedNodeMap. Each item in the collection is the attribute node object that we need.
The prototype chain inheritance relationship is: attrnode.__proto__=>attr.prototype=>node.prototype=>eventtarget.prototype
Attribute nodes have the following characteristics
Although the attribute node is also a node, it is not considered part of the DOM document tree. Developers most often use getattribute (), SetAttribute (), and removeattribute () seldom directly refer to attribute nodes (these methods inherit from Element.prototype).
(1). The Attr object has three properties: name,value,specified
Name: attribute name, same as NodeName value
Value: The values of the attribute, the same as the NodeValue value
Specified: Is a Boolean value that distinguishes whether the attribute is specified in the code or is the default
(2). Create a new attribute node: Document.createattribute ()
When you call CreateAttribute (), you have assigned a value to the Name property, so you do not need to assign a value to it later, and you must use Setattributenode when you add an attribute node to the element. It can be accessed through the Attributes,getattributenode,getattribute method after it is added. However, direct access to feature nodes is not recommended, and using Getattribute,setattribute,removeattribute is much more convenient than manipulating feature nodes.
Reference
JavaScript Advanced Programming
Look at the dom--comment,cdatasection,documenttype,documentfragment,attr type from the prototype chain
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
