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')" />