JavaScript操作函数

JavaScript操作函数

通过标签事件触发函数(js),在函数中又返回来对网页中的标签操作
在js中如何能够操作网页中的标签
在js语言中，认为每一个标签就是一个独一无二的对象，
在js语言中可以获得网页中的标签，这样就可以在js中对标签的属性，内容，样式及逆行操作
要操作哪个标签，首先要获得标签
document对象，是在网页加载完成后生成的一个文档对象
getElementById(“id”)；通过标签id属性值，获得标签

操作函数：

		   function oper(){
			   // 获取网页中的标签
			   var tobj1=document.getElementById("tid1");
			   var tobj2=document.getElementById("tid2");
		   
				// 对标签属性进行操作
				tobj2.value=tobj1.value;
				tobj1.value="";
				
				tobj1.type="button";
				tobj1.value="按钮";
		   }

内容：

		<input type="text" value="" id="tid1" />
		<input type="text" value="" id="tid2" />
		<input type="button" value="操作" onclick="oper()" />

操作函数：

			function oper(){
				var divobj1=document.getElementById("box1");
				var divobj2=document.getElementById("box2");
				
				
				alert(divobj2.innerText);	//只是获取到标签体中的文本内容
				alert(divobj1.innerHTML);	//可以获取标签体中所有的内容(包括子标签)
			}

内容：

		<div id="box1">
			<b>我是div</b>
		</div>
		
		<div id="box2">
			我是div2
		</div>
		<input type="button" value="操作" onclick="oper()" />

操作函数：

			function oper(color){
				var divobj1=document.getElementById("box1");
				divobj1.style.width="100px";
				divobj1.style.height="100px";
				divobj1.style.backgroundColor=color;
			}

内容：

		<div id="box1"></div>
		<input type="button" value="蓝色" onclick="oper('blue')" />
		<input type="button" value="红色" onclick="oper('red')" />
		<input type="button" value="绿色" onclick="oper('green')" />

一次控制多个标签：

操作函数：

			function oper(color){
				//	getElementsByTagName("标签名字") 通过标签名获取所有匹配的标签，返回的是一个标签集合对象
				// var divobjs = document.getElementsByTagName("div");
				// 通过class属性名获取所有匹配的标签，返回的是一个标签集合对象
				// var divobjs = document.getElementsByClassName("box");
				
				var divobjs=document.getElementsByName("div1");
				for (var i = 0; i < divobjs.length; i++) {
					divobjs[i].style.width="100px";
					divobjs[i].style.height="100px";
					divobjs[i].style.backgroundColor=color;
				}
			}

内容：

		<div class="box" name="div1">A</div>
		<div class="box" name="div1">B</div>
		<div class="box" >C</div>
		
		<input type="button" value="蓝色" onclick="oper('blue')" />
		<input type="button" value="绿色" onclick="oper('green')" />
		<input type="button" value="红色" onclick="oper('red')" />