"JavaScript DOM Programming Art" (second edition) reading notes (iv)

The eighth chapter enriches the contents of the document

This chapter is mainly about the application of the previous Dom method, there are a few points to note.

1.for/in Cycle

Syntax:for (variable in array) {}

The loop can be used to iterate over an array (or an object), primarily to an array (or object) that is not a number .

is a number, the array is generally a for loop: for (Var i=0;i<array.length;i++) {}

2. About nodes

When writing a DOM script, we take it for granted that a node is definitely an element node, but it is recommended to check the NodeType property if you are not sure.

For example LastChild, we tend to think that it gets the element node, not necessarily, but we can write a Lastchildelement method by Dom method

We can pass the "*" wildcard character as a parameter into getElementsByTagName (), get all the element nodes, and take the last element node, so that the last element node is guaranteed.

Nineth Chapter Css-dom

Style Property Element.style.property

The style contains the elements ' styles, and querying this property will return an object instead of a simple string.

method to get the next element node getnextelement ()

function getnextelement () {    if(node.nodetype==1) {        return  node;    }     if (node.nextsibling) {        return  getelement (node.nextsibling);    }     return NULL ;}

ClassName Property

Element.classname = value

Using this attribute, we can write the AddClass function in jquery (the code given by the author is much like the method in jquery).

function addclass (element,value) {    if (!  Element.classname) {        Element.classname=value;     Else {        = element.classname;         = "";        Newclassname+ =value;        Element.classname=newclassname;}    ;}

The tenth chapter uses JavaScript to achieve the animation effect

SetTimeout ("function", interval)

Cleartimeout ()

SetTimeout allows a function to start executing after a certain period of time. This function has two parameters: the first argument is usually a string whose content is the name of the function that will be executed, and the second parameter is a numeric value that sets the function in milliseconds for how long it will take to start executing a parameter.

This function call is generally assigned to a variable variable = setTimeout ("function", interval)

Cleartimeout is canceling a function that is waiting to be executed, and this method requires a parameter: cleartimeout (variable)

moveelement () function (see the original book for an explanation of the function, which works like jquery's animate)

functionmoveelement (elementid,final_x,final_y,interval) {if(!document.getelementbyid)return false; if(!document.getelementbyid (ElementID))return false; varElem =document.getElementById (ElementID); varXpos =parseint (Elem.style.left); varYpos =parseint (elem.style.top); if(xpos==final_x&&ypos==final_y) {        return true; }    if(xpos<final_x) {xpos++; }    if(xpos>final_x) {xpos--; }    if(ypos<final_y) {ypos++; }    if(ypos>final_y) {ypos--; } elem.style.left= xpos+ "px"; Elem.style.top= ypos+ "px"; varrepeat = "moveelement ('" +elementid+ "'," +final_x+ "," +final_y+ "," +interval+ ")"Movement=setTimeout (repeat,interval);}

ElementID: The id;final_x of the element to be moved: the destination "left" position of the element, Final_y: The location of the element's destination "Up", Interval: The pause time between two moves.

"JavaScript DOM Programming Art" (second edition) reading notes (iv)