accp8.0 Conversion Textbook 7th Chapter JavaScript Operation DOM Object understanding and practice

Program debugging, Chrome developer tools, DOM operations, node and node relationships, node information, operations node, get elements

I. Word part

①alert warning ②prompt prompt ③parentnode parent node ④childnode child node ⑤firstchild first child node

⑥lastchild Last child node ⑦nextsibling the next sibling ⑧previoussibling previous sibling

⑨createelement Create node Element appendchild additional node InsertBefore in: Before adding

CloneNode Copy Node removeNode delete node ReplaceNode replace node

Two. Preview section

1. Common JavaScript Program debugging

Chrome Debugging Tools and alert () methods

2. Describe the classification of Dom and the relationship between nodes

Dom-core (CORE), Html-dom and Css-dom

Have child parent relationship sibling relationship

3. Briefly describe how to access nodes by hierarchical relationship

Through the properties of the node:

Parentnode,childnode,firstchild, etc...

4. Briefly describe the difference between the style property and the classname in changing styles

Style accesses the style object by applying the style's document element, and the ClassName property sets or returns the class style of the element

Three. The Practice section (the original http://www.cnblogs.com/a782126844/need resources or source code can be private chat can buckle)

Can't upload the file can only upload JS code

1. Access when shopping cart page node

Click on the checkout to add the details below

Settlement
function accounts () {
var titleh1=document.createelement ("P");
var Price0=document.getelementbyid ("Price0"). InnerHTML;

var Price1=document.getelementbyid ("Price1"). InnerHTML;
var Sum=document.getelementbyid ("Totalprice"). InnerHTML;

Titleh1= "You purchased the product information as follows:" + "<br>" + "Bai Yansong: White said:" +price0+ "<br> Island Bookstore:" +price1+ "<br> Total Merchandise:" +sum;
var zon=titleh1;
var Div=document.getelementbyid ("ins");//Here I give it the DIV set an ID to get it easily
Div.innerhtml=zon;
}
Total ();

2. Operation Dangdang Delete node

JS file

Function del () {
var flag=confirm ("Are you sure you want to delete the item?");
if (flag==true) {
var Parent=document.getelementbyid ("Cartlist");

var One=document.getelementbyid ("Price0"). parentnode;
One.parentNode.removeChild (one);
Total ();
Alert ("Delete succeeded!");

}

}

3. Production Workshop Forum Post

The page will not be sent out the principle of JS implementation

JavaScript Document
Post display
function sub () {
var Po=document.getelementbyid ("Post");
po.style.display= "Block";
}
Post Submission
function Subti () {
var Num=math.floor (Math.random () *4+1); A random integer between output 1~4
var Po=document.getelementbyid ("Post");
Po.style.display= "None";
var img=document.createelement ("img");
var titleh1=document.createelement ("H1");
var titmu=document.createelement ("span");
var Qy=document.getelementbyid ("QQ");
var Title=document.getelementbyid ("title"). Value;
var Mu=document.getelementbyid ("Muk"). Value;
var now = new Date ();
var year = Now.getfullyear (); Years
var month = Now.getmonth () + 1; Month
var day = Now.getdate (); Ri
var time=year+ "-" +month+ "-" +day;
Titleh1.innerhtml=title;
Titmu.innerhtml= "<br><br>" + "PLATE:" +mu+ "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Publish time:" +time ;
if (num==1) {
Img.setattribute ("src", "images/tou01.jpg");
}else if (num==2) {
Img.setattribute ("src", "images/tou02.jpg");
}else if (num==3) {
Img.setattribute ("src", "images/tou03.jpg");
}else if (num==4) {
Img.setattribute ("src", "images/tou04.jpg");
}

var Aa=document.getelementbyid ("ull");
Add Li
var li = document.createelement ("Li");
Set the Li property
Li.setattribute ("id", "Newli");
Li.appendchild (IMG);
Li.appendchild (titleH1);
Li.appendchild (TITMU);
Aa.appendchild (LI);
Li.insertbefore (Qy,li);

}

4. Make an ad with a close button

<script src= "Js/jquery-1.8.3.min.js" ></script>
	<script type= "text/javascript" >
	function Adv_close () {
	var Fl=document.getelementbyid ("float");
	var Fl1=document.getelementbyid ("Close");
	Fl.style.display= "None";
	Fl1.style.display= "None";
	};
	JS too troublesome ....
	or the JQ simple
	$ (function ($) {
	Scroll with scroll bar
	$ (window). Scroll (function () {
	var st = $ (this). ScrollTop () +50;
	$ ("#float"). CSS ("Top", st);
	$ ("#close"). CSS ("Top", st);
	});
	});
	</script>

Four. Summary section

1. The standard way to find nodes in the HTML DOM is the GetElement series method, or you can use parentnode,firstchild,nextsibling, etc...

2. The standard way to access and set node property values in the core DOM is GetAttribute () and setattribute ()

3. Two ways to change styles style property and classname property

Welcome to ask questions, welcome to the wrong, welcome to discuss the learning information in need of private chat post comments can be answered

The original in the blog Park http://www.cnblogs.com/a782126844/have the need to contact buckle: 2265682997

accp8.0 Conversion Textbook 7th Chapter JavaScript Operation DOM Object understanding and practice