Home > Developer > JavaScript
JavaScript DOM advanced method
DOM itself has many types, which are described in the previous chapter. For example, Element type indicates Element nodes, Text type, and Text nodes;
1. DOM type
Type Name Description
Node indicates a unified interface for all types of values, which is not supported by IE;
Document indicates the Document type;
Element indicates the Element node type;
Text indicates the Text node type;
Comment indicates the Comment type in the document;
CDATASection indicates the CDATA region type;
DocumentType indicates the Document declaration type;
DocumentFragment indicates the document fragment type;
Attr indicates the attribute node type;
1. Node Type
DOM1 defines a Node interface, which is implemented by all Node types in the DOM;
This Node interface is implemented as a Node type in JavaScript;
This type can be accessed in all browsers except IE;
2. Document Type
// The Document type indicates the Document or the root node of the Document, which is hidden and has no specific element tag;
Document; // document;
Document. nodeType; // 9; type value;
Document. childNodes [0]; // DocumentType; first subnode object;
Document. childNodes [1]; // HTMLHtmlElement; object;
// If You Want To directly obtain the Element Node object HTMLHtmlElement of the Document.doc umentElement; // HTMLHtmlElement;
// You need to obtain the <body> tag in many cases. The commonly used tag is document. getElementsByTagName ('body') [0].
Document. body; // HTMLBodyElement;
// There is a document declaration before Document.doc type; // DocumentType;
// There are some legacy attributes and object sets in the Document, which can help us quickly and accurately process tasks;
// Attributes
Document. title; // obtain and set the <title> tag value;
Document. URL; // obtain the URL path;
Document. domain; // obtain the domain name;
// When the page contains frameworks or embedded frameworks from other subdomains, It is very convenient to set document. domain;
// Due to cross-origin security restrictions, pages from different subdomains cannot communicate through JavaScript;
// By setting document. domain of each page to the same value, these pages can access each other's JavaScript objects;
Document. referrer; // Save the URL of the page linked to the current page;
// Object set
Document. anchors; // gets the <a> element set with the name attribute in the document;
Document. links; // gets the <a> element set with the href attribute in the document;
Document. forms; // obtain the <form> element set in the document;
Document. images; // obtain the element set in the document;
3. Element type
// The Element type is used to represent the Element nodes in HTML. in the previous chapter, we introduced operations such as searching and creating Element nodes;
// The element node's nodeType is 1; nodeName is the element's label name;
// The Element Node object can return the object type of its specific element node in a non-IE browser;
Element name Type
HTML HTMLHtmlElement;
DIV HTMLDivElement;
BODY HTMLBodyElement;
P HTMLParamElement;
4. Text Type
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// The Text type is used to represent the Text node type. The Text does not contain HTML, or contains HTML after conversion. The nodeType of the Text node is 3; // When two text nodes of the same level are created at the same time, two separate nodes are generated; Var box = document. createElement ('div '); Var text1 = Document. createTextNode ('Mr '); Var text2 = Document. createTextNode ('Lee! '); Box. appendChild (text1 ); Box. appendChild (text2 ); Document. body. appendChild (box ); Alert (box. childNodes. length); // => 2; two text nodes;
// Merge two adjacent text nodes and use normalize; Box. normalize (); // merge into a node;
// Separate a node; Box. firstChild. splitText (3); // separate a node;
// Text also provides some DOM operations. Var box = document. getElementById ('box '); Box. firstChild. deleteData (); // Delete the 2 characters starting from position 0; Box. firstChild. insertData (0, 'Hello'); // Add the specified character from the 0 position; Box. firstChild. replaceData (, 'Miss '); // replace two specified characters from the 0 position; Box. firstChild. substringData (); // get 2 Characters from 0 and output them directly; Alert (box. firstChild. nodeValue); // output the operation result; |
5. Comment type
Comment indicates the comments in the Document. nodeType is 8, nodeName is # comment, and nodeValue is the comments;
Var box = document. getElementById ('box ');
Alert (box. firstChild); // Comment;
6. Attr type
The Attr type indicates the attributes in the document element; nodeType: 11; nodeName: attribute name; nodeValue: attribute value; details are listed in the previous chapter;
2. DOM Extension
1. Rendering Mode
| 1 2 3 4 5 6 7 8 |
// Standard mode and hybrid mode (weird mode) are distinguished from IE6, mainly based on the declaration of the document; // IE adds the compatMode attribute to the document object, which can identify the mode in which documents of IE browser are in; // If it is in standard mode, return CSS1Compat; if it is in mixed mode, return BackCompat; If (document. compatMode = 'css1compat '){ Alert(document.doc umentElement. clientWidth ); } Else { Alert (document. body. clientWidth ); } |
2. Scroll
DOM provides some Page scrolling Methods
Document. getElementById ('box'). scrollIntoView (); // you can specify whether the image is visible;
3. children attributes
Due to the blank subnode issue, IE and other browsers have different interpretations. If you only want a valid subnode, you can use the children attribute, which is non-standard;
Var box = docuemnt. getElementById ('box ');
Alert (box. children. length); // obtain the number of valid subnodes;
4. contains () method
You can use the contains () method to determine whether a node is a descendant of another node;
Var box = document. getElementById ('box ');
Alert (box. contains (box. firstChild); // => true;
3. DOM operation content
1. innerText attributes
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Document. getElementById ('box'). innerText; // obtain the text content (if html is directly filtered out ); Document. getElementById ('box'). innerText = 'Mr. Lil'; // set the text (if html escaping exists ); // PS: In addition to Firefox, other browsers support this method. Firefox's DOM3 provides another similar property: textContent; // Compatible Method Function getInnerText (element ){ Return (typeof element. textContent = 'string ')? Element. textContent: element. innerText; } Function setInnerText (element, text ){ If (typeof element. textContent = 'string '){ Element. textContent = text; } Else { Element. innerText = text; } } |
2. innerHTML attributes
The innerHTML attribute can be parsed in HTML;
Document. getElementById ('box'). innerHTML; // obtain the text (HTML is not filtered );
Document. getElementById ('box'). innerHTML = '<B> 123 </B>'; // bold 123;
Although innerHTML can be inserted into HTML, there are still some restrictions, that is, the so-called scope element. Leaving this scope will be ineffective;
Box. innerHTML = "<script> alert ('lil'); </script>"; // The <script> element cannot be executed;
Box. innerHTML = "<style> background: red; </style>"; // The <style> element cannot be executed;
3. outerText
The value of outerText is the same as that of innerText, and Firefox does not;
In addition, the assignment method is quite dangerous. It not only replaces the text content, but also directly deletes the elements;
Var box = document. getElementById ('box ');
Box. outerText = '< B> 123 </B> ';
Alert (document. getElementById ('box'); // => null; not recommended;
4. outerHTML
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// The value of the outerHTML attribute is the same as that of innerHTML, but the value is the same as that of outerText. The element is erased after the value is assigned; Var box = document. getElementById ('box '); Box. outerHTML = '000000 '; Alert (document. getElementById ('box'); // null;
// PS: Compare the most common innerHTML attributes with the node operation methods. when inserting a large number of HTML tags, innerHTML is much more efficient; // When innerHTML is set, an HTML Parser is created, which is browser-level. Therefore, JavaScript Execution is much faster; // However, creating and destroying an HTML Parser will also result in performance loss. It is best to control the parser to the most reasonable extent; For (var I = 0; I <10; I ++ ){ Ul. innerHTML = '<I> item </I>'; // avoid frequent accesses; } // Complete For (var I = 0; I <10; I ++ ){ A = '<li> item </I>'; // save it temporarily; } Ul. innerHTML =; |
Summary
DOM is a language-neutral API used to access and operate HTML and XML documents;
At the DOM1 level, HTML and XML documents are visually viewed as a hierarchical node tree. JavaScript can be used to operate on this node tree to change the appearance and structure of the underlying document;
DOM consists of various nodes, which are summarized as follows:
1. The most basic Node type is Node, which is used to abstract an independent part of the document. All other types are inherited from Node;
2. The Document type indicates the entire document, which is the root node of a group of hierarchical nodes. In JavaScript, the Document object is an example of Document;
There are many ways to query and retrieve nodes using document objects;
3. The Element node represents all HTML or XML elements in the document and can be used to manipulate the content and attributes of these elements;
4. There are also some node types, indicating the text content/comments/document type/CDATA region and document fragment;
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
