JavaScript DOM Programming Art (Second edition) book Summary

This book is a very basic book, but for the first time in the front of me is a good book, the harvest is very big, some basic things understand more thoroughly.

1.DOM is the abbreviation for the Document Object model, which is what JavaScript does with the DOM, or the operation of the node.

2.js DOM, this is all objects, there are properties there are methods.

The 3.document object has a Body property, so it can be written directly to Document.body without having to get the BODY element (document.getElementsByTagName ("body") [0]). The node created by CreateElement is also an object.

4. Get the Url,window.location.href of the current page.

5. Loops, judgments do not form a scope, only the function will be formed, such as the following code:

    fn(){        if(1==1){ alert(1) return false alert(2) } alert(3) } fn()

Previously thought 1 and 3 will pop up, actually not, here will only pop up 1, although the IF statement has curly braces {}, but it does not have the role of the scope, only the function will be formed, so in the function fn return false after the code will not be executed.

6. Four more useful native JS functions in the book.

① we all know that if you add a script tag to JS before the BODY element, you must write:

window.onload= function (){}

This means that when the document structure is loaded and then the code inside the function is loaded, the DOM element cannot be retrieved. The book gives another way to not write this function, the function to be executed as the parameters of the Addloadevent function:

OnLoad event sharing functionfunction Addloadevent(Func){var oldonload=Window.onload;if (typeof window.onload!=< Span class= "hljs-string" > "function") {WINDOW.ONLOAD=FUNC;} else{window.onload = function  (< Span class= "hljs-function" >< Span class= "hljs-function" > 

② Native JS does not provide InsertAfter method, only InsertBefore method, encapsulates InsertAfter function, parameter is DOM object:

 function insertafter ( newelement,targetelement) {var parent = Targetelement.parentnode; if (parent.lastchild = = targetelement) { parent.appendchild (newelement);} else{parent.insertbefore (newelement, targetelement.nextsibling); } } 

③ Animation functions

Animation functionsfunction Moveelement(Elementid,final_x,final_y,interval){if (!document.getElementById)ReturnFalseif (!document.getElementById (ElementID))ReturnFalsevar elem=document.getElementById (ElementID);if (elem.movement) {cleartimeout (elem.movement);}if (!elem.style.top) {elem.style.top ="0px"}if (!elem.style.left) {elem.style.left ="0px"}var xpos =parseint (Elem.style.left);var ypos =parseint (Elem.style.top);var dist =0;if (xpos = = final_x && ypos = = final_y) {ReturnTrue }if (Xpos < final_x) {dist =Math.ceil ((Final_x-xpos)/10); xpos = xpos + dist; }if (Xpos > final_x) {dist =math.ceil ((final_x-xpos)/10); xpos = xpos-dist;} if (Ypos < final_y) {dist = math.ceil ((final_y-ypos)/10); ypos = ypos + dist; } if (Ypos > final_y) {dist = math.ceil ((Final_y-ypos)/< Span class= "Hljs-number" >10); Ypos = ypos-dist; } elem.style.left = xpos +  "px"; elem.style.top = ypos +  "px"; var repeat =  "moveelement ('" +elementid+ " , "+final_x+", "+final_y+", "+interval+ 

Usage such as: moveelement ("div", 300,300,20), first parameter element ID, the second third parameter is the final position of the element, and the fourth parameter is the time span.

④ a function that adds a class name to an element

Add Class name AddClass functionfunctionAddClass(element,< Span class= "Hljs-keyword" >< Span class= "hljs-function" >value ) {if (!element.classname) {element.classname = value;} else{newclassname = element.classname; newclassname+=  ""; newclassname+= value; element.classname = Newclassname;}}       

A colleague to read this book, I always Say to me, "reading is no use, you still will forget", I actually listen to him to say this several times quite annoying, I did not refute him, I think this topic really is not worth me to refute.

JavaScript DOM Programming Art (Second edition) book Summary