DOM?
DOM全称为Document Object Model , 即JS当中的宿主对象 .
一个网页就是一个文档对象 , 一个每个标签都可以看作一个对象
结点 : 构成网页的最基本部分, 网页的每部分都是一个结点
文档结点: 整个网页,document对象
元素结点: HTML标签
属性结点: 元素的属性
文本结点: 标签中的文本内容 <~>文本节点</~>
提示：以下是本篇文章正文内容，下面案例可供参考
一、事件
JS与HTML通过事件实现交互
1.事件的行内写法
<button id="btn" value="按钮" onclick="alert('hello')">
这是一个按钮
</button>
缺点 : 不利于维护
2.事件绑定处理函数的写法
<body>
<button id="btn" value="按钮">这是一个按钮</button>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
alert('dian');
};
</script>
</body>
维护更加方便
二、文档的加载
1.文档加载的顺序
在HTML文件中,通常都是从上往下逐行加载的,也就是说会先加载head标签中的内容,再加载body中的内容
代码如下（示例）：
var btn = document.getElementById("btn");
btn.onclick = function(){
alert('dian');
};
<button id="btn" value="按钮">这是一个按钮</button>
这种写法会报空指针异常,因为btn还没加载出来
2.onload事件改变加载顺序
onload事件会在整个页面加载完以后再触发 , 但是会影响性能
注意需要将onload事件绑定给window对象
代码如下（示例）：
window.onload = function() {
//获取id为btn的按钮
var btn = document.getElementById("btn");
//为按钮绑定一个单击响应函数
btn.onclick = function() {
alert("hello");
};
};
<button id="btn" value="按钮">这是一个按钮</button>
这样写就不能有空指针异常了
三、DOM查询
1.document对象的几个查询方法 :
1.document.getElementById(); 根据id获取元素对象
2.document.getElementsByTagName(); 根据标签名获取一组元素对象
3.document.getElementsByName(); 根据input框的name属性获取元素对象[radio]
4.document.querySelector(".info"); 根据标签属性查询,返回一个值
5.document.querySelectorAll(".info"); 根据标签属性查询,返回一个数组
2.查询实验 :
window.onload = function(){
var btn01 = document.getElementById("bj");
var btn02 = document.getElementsByName("gender");
var btn03 = document.getElementsByTagName("li");
alert(btn01.innerHTML); //提示出 "北京"
for(var i = 0 ; i <btn02.length ; i++){
alert(btn02[i].className);
alert(btn02[i].name);
}
for(var j = 0; j < btn03.length ; j++){
alert(btn03[i].innerHTML);
}
};
注 : document.getElementsByName(param); 方法,如果要获取class,需要使用className取值 , 其它的属性与html标签中的属性名保持一致
querySelector()与querySelectorAll()实验 :
<script type="text/javascript">
window.onload = function(){
var div = document.querySelector(".info");
console.log(div.innerHTML);
var divList = document.querySelectorAll(".info");
for(var i = 0 ; i < divList.length ; i++){
console.log(divList[i].innerHTML );
}
};
</script>
HTML👇
<body>
<div class="info">1</div>
<div class="info">2</div>
<div class="info">3</div>
</body>
结果 :
轮播图实验
先给代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css/style.css" type="text/CSS" rel="stylesheet" />
<script type="text/javascript" src="js/photolist.js"></script>
</head>
<body>
<div id="outer">
<span id="info"></span>
<img src="img/1.jpg" />
<button id="pre" value="上一页"></button>
<button id="next" value="下一页"></button>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
#outer {
width: 500px;
margin: 50px auto;
padding: 10px;
background-color: greenyellow;
/*设置文本居中*/
text-align: center;
}
button{
height: 30px;
width: 60px;
}
/**
* 思路 :
* 1.获取页面各元素
* 2.写切换算法
* */
window.onload = function(){
var pre = document.getElementById("pre");
var next = document.getElementById("next");
var img = document.getElementsByTagName("img")[0];
var info = document.getElementById("info");
var index = 0; //索引
var imgArrs = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
info.innerHTML = "一共"+imgArrs.length+"张,当前为"+(index+1)+"zhang"; //提示文本
//轮播算法
pre.onclick = function(){
index--;
//判断
if(index < 0){
index = 0;
}
img.src = imgArrs[index];
info.innerHTML = "一共"+imgArrs.length+"张,当前为"+(index+1)+"张";
};
next.onclick = function(){
index++;
if(index > imgArrs.length-1){
index = imgArrs.length-1;
}
img.src = imgArrs[index];
info.innerHTML = "一共"+imgArrs.length+"张,当前为"+(index+1)+"zjhang";
};
};
全选练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var checkedAllBox = document.getElementById("checkedAllBox"); //获取全选按钮
var checkedNoBtn = document.getElementById("checkedNoBtn");
var checkedRevBtn = document.getElementById("checkedRevBtn");
var checkedAllBox = document.getElementById("checkedAllBox");
var sendBtn = document.getElementById("sendBtn");
var items = document.getElementsByName("items");
//全选
checkedAllBtn.onclick = function(){
for(var i = 0 ; i<items.length ; i++){
items[i].checked = true;
}
checkedAllBox.checked = true;
};
//全不选
checkedNoBtn.onclick = function(){
for(var i = 0 ; i<items.length ; i++){
items[i].checked = false;
}
checkedAllBox.checked = false;
};
//反选
checkedRevBtn.onclick = function(){
for(var i = 0 ; i<items.length ; i++){
items[i].checked = !items[i].checked;
}
};
//提交
sendBtn.onclick = function(){
for(var i = 0 ; i<items.length ; i++){
if(items[i].checked){
alert(items[i].value);
}
}
};
//全选/全不选
checkedAllBox.onclick = function(){
for(var i = 0 ; i<items.length ; i++){
items[i].checked = this.checked;
}
};
//四个都选中了,checkedAllBox也应该选中
//四个都没选中,checkedAllBox也不能选中
for(var i = 0 ; i<items.length ; i++){
//为4个单选框都绑定响应函数 , 点击一个就全选
items[i].onclick = function(){
for(var j = 0 ; j<items.length ; j++){
if(items[j].checked == false){
//存在一个未被选中的
checkedAllBox.checked = false;
break;
}
}
};
}
};
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全 选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反 选" />
<input type="button" id="sendBtn" value="提 交" />
</form>
</body>
</html>
注意:for循环会在响应函数加载之前先被加载
添加删除员工练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="ex_2_style/css.css" type="text/CSS" rel="stylesheet" />
<script type="text/javascript">
function delTag() {
var tr = this.parentNode.parentNode;
var name = tr.children[0].innerHTML; //获取员工名字
var flag = confirm("是否真的删除" + name + "嘛");
if (flag) {
tr.parentNode.removeChild(tr);
}
};
window.onload = function() {
//获取所有超链接
var aList = document.getElementsByTagName("a");
//先获取提交按钮
var addEmpButton = document.getElementById("addEmpButton");
/**
* 删除
* */
for (var i = 0; i < aList.length; i++) {
//绑定单击响应函数
aList[i].onclick = function() {
delTag();
};
}
/**
* 添加,向表格加入tr
* */
addEmpButton.onclick = function() {
//获取输入框各个元素
var name = document.getElementById("empName").value;
var email = document.getElementById("email").value;
var salary = document.getElementById("salary").value;
//创建各个元素
var tr = document.createElement("tr");
var nameTd = document.createElement("td"); //文本框的td
var emailTd = document.createElement("td");
var salaryTd = document.createElement("td");
var aTd = document.createElement("td"); // a 标签的td
var a = document.createElement("a"); //创建一个a标签元素
//创建文本节点
var myName = document.createTextNode(name);
var myEmail = document.createTextNode(email);
var mySalary = document.createTextNode(salary);
var myA = document.createTextNode("Delete");
//将文本节点加入td
nameTd.appendChild(myName);
emailTd.appendChild(myEmail);
salaryTd.appendChild(mySalary);
a.appendChild(myA); //将文本节点加入a元素
aTd.appendChild(a); //将a元素加入td列
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(salaryTd);
tr.appendChild(aTd); //将aTD加入tr
//重新赋值点击函数
a.href = "javascript:;";
a.onclick = delTag;
var employeeTable = document.getElementById("employeeTable");
var tbody = employeeTable.getElementsByTagName("tbody")[0];
employeeTable.appendChild(tr);
};
};
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="javascript:;">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="javascript:;">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="javascript:;">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
