DOM: JavaScript is used to operate HTML nodes.
Knowledge point:
Turn HTML into a DOM tree
HTML draws a DOM tree.
Create, add, and delete nodes
VarnodeObj = document. createElement ("node name"); // create an element node
Document. createTextNode ("text"); // create a text node
Parent node. appendChild (child node); // Add the child node to the parent node
Parent node. removeChild (child node );
// Obtain the node
Document. getElementById ("ID ");
Document. getElementsByTagName ("html Tag Name") [0];
Parent node. getElementsByTagName ("html Tag Name") [0];
// Obtain 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
The nodeName element node is used to return the uppercase string of the tag name.
NodeValue text node used, return or set text
// Obtain the sibling Node
Current node. nextSiblings
Set node attributes
Node. setAttribute (attribute name, value );
Node. getAttribute (attribute name );
P. setAttrubute ("style", "color: red; font-size: 20px ;");
// Set or obtain
Node. attribute name
Set text
Text node. nodeValue = text;
Case: Click the thumbnail to view the big image
Copy codeThe Code is as follows:
<! 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 {
/* 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>
</Head>
<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>
</Html>
<Script type = "text/javascript">
// Create a div Node
Var divShow = document. createElement ("div ");
// Set the id attribute of the div
DivShow. setAttribute ("id", "divShow ");
// Create an img Node
Var img = document. createElement ("img ");
// Set the img id attribute
Img. setAttribute ("id", "img ");
// Set the src attribute of img
Img. setAttribute ("src", "imgs/face.jpg ");
// Add the img node to the div
DivShow. appendChild (img );
// Create the text description label p
Var p = document. createElement ("p ");
P. setAttribute ("id", "p ");
P. appendChild (document. createTextNode ("Description "));
// Obtain the body node in HTML
Var body = document. getElementsByTagName ("body") [0];
// Add the div to the body Node
Body. appendChild (divShow );
Body. appendChild (p); // Add p to the body.
// Add a click event for the element
// Node object. event name = new function (){};
// Obtain all the <a> labels
Var alist = document. getElementById ("div"). getElementsByTagName ("");
For (var I = 0; I <alist. length; I ++ ){
// Switch the image when the mouse clicks
Alist [I]. onclick = function (){
// This indicates the currently clicked node.
// Click who gets the 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 label
Var img = document. getElementById ("img ");
Img. setAttribute ("src", href );
// Modify the p label text
Var p = document. getElementById ("p ");
P. firstChild. nodeValue = title;
// Cancel the jump of the <a> label
Return false;
}
// Switch the image when the mouse is called
Alist [I]. onmousemove = function (){
// This indicates the currently clicked node.
// Click who gets the 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 label
Var img = document. getElementById ("img ");
Img. setAttribute ("src", href );
// Modify the p label text
Var p = document. getElementById ("p ");
P. firstChild. nodeValue = title;
// Cancel the jump of the <a> label
Return false;
}
}
</Script>