DOM三大方法的区别
来源:互联网 发布:旧电脑安装linux 编辑:程序博客网 时间:2024/06/06 02:09
getElementById(身份证号码),getElementsByName(名字相同的人集合),getElementsByTagName(相同类的人集合
)区别:
把上面的例子转换到HTML中,如下:
<input type="checkbox" name="hobby" id="hobby1"> 音乐
input标签就像人的类别。
name属性就像人的姓名。
id属性就像人的身份证。
例子:<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<form>
请选择你爱好:<br>
<input type="checkbox" name="hobby" id="hobby1"> 音乐
<input type="checkbox" name="hobby" id="hobby2"> 登山
<input type="checkbox" name="hobby" id="hobby3"> 游泳
<input type="checkbox" name="hobby" id="hobby4"> 阅读
<input type="checkbox" name="hobby" id="hobby5"> 打球
<input type="checkbox" name="hobby" id="hobby6"> 跑步 <br>
<input type="button" value = "全选" onclick = "checkall()" >
<input type="button" value = "全不选" onclick = "clearall()" >
<p>请输入您要选择爱好的序号,序号为1-6:</p>
<input id="wb" name="wb" type="text" >
<input name="ok" type="button" value="确定" onclick = "checkone();">
</form>
<script type="text/javascript">
function checkall(){
var hobby = document.getElementsByTagName("input");
// 任务1 实现当点击"全选"按钮时,将选中所有的复选项。
for(var i=0;i<hobby.length;i++){
if(hobby[i].nodeName="checkbox"){
hobby[i].checked=true;
}
}
}
function clearall(){
var hobby = document.getElementsByName("hobby");
// 任务2 实现当点击"全不选"按钮时,将取消所有选中的复选项。
for(var j=0;j<hobby.length;j++){
hobby[j].checked=false;
}
}
function checkone(){
var j=document.getElementById("wb").value;
clearall();
// 任务3在文本框中输入输入1-6数值,当点击"确定"按钮时,根据输入的数值,通过id选中相应的复选项
var hobby=document.getElementsByName("hobby");
var n=parseInt(j);
if(j>6 || j<1){
alert("请输入1——6之间的序号!");
}
hobby[n-1].checked = true;
}
</script>
</body>
</html>
- DOM三大方法的区别
- DOM解析的三种方法
- 获取元素的三种DOM方法
- JS DOM 绑定的三种方法
- Dom和sax解析方法的区别
- Dom和sax解析方法的区别
- 世界三大哲学系的最主要区别
- 三大主流嵌入式操作系统的区别
- windwos 8三大版本的区别
- Android解析XML文件的三方法之DOM
- javascript三种获取dom对象的方法
- document获取DOM节点的三种方法详解
- Linux三大共享文件的方法
- 恢复数据的三大方法
- Linux三大共享文件的方法
- Linux三大共享文件的方法
- Linux三大共享文件的方法
- Linux安装Nodejs的三大方法
- oracle 函数
- ButterKnife java.lang.ClassCastException: android.view.View cannot be cast to android.app.Activity
- Genymotion模拟器安装Genymotion-ARM-Translation变copy
- 【项目1-顺序表的基本运算】
- 第3周项目4-顺序表应用问题(2)
- DOM三大方法的区别
- Fragment中onOptionsItemSelected方法不起作用的解决方法
- 第3周项目3-求集合并集
- ORACLE 12C新特性——CDB与PDB
- hdu3715 Go Deeper--二分 & 2-sat
- 自定义View签名画板并保存
- Android Studio 错误 com.android.dex.DexIndexOverflowException: method ID not in [0, 0xffff]: 65536
- maven的坐标,仓库介绍及配置
- RocketMq 搭建速记