Javascript DOM programming Art

Batch filling of arrays in JS:

1. Fill in the statement at the same time

VaR Beatles = array ("John", "Paul", "George", "ringo ");

2. We don't even need to explicitly indicate that we are creating an array. In fact, we only need to enclose a bunch of square brackets to create the array we want:

VaR Beatles = ["John", "Paul", "George", "ringo"];

In JSJoin Array

: Array subscript in JS is not limited to integer. array subscript can be a string:

VaR Lennon = array ();

Lennon ["name"] = "John ";

Lennon ["year"] = "1940 ";

Use an object as a Union Array

A = {A: "Athens", B: "Belgrade", C: "Cairo "}

In a sense, all arrays are regarded as correlated arrays. A numerical array is only a special case of correlated arrays.

Arrays in JScript are sparse.

That is to say, if an array has three elements numbered 0, 1, and 2, you can create element 50 without worrying about parameters from 3 to 49. If the array has an automatic length variable, the length variable is set to 51 instead of 4. Of course, you can create an array with no gaps between the numbers of each element, but it is not necessary to do so.

In JScript, objects and arrays are almost the same. The two main differences are that the object does not have the automatic Length attribute, but the array does not have the attribute and method of the object.

CSS Cascading Style Sheet definition method:

<P class = "special"> This <p>

<H2 class = "special"> SO <H2>

1. In the style sheet, we can define a shared style for all elements with the same class attribute values as below:

. Special {

Font-style: italic;

}

// Spical is the class ID

2. We can also use the class attribute as follows to define an exclusive style for a specific type of element:

H2.spical {

Text-tansform: uppercase;

}

// Spical is the class ID

3. The purpose of the ID attribute is to add a unique identifier to an element in the webpage.

<Ul id = "purchase">

In the style sheet, we can define an exclusive style for elements with specific ID attribute values as follows:

# Purchase {

Border: 1px;

Color: # CCC;

}

4. We can also use the ID attribute below to define styles for other elements contained in a given grievance, so that the defined styles only apply to relevant elements contained in the given element.

# Purchase Li {

Font-weight: bold;

}

Getelementbytagname use the wildcard ("*")

Document. getelementbytagname ("*"); // you can obtain all element nodes in the document.

If return false is added to the Javascript triggered by the onclick event, further processing of the event can be prevented to prevent link redirection.

<A href = "#" onclick = "alert (); Return false;"> firefox </a>

"Javascript:" pseudo Protocol

You can enter the pseudo protocol in the address bar for debugging:Javascript: Debugger

;

You can also use the "javascript:" pseudo protocol to call Javascript in the HTML document.Code(This method is not standardized and has unclear semantics, so it is not recommended): <a href = "javascript: Alert ();"> alert </a>

Each function has only one entry and one exit.

?

In theory, this principle is better, but too strict with the principle often makes the code difficult to read.

 It is acceptable that a function has multiple exit points. However, they should be concentrated at the beginning of the function.

Function pre (){

If (! Document. getelementbyid) return false;

}

Document. Write () and innerhtml destroy the separation principle between JS and HTML. Avoid using them whenever possible.

Insertbefore

Get the previussibling and nextsibling sibling nodes

For... in statement: It can temporarily assign the subscript (key word) of an array to a variable, so it can directly treat the object as a Union array.

// Initialize the object.

A = {"A": "Athens", "B": "Belgrade", "C": "Cairo "}

// Iteration attributes.

For (key in ){

S + = A [Key];

}

Title attribute:

The title attribute is similar to the standard HTML title attribute. The behavior of a title is similar to a Microsoft Windows tooltip.

Use Dom to set the alternate table colors (zebra crossings )(IE8 does not support exprssion. Currently, expressions in CSS cannot be used.

)

Function (){

VaR tables = Document. getelementsbytagname ("table ");

For (VAR I = 0; I <tables. length; I ++)

{

VaR odd = false;

VaR rows = tables [I]. getelementsbytagname ("TR ");

For (var j = 0; j <rows. length; j ++)

{

If (odd = true)

{

Row [J]. style. backgroundcolor = "# FFC ";

Odd = false;

}

Else

{

Odd = true;

}

}

}

}

Effect of "APPEND" in CSS:

Append the new class value to the classname using the String concatenation operation (note that there is a space to separate the two classes), so that style overlay is realized, the definition in the new style will produce results based on the old style.

ELEM. classname + = "Intro ";

However, spaces are only required based on the existing classname attribute. Therefore, you must first determine the classname. You must append the space only when the classname attribute is not null. Otherwise, the space is assigned directly.

Use the following function to follow the mouse of the control (because the control will be moved in pixels, the animation effect is better)

Function moveelement (elementid, final_x, final_y, interval)

{

If (! Document. getelementbyid (elementid) return false;

VaR ELEM = Document. getelemenbyid (elementid );

If (ELEM. Movement)

{

Cleartimeout (ELEM. Movement );

ELEM. Movement = NULL;

}

VaR xpos = parseint (ELEM. style. Left );

VaR ypos = 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. syle. Left = xpos + "PX ";

ELEM. syle. Top = ytop + "PX ";

VaR repeat = "moveelement (" + "'" + elementid + "', '" + final_x + "', '" + final_y + "'" + ")";

Element. Movement = setTimeout (Repeat, interval );

}

Dom replication Node Method: clonenode (deep), which has only one Boolean parameter. It determines whether to copy the child nodes of the copied node to the new node.

Dom provides a method to replace the nodes in the Document Tree: replaceChild (newchild, oldchild), which replaces a child node in a given parent element with another node, and return the child node that has been replaced.