The Art of JavaScript DOM Programming

 1
 2
 3
 4
 5

 < script type = "text/JavaScript" >
 console.log ( 1 );
 <!-- print 1 1 after running -->
 console.log ( 1 );
 </ script >

 1
 2
 3
 4
 5

 < script type = "text/JavaScript" >
 console.log ( 2 );
 <!-- print 2 2 after running
 console.log ( 2 );
 </ script >

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18

 document .getElementById(elementId); // Get the DOM element by id
 document .getElementsByTagName(tagName); // Get elements by tagName
 document .getElementsByClassName(classNames); // Get elements by classNames
 dom.setAttribute(name, value); // set the value of the attribute
 dom.getAttribute(name); // Get the value of the attribute
 dom.childNodes; // Get child elements
 dom.nodeType; // Get node type 1: element node 2: attribute node 3: text node
 textNode.nodeValue = 'text' ; // modify the value of the text node
 document .write(text); // write the full page to the document
 dom.innerHTML; // Get the HTML text in the DOM
 dom.innerHTML = text; // set the HTML in the DOM
 dom.innerText; // Get the text in the DOM (omit HTML tags)
 dom.innerText = text; // set the text in the DOM
 document .createElement(nodeName); // create an element
 document .createTextNode(text); // create a text node
 dom.appendChild(node); // append a node
 dom.insertBefore(node, child); // Insert the node before the child element of the parent element dom
 dom.style.fontSize = value; // set the style

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15

 // set value to input
 inputDom.setAttribute( 'value' , value);
 inputDom.value = value;

 // set image value to img
 imgDom.setAttribute( 'src' , src);
 imgDom.src = src;

 // set value href to a
 aDom.setAttribute( 'href' , href);
 aDom.href = href;

 // set value class to dom
 dom.setAttribute( 'class' , className);
 dom.className = className;

 1

 window .open(url, "popup" , "width=320,height=480" );

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11

 function addLoadEvent ( func ) {
 var oldonload = window.onload;
 if ( typeof window .onload != 'function' ) {
 window.onload = func;
 } else {
 window.onload = function ( ) {
 oldonload();
 func();
 }
 }
 }

 1
 2
 3
 4
 5
 6
 7
 8

 function insertAfter ( newElement, targetElement ) {
 var parent = targetElement.parentNode;
 if (parent.lastChild == targetElement) {
 parent.appendChild(newElement);
 } else {
 parent.insertBefore(newElement,targetElement.nextSibling);
 }
 }

 1
 2
 3
 4
 5
 6
 7
 8

 function addClass ( element, value ) {
 if (!element.className) {
 element.className = value;
 } else {
 element.className += " " ;
 element.className += value;
 }
 }

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 twenty one
 twenty two
 twenty three
 twenty four
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39

 function moveElement ( elementID, final_x, final_y, interval ) {
 if (! document .getElementById) return false ;
 if (! document .getElementById(elementID)) return false ;
 var elem = document.getElementById (elementID);
 if (elem.movement) {
 clearTimeout(elem.movement);
 }
 if (!elem.style.left) {
 elem.style.left = "0px" ;
 }
 if (!elem.style.top) {
 elem.style.top = "0px" ;
 }
 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) {
 var dist = Math .ceil((final_x - xpos)/ 10 );
 xpos = xpos + dist;
 }
 if (xpos > final_x) {
 var dist = Math .ceil((xpos - final_x)/ 10 );
 xpos = xpos - dist;
 }
 if (ypos < final_y) {
 var dist = Math .ceil((final_y - ypos)/ 10 );
 ypos = ypos + dist;
 }
 if (ypos > final_y) {
 var dist = Math .ceil((ypos - final_y)/ 10 );
 ypos = ypos - dist;
 }
 elem.style.left = xpos + "px" ;
 elem.style.top = ypos + "px" ;
 var repeat = "moveElement('" +elementID+ "'," +final_x+ "," +final_y+ "," +interval+ ")" ;
 elem.movement = setTimeout(repeat,interval);
 }

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 twenty one
 twenty two
 twenty three
 twenty four
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42

 function convertToGS ( img ) {
 // store the original image
 img.color = img.src;

 // store the black and white image
 img.grayscale = createGSCanvas(img);

 // Switch the image when the mouse is over and removed
 img.onmouseover = function ( ) {
 this.src = this.color ;
 }
 img.onmouseout = function ( ) {
 this.src = this.grayscale ;
 }
 }

 function createGSCanvas ( img ) {
 var canvas= document .createElement( "canvas" );
 canvas.width=img.width;
 canvas.height=img.height;
 var ctx=canvas.getContext( "2d" );
 ctx.drawImage(img, 0 , 0 );

 // Note: The getImageData method can only take effect in a web environment, and an error will be reported when opening HTML directly with a browser
 var c = ctx.getImageData( 0 , 0 , img.width, img.height);
 for (i= 0 ; i<c.height; i++) {
 for (j= 0 ; j<c.width; j++) {
 var x = (i* 4 ) * c.width + (j* 4 );
 var r = c.data[x];
 var g = c.data[x+ 1 ];
 var b = c.data[x+ 2 ];
 c.data[x] = c.data[x+ 1 ] = c.data[x+ 2 ] = (r+g+b)/ 3 ;
 }
 }
 ctx.putImageData(c, 0 , 0 , 0 , 0 , c.width, c.height);
 return canvas.toDataURL();
 }

 // Note: You need to see the effect in the web environment
 window.onload = function ( ) {
 convertToGS( document . getElementById( 'avatar' ));
 }