主要是使用document.getElementById（）方法、document.getElementsByTagName（）方法、onclick（）事件。
1.document.getElementById（）：它是一个document对象的方法，可以通过它来获得指定id的html元素。
例如：在页面里表单元素你可以给它设置id值，或name值来区别同种类型的不同元素，当你设置id为document.getElementById（“id”）来获取权限。才能进入下一步，document.getElementById（“id”）.value可以得到这个元素的值。还有跟这样的方法有很多document.getElementByName（“name”）通过元素名称才能获得对象，才能够让这句代码实现它最大的价值。（也是编写javascript不可缺少的一句代码）
<html>
<head>
<script type="text/javascript">
function getValue()
{
var x=document.getElementById("myHeader")
alert(x.innerHTML)
}
</script>
</head>
<body>
<h1 id="myHeader" onclick="getValue()">This is a header</h1>
<p>Click on the header to alert its value</p>
</body>
</html>
2.document.getElementsByTagName（）：返回带有指定标签名的对象的集合
提示： 参数值 "*" 返回文档的所有元素。
例子：<!DOCTYPE html><html><body>
<p id="demo">Click the button to change the text in this paragraph.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction(){document.getElementsByTagName("P")[0].innerHTML="Hello World";};
</script>
</body></html>
选项卡：在body内容区中输入不做任何操作就能显示在页面上的内容。<body> <div id="pc1"> <input type="checkbox"/>游泳 <input type="checkbox"/>跳水 <input type="checkbox"/>跳舞 <input type="checkbox"/>打球 </div>
//将所要进行改变的东西编写在一起，可以让我们更清晰、更方便
<input type="button" value="全选" onclick="a()"/> <input type="button" value="全不选" onclick="b()"/> <input type="button" value="反选" onclick="c()"/> <input type="button" value="全选/全不选" onclick="d()"/>//将要点击的东西进行控制，从而实现所要实现的效果 </body>
//进行编写javascript实现我们所要的动态效果<script> function a(){ var qq=document.getElementById("pc1").getElementsByTagName("input"); //获取所要改变的东西的权限，然后在选择要改变的东西的所有名称名 for(var i=0;i<qq.length;i++) { qq[i].checked=true; //checked表示已经被选中之后的，让他们每一个都为true，从而实现全选 } } function b(){ var qq=document.getElementById("pc1").getElementsByTagName("input");//获取所要改变的东西的权限，然后在选择要改变的东西的所有名称名 for(var i=0;i<qq.length;i++) { qq[i].checked=false; //当所有都是选中的情况下，每一个input都是为true的，但是当他为false的时候，能够实现全部去掉 } } function c(){ var qq=document.getElementById("pc1").getElementsByTagName("input"); for(var i=0;i<qq.length;i++) { if(qq[i].checked==true) //当为true的时候，点击会变成false { qq[i].checked=false; }else { qq[i].checked=true; //当为false的时候，点击会变成true } } } function d(){ var qq=document.getElementById("pc1").getElementsByTagName("input"); if(qq[0].checked==true) //首先判断一下是否为全选中状态 { for(var i=0;i<qq.length;i++) //如果是全选中，开始执行全部不选中状态 { qq[i].checked=false; } } else { for(var i=0;i<qq.length;i++) //否则开始执行全部选中状态 { qq[i].checked=true; } } } </script>
时间： 2024-10-03 22:40:15