JavaScriptDOM advanced method_basic knowledge

This article mainly introduces JavaScriptDOM. you can refer to the fact that DOM has many types. in the previous chapter, for example, Element type: indicates Element nodes; for example, Text indicates a Text node;

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 obtainThe element node object of the tag is HTMLHtmlElement. you can use documentElement directly;
Document.doc umentElement; // HTMLHtmlElement;

// You may need to obtainTag, which is commonly used before: document. getElementsByTagName ('body') [0];
Document. body; // HTMLBodyElement;

// InThere is also a document statement:Will be processed as the first node of the browser;
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 setTag 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 element set with the name attribute in the document;
Document. links; // gets the element set with the href attribute in the document;
Document. forms; // get the document

Element set;
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

// 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 ('P'); 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; // combine 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 operation methods var box = document. getElementById ('box'); box. firstChild. deleteData (); // delete the 2 characters starting from the 0 position; box. firstChild. insertData (0, 'Hello'); // add the specified character from the position 0; box. firstChild. replaceData (, 'Miss '); // replace two specified characters from 0; box. firstChild. substringData (); // Obtain 2 characters from the 0 position 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

// Standard mode and hybrid mode (weird mode) are distinguished from IE6, mainly based on the declaration of the document. // IE adds a compatMode attribute for the document object, this attribute identifies the mode in which documents are in IE. // if it is in standard mode, CSS1Compat is returned. if it is in mixed mode, BackCompat is returned. 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

Document. getElementById ('box '). innerText; // Obtain the text content (if html is directly filtered out); document. getElementById ('box '). innerText = 'Mr. lee '; // set text (if html escaping exists); // PS: This method is supported by other browsers except Firefox; firefox's DOM3 provides another similar property: textContent; // Compatible 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 ='123'; // 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 ="";//