Home > Developer > JavaScript
The development of DOM is related to the trend of web standardization. Only based on the correct semantic logic, DOM can play its function correctly. Today, the right semantic structure, performance and content separation requirements, have become the basic requirements of web design. Therefore, in the front-end development of Web pages, the existence of DOM, is undoubtedly for the performance layer, behavior layer and even the content level of the connection provides an excellent API, become a popular AJAX application is an integral part.
I. Stable degradation
1. Concept
In the early days, when JavaScript was not used, the contents of the Web page were displayed normally, and users could navigate to the content through peripherals such as mice, which might not be ideal for users.
Based on this requirement, the provider of content has the rationalization objective of using JavaScript to improve the user experience and to improve user stickiness without affecting content presentation.
In this header, there is a very obvious condition, that is, can not affect the content of the normal display, in other words, even if the user's browser does not support JavaScript, but also to ensure that users can browse normally.
2. Methods
① separates JavaScript from HTML
This is the first thing you should think of, and let the two separate, HTML is like back to the early unused JavaScript before the state, dry as before.
For example, you would write event handlers like Element.onclick into JavaScript and bind to a function.
② to detect methods in JavaScript
Some of the methods mentioned earlier, such as getElementById, need to determine whether the method is supported.
<script> if (! document.getElementById) return false; </script>
Through the IF statement this way to detect whether the method is supported, if supported, you can continue, do not support, directly return false, so there is no need to delay Kung Fu, also played a role in optimizing performance.
Ii. Binding the OnLoad event
1. Binding Reason
Some functions need to be fully executed after the page is loaded, and we need to bind the function to the Window.onload event.
<!doctype html>
In the above example, if window.onload is not bound, executing the function tagattribute would be meaningless.
It's also important to note that the binding is a function, not the value of the function, so there is no parentheses behind it.
2. Binding method
If you only need to bind a function, the above method can easily achieve your goal.
Window.onload = MyFunction;
If it's multiple, maybe you'll go through one binding, but the result is that only the last function will be executed effectively, and that's a good idea.
Our aim is to perform these functions effectively, regardless of how many functions are executed when the page is loaded, that is, these functions are successfully bound to window.onload events.
<!doctype html>
JavaScript Learning notes Dom Knowledge points summary
JavaScript window objects correspond to the browser windows themselves, so the object's properties and methods are collectively referred to as the BOM (browser object model), such as window.open (), window.location, and so on.
The document object of JavaScript refers to the documentation object model, which mainly deals with the content of the Web page. The DOM (Document Object model), which is an API for both HTML and XML documents, is the documentation objects module. The letter D refers to the document, the letter O refers to the object, and the letter refers to model. The DOM depicts a hierarchical node tree. The node represents a connection point, the document is a set of nodes, the DOM nodes are divided into three categories: element node, text node (not text content), attribute node.
Get the name and type of the node
The 1.nodeName property is used to get the name of the node, the text node returns #text, and the element node returns the label name (at this point equivalent to tagname). Syntax: Target node. nodename
The 2.nodeType property is used to get the type of the node, element node: 1, Attribute node: 2, Text node: 3. Syntax: Target node. nodeType
The 3.nodeValue property is used to get and set the value of the node. The element node returns NULL. Syntax: Target node. nodevalue
How to get ELEMENT nodes
1. document.getElementById
Find by ID, return unique element node
2. Document.getelementsbyname
Search by Name property to return an array of ELEMENT nodes
3. document.getElementsByTagName
Search by tag name to return an array of ELEMENT nodes
The following three methods belong to the HTML5 DOM and are not supported by all browsers (such as some of the lower versions ie are not supported) and are advanced methods
4. Document.getelementsbyclassname
Lookup with the class name of the class attribute, returning an array of ELEMENT nodes
5. Document.queryselector
Gets an element node through the selector condition, returning only the first element node that meets the criteria
6. Document.queryselectorall
Gets the element node through the selector condition, returns an array of all eligible element nodes, and the multiple conditions are separated by commas, indicating that the element to be looked for must conform to all comma-delimited conditions and that an element is not returned if it meets only one of the comma-separated criteria.
Summary: getElementById and queryselector only return one element node, while Getelementsbyname, getElementsByTagName, Getelementsbyclassname, Queryselectorall returns an array of ELEMENT nodes
Node pointer
The 1.childNodes property is used to get the child nodes of the element node and to return the array of nodes. Syntax: parent node. childnodes;
The 2.children property can be used to obtain a valid node that ignores a blank node (in some browsers, a blank or newline character is also a text node). Syntax: parent node. Children;
The 3.firstChild property can be used to get the first child node of an element, equivalent to childnodes[0]. Syntax: parent node. firstchild;
The 3.lastChild property can be used to get the last child node of an element, equivalent to childnodes[childnodes.length-1]. Syntax: parent node. lastchild;
The 4.previousSibling property is used to get the previous sibling node of the target node. Syntax: Target node. previoussibling;
The 5.nextSibling property is used to obtain the latter sibling node of the target node. Syntax: Target node. nextSibling;
The 6.parentNode property is used to get the parent node of a known node. Syntax: child nodes. parentnode;
The 7.ownerDocument property is used for the root node of the document in which the current node resides, equivalent to document. Syntax: Target node. ownerdocument;
Operation of nodes
The 1.createElement method is used to create element nodes. Syntax: document.createelement (' element tag name ');
The 2.createAttribute method is used to create the attribute node. Syntax: document.createattribute (' attribute name ');
The 3.createTextNode method is used to create a text node. Syntax: document.createTextNode (' textual content ');
The 4.appendChild method is used to add a child node at the end of the child node of the target node (either an element node created by createelement or a text node created by createTextNode). Syntax: Parent.appendchild (node to be inserted);
The 5.insertBefore method is used to insert a new element node before the target element, at which point the pointer is on the parent of the target element. Grammar: Parent.insertbefore (newelement,targetelement);
There is no InsertAfter this method in 6.DOM, but the InsertAfter can be simulated by the following methods;
*
* newelement: The new element to insert
* targetelement: Target element
/
function InsertAfter (newelement,targetelement) {
var parent = Targetelement.parentnode;
if (Parent.lastchild = = targetelement) {/
*
If the target element is the last child element of parent, append the new element to the parent element
. That is, add the new element at the end of parent's child element
/Parent.appendchild (newelement);
} else{
/* Otherwise, add the new element between the target element and the next sibling element of the target element
* *
parent.insertbefore (newelement, targetelement.nextsibling);
}
The 7.replaceChild method replaces an element node, at which point the pointer is on the parent of the target element. Grammar: Parent.replacechild (replaceelement,targetelement);
The 8.cloneChild method is used to clone an element node, passing a Boolean argument that, when the argument is true, duplicates the current node and all its child nodes, and when the argument is false, the payment to the current node is expressed. Syntax: Target element. Clonechild (True|false);
The 9.removeChild method is used to delete a specified node. Syntax: removechild (node to delete);
The 10.getAttribute method is used to get the value of a property. Syntax: Target element. getattribute (element attribute name);
The 11.setAttribute method is used to set the value of a property that is not created without that property. Syntax: Target element. setattribute (element attribute name, attribute value);
The 12.removeAttribute method is used to delete an attribute node. Syntax: Target element. removeattribute (the name of the property to be deleted);
Dom Action Content
The 1.innerHTML property is used to get and set HTML content. Syntax: element node. InnerHTML or element node. InnerHTML = ' html string ';
The 2.innertext|textcontent property is used to get and set the text content. Firefox uses textcontent to get and set (note compatibility). Syntax: element node. innertext or element node. innertext = ' html string ';
DOM Action Style
The 1.style property is used to get and set the inline style of the element. Syntax: The Element.style;style property can only get and set inline styles, and for such style attributes as Font-size, you should remove-and then capitalize-the first letter in the back, the hump method to get and set such as: Element.style.fontSize, Element.style.backgroundColor
The 2.getComputedStyle global method is used to get the computed style, the first parameter is the element node, the second parameter is the type, such as: hover,:active, and so on, by default, some IE versions use the Currentstyle property to get Box.currentstyle. Syntax: window.getComputedStyle (element, type)
The 3.className property is used to get and set the style name of the element. Syntax: Element.classname
4. Custom AddClass () | Hasclass () | Removeclass () method
Does the element contain a style
function hasclass (element,classname) {return
!! Element.className.match (New RegExp (' (\\s|^) ' +classname+ ' (\\s|$) ');
}
Add a new style function to an element
addclass (element,classname) {
if (hasclass (element,classname) = False) {
Element.classname + = ' +classname
}
}
Removes the specified style
function removeclass (element,classname) {
var currentclass = Element.classname of the element;
if (Hasclass (Element,classname)) {
Currentclass = currentclass.replace (New RegExp (' \\s|^ ') ' +classname+ ' (\\s|$) '),' ');
Remove space
Currentclass = Currentclass.replace (/(^\s*) | ( \s*$)/g, "");
Element.classname = Currentclass;
}
Dom Operation location and size
The 1.clientWidth property is used to get the actual width of the element, which is affected by the scroll bar and the inner margin, and the outer margin and border do not affect. Grammar:
Element.clientwidth;
The 2.clientHeight property is used to get the actual height of the element, which is affected by the scroll bar and the inner margin, and the outer margin and border do not affect. Grammar:
Element.clientheight;
The 3.offsetWidth property is used to get the actual width of the element, which is affected by the border and the inner margin, and the outer margin and scroll bars do not affect the value. Grammar:
Element.offsetwidth;
The 4.offsetHeight property is used to get the actual height of the element, which is affected by the border and the inner margin, and the outer margin and scroll bars do not affect the value. Grammar:
Element.offsetheight;
The 5.offsetTop and Offsetleft properties are used to get the position of an element relative to the parent. The value is affected by the outer margin. Syntax: element.offsettop | |
Element.offsetleft;
The 6.scrollTop and ScrollLeft properties are used to get the area size that the scroll bar is hidden, or to set to navigate to the area (for example, to return to the top). Grammar:
Element.scrolltop | | Element.scrollleft | | element.scrolltop = 0;
Simple and fast document properties and methods commonly used
Document.title to get the document title
Document.domain is used to get the current domain name
Document. URL is used to get the current URL path
Document.forms Get Form Collection
Document.images Get Picture Collection
Document.body gets the BODY element node
Document.compatmode Recognition Document Mode
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
