案例4:全选或者全不选
步骤分析:
1.确定事件 最上面那个复选框的单击事件 onclick
2.编写函数:让所有的复选框和最上面的复选框状态保持一致
a.获取最上面这个复选框选中状态 通过checkbox的checked属性即可
b.获取其他的复选框,设置他们的checked属性即可
可以通过以下两种方案获取元素
document.getElementsByClassName():需要给下面所有的复选框添加class属性
document.getElementsByName():需要给下面所有的复选框添加name属性
//全选 方法名 不能使用 关键字 否则无效
function checkAll(obj) {
//获取所有的复选框
var arr = document.getElementsByName('pid');
//便利数组修改状态
for (var i = 0; i < arr.length; i++) {
arr[i].checked = obj.checked;
}
}
<script>
function sele(obj) {
//alert("选中了");
var arr=document.getElementsByName("all");
//alert(arr);
for (var i=0;i<arr.length;i++) {
//alert(i);
arr[i].checked=obj.checked;
}
}
</script>
<body>
<input type="checkbox" onclick="sele(this)" />全选 this当前元素
<input type="checkbox" name="all" />1
<input type="checkbox" name="all" />2
<input type="checkbox" name="all" />3
<input type="checkbox" name="all" />4
< input type="checkbox" name="all" />5
</body>
//////////////////////////////////
dom(文档对象模型)
当浏览器接受到html代码的时候,浏览器会将所有的代码装载到内存中,形成一棵树(document树)
节点(Node) ？分为四种 层次结构 统称为 Node
文档节点 document ？ 根节点 最顶部 整个html 是个文档节点
元素节点 element 标签
属性节点 attribute 元素里边有多个属性 href=
文本节点 text 标签体的内容 <a>点我</a
获取节点:
通过document可以获取其他节点:
常用方法:
document.getElementById("id值"):获取一个特定的元素
document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)
document.getElementsByClassName("class属性的值"):通过class属性获取一类元素(多个)
document.getElementsByName("name属性的值"):通过name属性获取一类元素(多个)
设置获取获取节点的value属性?先获取后再设置属性
元素.value;获取
元素.value="";设置
设置或者获取节点的标签体
元素.innerHTML;获取
元素.innerHTML="";设置
获取或者设置style属性
元素.style.属性;获取
元素.style.属性="";设置
获取或者设置属性
元素.属性
/////////////////////////
对于htmldom的操作若在js或者htmldom 查找不到 去查找xml dom ？ xmldom 中有详细的介绍
关于文档的操作 在 xml dom 的document中 ？
关于元素的操作 在 xml dom 的element中？
appendChild(dom对象):在一个元素下添加孩子？