Js implementation point small graph to see the effect of the idea and sample code

2020-03-26 21:43:56
OfStack

DOM: is the use of JavaScript to manipulate HTML nodes.

Knowledge:

Turn HTML into a DOM tree

When you see HTML, you draw a DOM tree.

Create a node, add a node, and delete a node

VarnodeObj = document.createelement (" node name "); // create the element node

Document. The createTextNode (" text "); // create a text node

Parent node. AppendChild (child node); // add child node to parent node

RemoveChild (child node);

// gets the node

Document. The getElementById (" id ");

Document. GetElementsByTagName (" HTML tag name ") [0];

GetElementsByTagName (" tag name of HTML ")[0];

// gets the node of the child element

The parent node..childnodes

The parent node. FirstChild

The parent node. LastChild

// node properties

NodeType 1 element node 2 attribute node 3 text node

The nodeName element node is used to return an uppercase string of the tag name

The nodeValue text node is used to return or set text

// get sibling nodes

Current node. NextSiblings

Sets the properties of the node

Node. SetAttribute (attribute name, value);

Node. GetAttribute (attribute name);

P. etAttrubute (" style ", "color: red; The font - size: 20 px;" );

// in general, you can set or get

Node. Property name

Set the text

NodeValue = text;

Case: click on the small picture to see the large picture

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<meta charset="gb2312" /> 
<style type="text/css"> 
body{ 
background-color:pink; 
} 
#div{ 
 
margin:40px auto; 
width:900px; 
} 
#ul li{ 
float:left; 
margin-right:10px; 
list-style-type:none; 
} 
p{ 
background-color:silver; 
width:50%; 
margin:0 auto; 
top:10px; 
text-align:center; 
} 
#divShow{ 
 
width:640px; 
height:400px; 
margin:10px auto; 
clear:both; 
} 
</style> 
</head> 
<body> 
<div id="div"> 
<ul id="ul"> 
<li> 
<a href="imgs/0.jpg"> 
<img src="imgs_small/0.jpg" title=" The picture 111"></img> 
</a> 
</li> 
<li> 
<a href="imgs/1.jpg"> 
<img src="imgs_small/1.jpg" title=" The picture 222"></img> 
</a> 
</li> 
<li> 
<a href="imgs/2.jpg"> 
<img src="imgs_small/2.jpg" title=" The picture 333"></img> 
</a> 
</li> 
<li> 
<a href="imgs/6.jpg"> 
<img src="imgs_small/6.jpg" title=" The picture 444"></img> 
</a> 
</li> 
<li> 
<a href="imgs/4.jpg"> 
<img src="imgs_small/4.jpg" title=" The picture 555"></img> 
</a> 
</li> 
</ul> 
</div> 
</body> 
</html> 
<script type="text/javascript"> 
//Create a div node
var divShow = document.createElement("div"); 
//Set the id attribute of div
divShow.setAttribute("id","divShow"); 
//Create an img node
var img = document.createElement("img"); 
//Set the id attribute of img
img.setAttribute("id","img"); 
//Sets the SRC property of img
img.setAttribute("src","imgs/face.jpg"); 
//Add the img node under div
divShow.appendChild(img); 
//Create the text description label p
var p = document.createElement("p"); 
p.setAttribute("id","p"); 
p.appendChild(document.createTextNode(" instructions ")); 

//You get the body node in HTML
var body = document.getElementsByTagName("body")[0]; 
//Add div under the body node
body.appendChild(divShow); 
body.appendChild(p);//Add p to the body


//Add a click event to the element
//Event name = new function(){};

//Get all the <A> The label
var alist = document.getElementById("div").getElementsByTagName("a"); 

for(var i = 0;i < alist.length; i++){ 
//Switch between images when the mouse is clicked
alist[i].onclick = function(){ 
//This represents the currently clicked node
//Point who gets whose href and title values
var href = this.getAttribute("href"); 
var img = this.getElementsByTagName("img")[0]; 
var title = img.getAttribute("title"); 

//Modify the SRC attribute of the img tag
var img = document.getElementById("img"); 
img.setAttribute("src",href); 

//Modify the text of the p tag
var p = document.getElementById("p"); 
p.firstChild.nodeValue=title; 

//Cancel <A> Tag jump
return false; 
} 

//Switch pictures when the mouse is on
alist[i].onmousemove = function(){ 
//This represents the currently clicked node
//Point who gets whose href and title values
var href = this.getAttribute("href"); 
var img = this.getElementsByTagName("img")[0]; 
var title = img.getAttribute("title"); 

//Modify the SRC attribute of the img tag
var img = document.getElementById("img"); 
img.setAttribute("src",href); 

//Modify the text of the p tag
var p = document.getElementById("p"); 
p.firstChild.nodeValue=title; 

//Cancel <A> Tag jump
return false; 
} 
} 
</script>