DOM: It is using JavaScript to manipulate HTML nodes.
Knowledge Points:
turning HTML into a DOM tree
Seeing HTML will draw a DOM tree.
Create nodes, add nodes, delete nodes
Varnodeobj = document.createelement ("node named"); To create an element node
document.createTextNode ("text"); Create a text node
Parent node. appendchild (child node); The handle node is added under the parent node
Parent node. removechild (child node);
Get node
document.getElementById ("ID number");
document.getElementsByTagName ("tag name of HTML") [0];
Parent node. getElementsByTagName ("tag name of HTML") [0];
Get node of child element
Parent node. childnodes
Parent node. firstchild
Parent node. LastChild
The properties of the node
NodeType 1 element Node 2 attribute node 3 text node
NodeName element node, returns an uppercase string of label names
NodeValue text node, returns or sets the text
Get sibling node
The current node. nextsiblings
set the properties of a node
Node. setattribute (property name, value);
Node. GetAttribute (property name);
P.setattrubute ("Style", "color:red;font-size:20px;");
General practice, you can set or get
Node. Property name
Set Text
Text node. nodevalue= text;
Case: Click the small picture to see the big picture
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<meta charset= "gb2312"/>
<style type= "Text/css" >
body{
Background-color:pink;
}
#div {
/*BORDER:1PX Solid green;*/
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 {
/*BORDER:1PX Solid red;*/
width:640px;
height:400px;
margin:10px Auto;
Clear:both;
}
</style>
<body>
<div id= "div" >
<ul id= "ul" >
<li>
<a href= "Imgs/0.jpg" >
</img>
</a>
</li>
<li>
<a href= "Imgs/1.jpg" >
</img>
</a>
</li>
<li>
<a href= "Imgs/2.jpg" >
</img>
</a>
</li>
<li>
<a href= "Imgs/6.jpg" >
</img>
</a>
</li>
<li>
<a href= "Imgs/4.jpg" >
</img>
</a>
</li>
</ul>
</div>
</body>
<script type= "Text/javascript" >
Create a DIV node
var divshow = document.createelement ("div");
Set the id attribute of a div
Divshow.setattribute ("id", "divshow");
Create an IMG node
var img = document.createelement ("img");
Set an IMG id attribute
Img.setattribute ("id", "img");
Set the SRC attribute of img
Img.setattribute ("src", "imgs/face.jpg");
Add an IMG node to the DIV
Divshow.appendchild (IMG);
Create a text description label P
var p = document.createelement ("P");
P.setattribute ("id", "P");
P.appendchild (document.createTextNode ("description"));
Get the body node in HTML
var BODY = document.getElementsByTagName ("body") [0];
To add a div to the body node
Body.appendchild (divshow);
Body.appendchild (P);//Add p to the body
To add a click event for an element
The node object. event name = new function () {};
Get all the <a> tags
var alist = document.getElementById ("div"). getElementsByTagName ("a");
for (var i = 0;i < Alist.length; i++) {
Toggle picture When mouse clicks
Alist[i].onclick = function () {
This is the node that is currently clicked
Point who gets the value of the href and title
var href = this.getattribute ("href");
var img = this.getelementsbytagname ("img") [0];
var title = Img.getattribute ("title");
To modify the SRC attribute of an IMG tag
var img = document.getElementById ("img");
Img.setattribute ("src", href);
Modify the text of the P label
var p = document.getElementById ("P");
P.firstchild.nodevalue=title;
Cancel <a> label Jump
return false;
}
Switch pictures When the mouse is called
Alist[i].onmousemove = function () {
This is the node that is currently clicked
Point who gets the value of the href and title
var href = this.getattribute ("href");
var img = this.getelementsbytagname ("img") [0];
var title = Img.getattribute ("title");
To modify the SRC attribute of an IMG tag
var img = document.getElementById ("img");
Img.setattribute ("src", href);
Modify the text of the P label
var p = document.getElementById ("P");
P.firstchild.nodevalue=title;
Cancel <a> label Jump
return false;
}
}
</script>
