Home > Developer > JavaScript
The DOM itself has many types, which are described in the previous chapter, such as element types: The elements node, or the text type;
One DOM type
Type name Description
Node represents a uniform interface for all types of values, IE is not supported;
Document indicates the type of file;
Element represents the node type;
Text indicates the type of the literal node;
Comment represents the type of annotation in the document;
Cdatasection represents a CDATA zone type;
DocumentType represents the document declaration type;
DocumentFragment represents the document fragment type;
Attr represents the attribute node type;
1.Node type
The DOM1 level 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 JavaScript;
In addition to IE, this type can be accessed in all other browsers;
2.Document type
The document type represents the file, or the root node of the document, which is hidden and does not have a specific element tag;
Document Document
Document.nodetype; 9; Type value;
Document.childnodes[0]; DocumentType first child node object;
DOCUMENT.CHILDNODES[1]; Htmlhtmlelement; Object
If you want to directly get Document.documentelement; Htmlhtmlelement;
Many times need to get <body> tags, before commonly used is: document.getelementsbytagname (' body ') [0];
Document.body; Htmlbodyelement;
There is also a document declaration before Document.doctype; DocumentType;
There are some legacy attributes and objects set in document that can quickly help us to handle tasks accurately;
Property
Document.title; Gets and sets the value of the <title> label;
Document. URL; Gets the URL path;
Document.domain; Get the domain name;
It is convenient to set document.domain when a page contains frames or inline frames from other subdomains;
Because of Cross-domain security restrictions, pages from different subdomains cannot communicate through JavaScript;
By setting the document.domain of each page to the same value, the pages can access each other's JavaScript objects;
Document.referrer; Save the URL of the page that is linked to the current page;
Objects Collection
Document.anchors; Gets a collection of <a> elements with the name attribute in the document;
Document.links; Gets a collection of <a> elements with HREF attributes in the document;
document.forms; Gets the collection of <form> elements in the document;
Document.images; Gets the collection of elements in the document;
3.Element type
The element type is used to represent elements nodes in HTML. In the previous chapter, we introduced the search/creation of ELEMENT nodes.
The NodeType of the element node is the label name of the element 1;nodename;
Element Node object can return the object type of its concrete element node in 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 type of the literal node, the text does not contain HTML, or it contains the NodeType HTML, and the text node is 3;
When a two-level text node is created at the same time, a separate two 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;
Two of the adjacent text nodes merged together, using normalize () can be;
Box.normalize (); Merged into one node;
Separating a node from the implementation;
Box.firstChild.splitText (3); separating a node;
Text also provides some other methods of DOM manipulation
var box = document.getElementById (' box ');
Box.firstChild.deleteData (0,2); Deletes 2 characters starting from 0 position;
Box.firstChild.insertData (0, ' Hello '); Adds the specified character starting at the 0 position;
Box.firstChild.replaceData (0,2, ' Miss '); Replaces 2 specified characters from 0 position;
Box.firstChild.substringData (0,2); Obtain 2 characters from 0 position, direct output;
alert (box.firstChild.nodeValue); Output after the operation of the results;
5.Comment type
The comment type represents the annotation in the document, NodeType is 8,nodename is the content of the annotation #comment,nodevalue;
var box = document.getElementById (' box ');
alert (box.firstchild); Comment;
6.Attr type
the attr type represents the attributes in the document element, NodeType is 11;nodename as the property name, and NodeValue is the property value; Details in the previous chapter;
Two DOM extensions
1. Presentation mode
Starting from the IE6 to differentiate between standard and promiscuous modes (weird mode), mainly look at document statements;
IE adds a property named Compatmode to the Document object that identifies the mode of the IE browser's documentation.
Returns CSS1COMPAT if it is a standard mode, or returns BACKCOMPAT if promiscuous mode;
if (Document.compatmode = = ' Css1compat ') {
alert (document.documentElement.clientWidth);
} else{
alert (document.body.clientWidth);
}
2. Rolling
DOM provides a few ways to scroll pages
document.getElementById (' box '). scrollIntoView (); setting specifies visible;
3.children Properties
Because of the child node whitespace problem, ie and other browsers are inconsistent, if you want to get only valid child nodes, you can use the Children property; this property is nonstandard;
var box = Docuemnt.getelementbyid (' box ');
alert (box.children.length); The number of valid child nodes is obtained;
4.contains () method
To determine whether a node is a descendant of another node, you can use the contains () method;
var box = document.getElementById (' box ');
Alert (Box.contains (Box.firstchild)); =>true;
Three DOM operation content
1.innerText Properties
document.getElementById (' box '). innertext; Gets the text content (if HTML is filtered directly out);
document.getElementById (' box '). innertext = ' Mr.Lee '; Sets the text (if there is HTML escape);
PS: In addition to Firefox, other browsers support this method; Firefox's DOM3 level provides another similar attribute: 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 Properties
innerHTML attribute can parse html;
document.getElementById (' box '). InnerHTML; Get text (do not filter HTML);
document.getElementById (' box '). InnerHTML = ' <b>123</b> '; 123 in bold;
Although innerHTML can be inserted into HTML, but there is a certain limit itself, that is, the so-called scope element, leaving the scope is invalid;
box.innerhtml = "<script>alert (' Lee ');</script>"; <script> elements cannot be executed;
box.innerhtml = "<style>background:red;</style>"; <style> elements cannot be executed;
3.outerText
Outertext in the value of the same time and innertext, while Firefox does not support;
And the assignment method is quite dangerous, it not only replaces the text content, but also erases the element directly;
var box = document.getElementById (' box ');
Box.outertext = ' <b>123</b> ';
Alert (document.getElementById (' box ')); =>null; Not recommended for use;
4.outerHTML
The outerHTML property is innerHTML consistent with the value, but like Outertext, the element is erased after the assignment;
var box = document.getElementById (' box ');
box.outerhtml = ' 123 ';
Alert (document.getElementById (' box ')); null;
PS: A comparison of the most commonly used innerHTML properties and node manipulation methods, and the efficiency of using innerHTML is significantly higher
when inserting a large number of HTML tags; Because when you set up innerHTML, you create an HTML parser that is browser-level, so it's much
faster to execute JavaScript; However, creating and destroying HTML parsers can also result in performance losses, preferably within the most reasonable range;
for (var i=0 i<10; i++) {
ul.innerhtml = ' <i>item</i> '; Avoid frequent;
}
Perfect for
(var i=0 i<10; i++) {
a = ' <li>item</i> '; temporary save;
ul.innerhtml = A;
Iv. Summary
Dom is a language-neutral API for accessing and manipulating HTML and XML documents;
The DOM1 level of HTML and XML documents as a hierarchical node tree, you can use JavaScript to manipulate the node tree, and then change the appearance and structure of the underlying document;
The DOM consists of a variety of nodes, briefly summarized as follows:
1. The basic node type is node, which is used to represent an independent part of the document Abstractly, and all other types inherit from node; The
2.Document type represents the entire document and is the root node of a set of hierarchical nodes; in JavaScript, the Document object is an instance of the document;
using the Document object, there are many ways to query and get nodes; A
3.Element node represents all of the HTML or XML elements in a document and can be used to manipulate the content and attributes of those elements;
4. There are also node types that represent text content/annotation/document type/cdata areas and document fragments;
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
