一:DOM的概念:
DOM (Document Object Model) 译为文档对象模型,是 HTML 和 XML 文档的编程接口。也就是说把文档编译成了一个对象模型,例如我们写的html文件实际上是一个文档文件,通过我们的浏览器把它编译成了一个对象模型,这个模型就是document对象。
DOM 以树结构表达 HTML 文档。就好像是一个家族谱,有父级元素也有对应的子级元素,那么document对象就是我们最大的父级元素。
如下图所示,家族谱上面的每一个元素都是一个节点,通过对这些节点的操作,我们可以对这个页面为所欲为。
二:节点的分类
元素节点
属性节点 nodeName,nodeValue,nodeType
文本节点
三:DOM编程对象的属性方法:
四:DOM的基本节点操作:
完整操作方法如图所示:
五:案例演示
案例:全选与全不选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//封装ID
function $(id){
return document.getElementById(id);
}
//编写myAll点击事件函数
function myAll(){
//拿到全选框按钮的checked值即可
//拿到全选框
var alls =$('alls' );
// console.log(alls.checked);
//获取其他三个复选框
var cks = document.getElementsByName("cks");
//遍历结果集
for(var i = 0;i<cks.length;i++){
// cks[i] 每一个复选框对象
cks[i].checked = alls.checked;
}
}
//优化全选
//单独为每一个子复选框设置点击事件,当触发任意一个时,都要全盘判断是否没有选中
的,但凡有一个没有选中,全选就取消
window.onload = function(){
//获取所有name为cks的复选框
var cks = document.getElementsByName("cks");
//遍历
for(var i = 0;i<cks.length;i++){
//为每一个子复选框设置对应的点击事件
cks[i].onclick = function(){
//alert(this.value);
//判断当前的子复选框是否选中了并且一并判断后面的是否选中
var flag = true;//假设全部选中
for(var j = 0;j<cks.length;j++){
//判断只要有一个没有选中,全选就干掉。
if(cks[j].checked == false){
flag = false;
break;
}
}
$("alls").checked = flag;
};
}
};
</script>
</head>
<body>
<h3>全选案例</h3>
<table border="1" width="40%">
<tr>
<td>全选|全不选<input id="alls" onclick="myAll();" type="checkbox"></td>
<td>编号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr&