shangrila-xiu

112
文章
101
分类
33
标签

js_结点实例

javascript结点

1、appendChild添加结点

1
2
3
4
5
6
7
8
9
10
11
<meta charset=utf-8>
<img src="images/meinv1.jpg" id="photo1"><p>
<input type="button" value="创建新图片" onclick="mychange()"><p>
<script>
function mychange(){
	var o=document.createElement("img");//创建指定类型的对像
	o.src="images/meinv2.jpg";//指定对象的各个属性
	document.body.appendChild(o);//将对象添加到当前组件的后面
}
</script>

2、将对象添加到当前组件的后面

1
2
3
4
5
6
7
8
9
10
11
12
<meta charset=utf-8>
<img src="images/meinv1.jpg" id="photo1"><p>
<input type="button" value="创建新图片" onclick="myinsert()"><p>
<script>
function myinsert(){
	var old=document.getElementById("photo1");
	var o=document.createElement("img");//创建指定类型的对像
	o.src="images/meinv2.jpg";//指定对象的各个属性
	document.body.insertBefore(o,old);//将对象添加到当前组件的后面
}
</script>

3、parentNode_nodeValue，获取结点的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<meta charset="utf-8">
<table border=1 id="my" align=center width=300 height=200>
	<tr>
		<th>编号</th>
		<th>姓名</th>
		<th>性别</th>
	</tr>
	<tr>
		<td>1</td>
		<td><span id="name">张三</span></td>
		<td>男</td>
	</tr>
</table>
<hr>
<input type="button" value="取值" onclick="show()">
<script>
function show(){
	var o=document.getElementById("my");
	var name=document.getElementById("name");
	alert(name.innerHTML);
}
</script>

4、商品价格的介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<meta charset=utf-8>
<table border=1 align=center width=80% id="mytable">
	<tr>
		<th>商品名称</th>
		<th>数量（件）</th>
		<th>单价（元）</th>
		<th>运费（元）</th>
		<th>合计</th>
	</tr>
	<tr>
		<td>苹果</td>
		<td>2</td>
		<td>100</td>
		<td>15</td>
		<td></td>
	<tr>
</table><br>
<input type="button" value=添加一行 onclick="myadd()"><br>
商品名称：<input type=text id="name"><br>
商品数量：<input type=text id="num"><br>
商品单价：<input type=text id="price"><br>
商品运费：<input type=text id="money"><br>
<script>
	function myadd(){
		var name=document.getElementById("name").value;
		var num=parseInt(document.getElementById("num").value);
		var price=parseInt(document.getElementById("price").value);
		var money=parseInt(document.getElementById("money").value);
		 var newtr=document.createElement("tr");//创建一个行对象
		
		 newtr.innerHTML="<td>"+name+"</td><td>"+num+"</td><td>"+price+"</td><td>"+money+"</td><td>"+(num*price+money)+"</td>";
		/* newtr.innerHTML="<td>"+price+"</td>";
		 newtr.innerHTML="<td>"+money+"</td>";
		 newtr.innerHTML="<td>"+result+"</td>";
		newtr.innerHTML="<td>"+name+"</td>";*/
		var mytable=document.getElementById("mytable");
		mytable.appendChild(newtr);
		
		document.getElementById("name").value="";//添加之后使每个输入框都被清空
		document.getElementById("num").value="";
		document.getElementById("price").value="";
		document.getElementById("money").value="";
	}
</script>

5、删除结点

1
2
3
4
5
6
7
8
9
10
11
<meta charset=utf-8>
<img src="images/meinv1.jpg" id="photo1"><p>
<input type="button" value="删除photo1" onclick="myremove()"><p>
<script>
function myremove(){
	var old=document.getElementById("photo1");
	document.body.removeChild(old);//将对象添加到当前组件的后面
}
</script>

6、切换节点1

1
2
3
4
5
6
7
8
9
10
11
12
13
<meta charset=utf-8>
<img src="images/png-0530.png" id="photo1"><p>
<input type="button" value="切换photo1" onclick="myreplace()"><p>
<script>
function myreplace(){
	var old=document.getElementById("photo1");
	var o=document.createElement("img");//创建一个img对象
	o.src="images/png-0015.png";
	document.body.replaceChild(o,old);//将对象添加到当前组件的后面
	
}
</script>

7、切换图片2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<meta charset=utf-8>
  <img src="images/png-0530.png" id="img"><p>
<input type="button" id="btn" value="切换图片" onclick="myreplace()"><p>
<script>
var onOff=true;
function myreplace(){
	var btn=document.getElementById("btn");
	var oImg=document.getElementById("img");
	if(onOff){
		oImg.src="images/png-0530.png";
		onOff=false;
	}else{
		oImg.src="images/png-0015.png";
		onOff=true;
	}	
}
</script>