Look at the dom--comment,cdatasection,documenttype,documentfragment,attr type from the prototype chain

Source: Internet
Author: User

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:

    • NodeType value is 8
    • The NodeName value is "#comment"
    • NodeValue value is the comment content
    • ParentNode may be document or element
    • No child nodes

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

    • Understanding XHTML

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

    1. XHTML elements must be nested correctly
    2. XHTML elements must be properly closed, even if empty tags must be closed properly such as <br/>, note/space between elements ensures that XHTML documents are compatible with today's browsers
    3. Label names must be in lowercase letters
    4. XHTML documents must have root elements
    5. Attribute values must be quoted
    6. Attribute cannot be abbreviated
    7. Use the id attribute instead of the name attribute, such as <a/>,, etc.
    8. XHTML DTD defines the HTML elements that are forced to use
    9. All XHTML documents must have a document type declaration.

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> 


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 (&lt;), 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>
    • Cdatasection type

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:

    • NodeType value is 4
    • NodeName value is "cdata-section"
    • The NodeValue value is the content of the content area
    • ParentNode may be document or element
    • Child nodes are not supported

(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:

    • NodeType value is 10
    • The NodeName value is the DOCTYPE name, and the name of the document type is the top-level element of the outermost label of the current document, Document.doctype.name is also available, which appears in the <! Text after DOCTYPE (not including those behind the public ...) The DTD version number and file path) gets the lowercase content (regardless of whether the previous code is case-sensitive). Both of these methods are not writable, because the accessor property set for NodeName and name is Undefiend.

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).

    • NodeValue value is null
    • ParentNode is document
    • No child nodes

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:

    • NodeType value is 11
    • NodeName value is "#document-fragment"
    • NodeValue value is null
    • ParentNode value is null
    • Child nodes can be element,processinginstruction,comment,text,cdatasection,entityreference


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

    • NodeType value is 2
    • NodeName value is the name of the attribute
    • NodeValue value is the value of the attribute
    • ParentNode value is null
    • Child nodes are not supported in HTML
    • In XML a child node can be text or EntityReference

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.


JavaScript Advanced Programming

Look at the dom--comment,cdatasection,documenttype,documentfragment,attr type from the prototype chain

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.