The node hierarchy of the DOM

1.1 Node type

The DOM1 class defines a node interface that will be implemented by all node types in the DOM. This node interface is implemented as a node type in JS, and other browsers can access this type in addition to IE. All the node types in JS inherit from node type. Note: Not all node types are supported by the Web browser.

Each node has a ChildNodes property, which holds a NodeList object. NodeList is a class array object, not an instance of an array. It is actually the result of executing the query dynamically based on the DOM structure. In addition to ie8-, you can use the Array.prototype.slice () method to convert an array. The version of compatible ie8-is as follows:

 function   Converttoarray (nodes) { Span style= "color: #0000ff;"    >var  array = null  ;  try   {array  = Array.prototype.sli    Ce.call (nodes, 0);  catch   (ex) {array  = new   Array ();  for  (var  i = 0, len = nodes.length; I < Len;        I++ return   array;}  

If the node in the incoming appendchild () is already part of the document, the result is to move the node from its original location to the new location. The ReplaceChild () and removechild () nodes are still document-owned, but there is no location in the document.

The CloneNode () method is used to create a copy. When the incoming parameter is true, the deep copy is performed, the node is copied, and the entire child node tree, and when the parameter is false, a shallow copy is performed and only the node itself is copied. The replica node belongs to the document but has no location. When using childnodes, note that in ie8-, nodes are not created for whitespace characters. The CloneNode () method does not copy the JS attribute added to the DOM node, such as an event handler. There is a bug in IE where the event handler is copied. Therefore, it is recommended that you remove the event handlers before using the method.

The normalize () method works by working with text nodes in the document tree, including empty text nodes and adjacent text node issues.

1.2 Document Type

JS represents documents by document type. The Document object is an instance of HTMLDocument (inherited from document type) that represents the entire HTML page. Also, the Document object is a property of the Window object and can therefore be accessed as a global object.

1.2.1 Child nodes of a document

The DOM specifies that the child node of the document node can be DocumentType, Element, processinginstruction, or comment, but has two built-in shortcuts to access its child nodes. The first one is the DocumentElement property, which always points to the

Note the differences between the browser's handling of the document type description and the comments outside the

1.2.2 Document Information

As an instance of HTMLDocument, the Document object has properties that are not standard document objects. For example: Title, contains the text in the <title> element. The URLs, domain, and referrer are removed from the HTTP header of the request. Only domain can be set, but only domains that exist in the URL can be set. and only tighten.

When the page contains a frame or inline frame from another subdomain, it is convenient to set the document.domain. Due to cross-domain security restrictions, different subdomains of the page can not be through the JS communication, each page may be document.domain set to the same value, you can access each other.

1.2.3 Finding elements

The main methods are getElementById (), getElementsByTagName () and Getelementsbyname ().

1.3 Element type

Element elements are used to represent XML or HTML elements.

1.3.1 HTML Elements

All HTML elements are represented by the HtmlElement type, or by a more specific subtype.

1.3.2 Acquisition Characteristics

There are three main DOM methods for manipulating properties, namely GetAttribute (), SetAttribute (), and RemoveAttribute (). Note here that there are some differences between the attributes of the HTML element and the properties of the corresponding DOM element. For example, the class in the attribute corresponds to the classname in the attribute.

There are two special types of attributes that, although they have a corresponding property name, do not have the same value as the value returned by GetAttribute (). The first class is that when the attribute is a style, accessed through getattribute (), the returned style attribute value contains the CSS text, and access through the property returns an object. This means that the style property is not mapped directly to the style attribute. The second type of attribute is an event handler such as the onclick. Access by GetAttribute () returns a string of the corresponding code, and when the OnClick property is accessed, a JS function is returned (NULL is returned if not specified).

1.3.3 Setting properties

The SetAttribute () method can manipulate HTML attributes, and attribute names are uniformly converted to lowercase. Because all attributes are attributes, assigning values directly to an attribute sets the value of an attribute, but adding a custom property to a DOM element does not automatically become an attribute of the element.

RemoveAttribute (), this method is used to completely remove the attributes of an element.

1.3.4 Atttibutes Properties

The element type is the only one of the DOM node types that uses the Attributes property. This property contains a namednodemap, similar to NodeList, and is also a dynamic collection.

1.3.5 Creating elements

Use the Document.createelement () method to create a new element. In IE, the complete element tag is passed to this method, which can be used to avoid some problems of dynamically creating elements in ie7-. Note that this approach requires browser detection.

Child nodes of the 1.3.6 element

Note the differences between browsers when dealing with ChildNodes attributes. The NodeType can be used to assist in obtaining the target node.

1.4 Text Type

Text nodes are denoted by the text type and contain plain text content that can be literally interpreted. The content inside cannot contain HTML code and will be escaped.

1.4.1 Creating a text node

Use document.createTextNode () to create a text node. If two text nodes are adjacent sibling nodes, then the text in these two nodes will be displayed with no spaces in the middle.

1.4.2 Normalize text nodes

Use the Normalizez () method to merge multiple adjacent text nodes.

1.4.3 Split text nodes

The text type provides a splittext () function that divides a text node into two text nodes. The segmented text node is a common DOM parsing technique for extracting data from a text node.

1.5 Comment Type

Comments are represented in the DOM by the comment type. The comment type inherits from the same base class as the text type, so it has a method other than Splittext ().

1.6 DocumentType Type

DocumentType types are supported only by Firefox, Safari, and opera.

1.7 DocumentFragment Type

Of all node types, only documentfragment does not have a corresponding tag in the document. Although it is not possible to add a document fragment directly to a document, it can be used as a "create library" to improve efficiency. The nodes in the document fragment are not part of the document tree. Adding the contents of a document fragment to a document by AppendChild () or insertbefore (), even if the document fragment is a parameter, only adds the child nodes in the past, and the document fragment itself never becomes part of the document tree.

1.8 attr Type

The attributes of an element are represented in the DOM by the attr type. Technically, a feature is a node that exists in the attributes attribute of an element. Although they are also nodes, attributes are not considered to be part of the DOM document tree.

The node hierarchy of the DOM