js ideas and sample code to realize the effect of clicking on a small picture to see the big picture_javascript skills

DOM: It is to use JavaScript to operate HTML nodes.

Knowledge points:

Convert HTML into a DOM tree

When you see HTML, you will draw a DOM tree.

Create node, add node, delete node

varnodeObj = document.createElement("node name"); //Create element node

document .createTextNode("Text"); //Create text node

Parent node.appendChild(child node); //Add child node to parent node

Parent node.removeChild(child Node);

//Get node

document.getElementById("id number");

document.getElementsByTagName("html tag name")[0];

Parent node.getElementsByTagName("html tag name")[0];

//Get the node of the child element

Parent node.childNodes

Parent node.firstChild

Parent node.lastChild

//Node attributes

nodeType 1 element node 2 attribute node 3 text node

nodeName element Used by nodes, return the uppercase string of the label name

nodeValue Used by text nodes, return or set text

//Get sibling nodes

Current node.nextSiblings

Set the attributes of the node

Node.setAttribute(attribute name, value);

Node.getAttribute(attribute name);

p. setAttrubute("style","color:red;font-size:20px;");

//General approach, you can set or get the

node. Attribute name

Set text

Text node.nodeValue=text;

Case: Click on the small image to see the larger image

Copy code The code is as follows:

• 
  
  
  
  


• 
  
  
  
  


• 
  
  
  
  


• 
  
  
  
  


•