JavaScript DOM API

The Doucment Object Model (DOM) is an application interface that represents documents (such as HTML documents and XML documents) and various elements used to access and operate documents. In the DOM, the HTML document hierarchy is represented as a tree structure. The node of the tree indicates various content in the document.

BKJIA recommended reading: The nature and operation methods of JavaScript DOM

The DOM tree structure is the tree of various types of Node objects. The Node interface defines attributes and methods for the traversal and operation tree. The childNodes attribute of the Node object returns the NodeList object in the subnode list. The firstChild, lastChild, nextSibling, previussibling, and parentNode attributes provide the method of traversing the tree. The appendChild (), removeChild (), replaceChild (old, new), and insertBefore () methods can be used to add or delete nodes from the document tree.

Note: when using the appendChild () method, if the parameter is an existing node in the document, this method removes the node from the document.

Different types of nodes in the document tree are represented by specific Node Sub-interfaces. Each Node object has the nodeType attribute, specifying the Node type. Common node types:

Interface	NodeType constant	NodeType Value
Element	Node. ELEMENT_NODE	1
Text	Node. TEXT_NODE	3
Document	Node. DOCUMENT_NODE	9
Comment	Node. COMMENT_NODE	8
DocumentFragment	Node. DOCUMENT_FRAGMENT_NODE	11
Attr	Node. ATTRIBUTE_NODE	2

The root node of the DOM tree is a Document object. Its documentElement attribute reference indicates the Element Object of the Document root Element. Most DOM trees consist of Element objects that indicate tags (such as

The getAttribute () method, setAttribute () method, and removeAttribute () method of the Element interface can query, set, and delete the nature of an Element. You can also call the getAttributeNode () method (this method is inconvenient to use) to return an Attr object that represents the nature and its value (the Attr interface defines the specified attribute, you can determine whether this property is directly specified in the document or whether its value is the default value ). Note that the Attr object does not appear in the childNodes [] array of the Element, and is not as part of the document tree as the Element and Text nodes. DOM standards allow access to Attr nodes through the attributes [] array of the Node interface, but IE defines an incompatible attributes [] array.

DOM standards can be used with XML documents and HTML documents. DOM core APIs (Node, Element, Document, and other interfaces) are relatively common and can be applied to these two types of documents. The DOM standard also includes HTML document proprietary interfaces (HTML *** elements ).

The HTML section of the DOM standard defines the corresponding interfaces for all other HTML tags. For most HTML tags, these interfaces only provide a set of attributes that mirror their HTML nature. In addition, some interfaces define other attributes and methods (for example, the HTMLFormElement interface defines the submit () and reset () methods and length attributes ).

The HTML-specific DOM standard has a set of naming rules. The attributes of the HTML-specific interface should start with lowercase letters. If the attribute name has multiple words, the first letter of each word after the second word is capitalized. When the HTML property name conflicts with the JavaScript keyword, add the prefix "html" to the property to avoid conflict. An exception to this rule is of the class nature and can be converted to the className attribute of HTMLElement.

The DOM standard has two versions (or "level "). Different browsers have different levels of support for DOM standards. IE5 and later versions support the use of basic level 1 DOM interfaces for HTML documents. Netscape supports Level 2 DOM interfaces, the following code detects the DOM interface level supported by the browser:

 
 

  
  
If (document. implementation &&
  
  
Document. implementation. hasFeature &&
  
  
Document. implementation. hasFeature ("html", "1.0 ")){
  
  
...... // If HTML DOM1-level execution is supported
  
  
}
 
 

DOM APIs provide methods to reference elements in a document:

GetElementsByTagName (var tagName) returns the NodeList object (the behavior of the NodeList object is similar to that of the array. We can think that this function returns an array composed of the element names specified by tagName ), it can obtain a list of HTML elements of any type. Note: Because HTML tags are case-insensitive, the strings passed to this method are also case-insensitive. If you pass "*" to the getElementsByTagName () method, the list of all elements in the document is returned in the order in which the document appears.

GetElementById (var id). This method returns an element with the matched id attribute. Both the Document object and the Element object have these two methods.

The data field of the Text node contains all strings in the node. The document. createTextNode () method can create a new Text node. The Text node can also use the appendData (), insertData (), deleteData (), and replaceData () Methods to add, insert, delete, or replace Text in a Text node. The document. createElement (var eleName) method can create a new <eleName> element.

We can also call element. setAttribute (), such **. setAttribute ("align", "center"), set **'s align attribute value to center, and **. align = center has the same effect. Setting the innerHTML attribute of any element as an HTML text string will make the section HTML parsed and inserted as the element content.

The core API of DOM defines the DocumentFragment object as a shortcut to use the Document node group. DocumentFragment is a special type of node. It itself does not appear in the document and serves only as a temporary container for a continuous node set, and allows these nodes to be operated as an object. When a DocumentFragment is inserted into a document (using the appendChild (), insertBefore (), or replaceChild () of the Node object), instead of the DocumentFragment itself, it is inserted into all its subnodes. For example, the reverse () method for reversing the order of n nodes:

 
 

  
  
　function reverse(n){  
  
  
 var inputTag = n.childNodes;  
  
  
 var temp = document.createDocumentFragment();  
  
  
 while(n.lastChild){  
  
  
  　temp.appendChild(n.lastChild);  
  
  
 }  
  
  
 n.appendChild(temp);  
  
  
 } 
 
 

Note: When you insert DocumentFragment into a document, the child node of the segment is moved into the document. The inserted section is empty.

Traversal and Range APIs

The Traversal API defines advanced methods to traverse documents and filter nodes that are not of interest to users. The Range API defines methods for document content within a continuous Range of operations, even if the content does not start or end at the boundary of the node.