这篇博客详细介绍了JavaScript中的DOM基本概念，包括DOM查询、元素操作、事件处理等。内容涵盖DOM简介、事件的绑定与传播、文档加载、DOM增删改节点、操作内联样式以及事件对象的相关知识点，并通过实例进行讲解。
文章目录
一、DOM简介
DOM，全称Document Object Model 文件对象模型
JS中通过DOM来对HTML文档进行操作
- 文档
表示的就是整个HTML网页文档 - 对象
表示将网页的每一个部分都转换为了一个对象 - 模型
使用模型来表示对象之间的关系，方便我们获取对象
节点：Node——构成HTML文档最基本的单元
常用节点分为四类
- 文档节点：整个HTML文档
- 元素节点：HTML文档中的HTML标签
- 属性节点：元素的属性
- 文本节点：HTML标签中的文本内容
节点的属性：
| nodeName | nodeType | nodeValue | |
|---|---|---|---|
| 文档节点 | #document | 9 | null |
| 元素节点 | 标签名 | 1 | null |
| 属性节点 | 属性名 | 2 | 属性值 |
| 文本节点 | #text | 3 | 文本内容 |
<body>
<button id="btn">我是一个按钮</button>
<script>
/*
* 浏览器已经为我们提供 文档节点 对象，这个对象是window属性
* 可以在页面中直接使用，文档节点代表的是整个网页
*/
console.log(document);
// 获取到button对象
var btn = document.getElementById("btn");
btn.innerHTML = "I'm button.";
</script>
</body>
二、事件的简介
事件，就是用户和浏览器之间的交互行为
比如：点击按钮、鼠标移动、关闭窗口……
我们可以在时间对应的属性中设置一些JS代码，这样当事件被触发时，这些代码将会执行
<button id="btn" onclick="alert('干什么！！')">我是一个按钮</button>
这种写法称为结构和行为耦合，不方便维护，不推荐使用
可以为按钮的对应事件绑定处理函数的形式来响应事件
这样当时间被触动时，其对应的函数将会被调用
<body>
<button id="btn">我是一个按钮</button>
<script>
var btn = document.getElementById("btn");
// 绑定一个单击事件
// 像这种为单击事件绑定的函数，我们称为单击响应函数
btn.onclick= function(){
alert("干嘛呀！！！");
}
</script>
</body>
三、文档的加载
浏览器在加载一个页面时，是按照自上向下的顺序加载的
读取到一行就运行一行，如果将JS标签写在页面的上边，在代码执行时，页面还没有加载，DOM对象也没有加载，会导致无法获取到DOM对象
所以将JS代码边界在页面下不就是为了，在页面加载完毕后再执行JS代码
如果想把JS代码写在head标签中
可以为window绑定一个onload事件
onload事件会在整个页面加载完成后才触发，这样可以确保我们的JS代码执行时所有的DOM对象已经加载完毕了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick= function(){
alert("干嘛呀！！！");
};
};
</script>
</head>
<body>
<button id="btn">我是一个按钮</button>
</body>
</html>
四、DOM查询
1.获取元素节点：通过document对象调用
- getElementById()
通过id属性获取一个元素节点对象 - getElementsByTagName()
通过标签名获取一组元素节点对象 - getElementsByName()
通过name属性获取一组元素节点对象
<script type="text/javascript">
window.onload = function(){
/*
* 查找#bj节点
* 为id为btn01的按钮绑定一个单击响应函数
*/
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
var bj = document.getElementById("bj");
alert(bj.innerHTML);
}
/*
* 查找所有li节点
* 为id为btn02的按钮绑定一个单击响应函数
*/
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
// getElementsTagName()可以根据标签名来获取一组元素节点对象
// 这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
var lis = document.getElementsByTagName("li");
// alert(lis.length);
for(var i=0;i<lis.length;i++){
alert(lis[i].innerHTML);
}
}
/*
* 查找name=gender的所有节点
* 为id为btn03的按钮绑定一个单击响应函数
*/
var btn03 = document.getElementById("btn03");
btn03.onclick = function(){
var inputs = document.getElementsByName("gender");
alert(inputs.length);
/*
* innerHTML用于获取元素内部的HTML代码
* input属于自结束标签，内部没有代码
* 如果想要读取元素节点属性，直接使用：元素.属性名
* 例子：元素.id、元素.name、元素.value......
* 读取class属性时需要使用 ：元素.className
*/
for(var i=0;i<inputs.length;i++){
alert(inputs[i].value);
}
}
}
</script>
练习——轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#outer{
width: 200px;
margin: 50px auto;
padding: 10px;
background-color: cornflowerblue;
text-align: center;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 点击按钮切换图片
*/
// 获取两个按钮
var prev = document.getElementById("prev");
// 获取img标签(这个方法获取到的是数组)
var img = document.getElementsByTagName("img")[0];
// 创建一个数组用来保存图片的路径
var imgArr = ["./img/1.jpg","./img/2.jpg","./img/3.jpg","./img/4.jpg","./img/5.jpg"];
// 创建一个变量，用来保存当前正在现实的图片的索引
var index = 0;
// 设置提示文字,获取id为info的p元素
var info = document.getElementById("info");
info.innerHTML = "一共"+imgArr.length+"张图片,当前第"+(index+1)+"张";
prev.onclick = function(){
// 要切换图片就是要修改img标签的src属性
index--;
if(index<0){
index = imgArr.length - 1;
}
img.src = imgArr[index];
info.innerHTML = "一共"+imgArr.length+"张图片,当前第"+(index+1)+"张";
};
var next = document.getElementById("next");
next.onclick = function(){
index++;
if(index>imgArr.length - 1){
index = 0;
}
img.src = imgArr[index];
info.innerHTML = "一共"+imgArr.length+"张图片,当前第"+(index+1)+"张";
};
};
</script>
</head>
<body>
<div id="outer">
<p id="info"></p>
<img src="./img/1.jpg" alt="女侠">
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
2.获取元素节点的子节点：通过具体的元素节点调用
- getElementsByTagName()
方法，返回当前节点的指定标签名后代节点 - childNodes
属性，表示当前节点的所有子节点 - firstChild
属性，表示当前节点的第一个子节点 - lastChild
属性，表示当前节点的最后一个子节点
<script type="text/javascript">
window.onload = function(){
/*
* 查找#city下的所有li节点
* 为id为btn04的按钮绑定一个单击响应函数
*/
var btn04 = document.getElementById("btn04");
btn04.onclick = function(){
var city = document.getElementById("city");
var lis = city.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
alert(lis[i].innerHTML);
}
};
/*
* 返回#city下的所有子节点
* 为id为btn05的按钮绑定一个单击响应函数
*/
var btn05 = document.getElementById("btn05");
btn05.onclick = function(){
var city = document.getElementById("city");
// childNodes 属性会获取包括文本节点在内的所有节点
// 根据DOM标签标准标签间的空白也会当成文本节点
// 注：在IE8及以下的浏览器中，不会将空白文本当作子节点
var cns = city.childNodes;
for(var i=0;i<cns.length;i++){
alert(cns[i].innerHTML);
}
// children 属性可以获取当前元素的所有子元素
var cns2 = city.children;
for(var i=0;i<cns2.length;i++){
alert(cns2[i].innerHTML);
}
};
/*
* 返回#phone的第一个子节点
* 为id为btn06的按钮绑定一个单击响应函数
*/
var btn06 = document.getElementById("btn06");
btn06.onclick = function(){
var phone = document.getElementById("phone");
// firstChild 可以获取到当前元素的第一个子节点（包括空白文本节点）
var pho = phone.firstChild;
alert(pho.innerHTML);
// firstElementChild 可以获取当前元素的第一个子元素（但兼容性不好）
var pho = phone.firstElementChild;
alert(pho.innerHTML);
};
}
</script>
3.获取父节点和兄弟节点：通过具体的节点调用
- parentNode
属性，表示当前节点的父节点 - previousSibling
属性，表示当前节点的前一个兄弟元素 - nextSibling
属性，表示当前节点的后一个兄弟元素
<script type="text/javascript">
window.onload = function(){
/*
* 返回#bj的父节点
* 为id为btn07的按钮绑定一个单击响应函数
*/
myClick("btn07",function(){
var bj = document.getElementById("bj");
var pn = bj.parentNode;
alert(pn.innerHTML);
// innerText 该属性可以获取到元素内部的文本内容
// 它会innerHTML类似，不同的是它会自动将html去除
var pn = bj.parentNode;
alert(pn.innerText);
});
/*
* 返回#android的前一个兄弟节点
* 为id为btn08的按钮绑定一个单击响应函数
*/
myClick("btn08",function(){
var and = document.getElementById("android");
// previousSibling 也可能获取到空白的文本
var ps = and.previousSibling;
alert(ps.innerHTML);
// previousElementSibling 获取前一个兄弟元素，IE8记一下不支持
var ps = and.previousElementSibling;
alert(ps.innerHTML);
});
}
</script>
<script type="text/javascript">
/*
* 定义一个函数，专门用来为指定元素绑定单击响应函数
* 参数：
* idStr 要绑定单击响应函数的对象的id属性值
* fun 事件的回调函数，当单击元素时，该函数将会被触发
*/
function myClick(idStr ,fun){
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
window.onload = function(){
/*
* 返回#username的value属性值
* 为id为btn09的按钮绑定一个单击响应函数
*/
myClick("btn09",function(){
var um = document.getElementById("username");
// 文本框的value属性值，就是文本框中的内容
alert(um.value);
});
/*
* 设置#username的value属性值
* 为id为btn10的按钮绑定一个单击响应函数
*/
myClick("btn10",function(){
var um = document.getElementById("username");
// 文本框的value属性值，就是文本框中的内容
um.value = "快要结束啦";
});
/*
* 返回#bj的文本值
* 为id为btn11的按钮绑定一个单击响应函数
*/
myClick("btn11",function(){
var bj = document.getElementById("bj");
alert(bj.innerHTML);
alert(bj.innerText);
// 获取bj中的文本节点
var fa = bj.firstChild;
alert(fa.nodeValue);
alert(bj.firstChild.nodeValue);
});
}
</script>
全选练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全选练习</title>
<script type="text/javascript">
window.onload = function(){
var checkedAllBox = document.getElementById("checkedAllBox");
var items = document.getElementsByName("items");
// 1.#checkedAllBtn
// 为id为checkedAllBtn的按钮绑定一个单击响应函数
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function(){
// 设置四个多选框全部被选中
var items = document.getElementsByName("items");
for(var i=0;i<items.length;i++){
// 通过checked 属性可以来获取或者设置多选框的选中状态
items[i].checked = true;
}
checkedAllBox.checked = true;
};
// 2.#checkedNoBtn
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function(){
var items = document.getElementsByName("items");
for(var i=0;i<items.length;i++){
items[i].checked = false;
}
checkedAllBox.checked = false;
};
// 3.#checkedRevBtn
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function(){
var items = document.getElementsByName("items");
checkedAllBox.checked =true;
for(var i=0;i<items.length;i++){
// if(items[i].checked == false){
// items[i].checked = true;
// }else{
// items[i].checked = false;
// }
items[i].checked = !items[i].checked;
if(!items[i].checked){
checkedAllBox.checked = false;
}
}
};
// 4.#sendBtn
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function(){
var items = document.getElementsByName("items");
for(var i=0;i<items.length;i++){
if(items[i].checked){
alert(items[i].value);
}
}
};
// 5.#checkedAllBox
// 在事件的响应函数中，响应函数是给谁绑定的this就是谁
checkedAllBox.onclick = function(){
var items = document.getElementsByName("items");
for(var i=0;i<items.length;i++){
// items[i].checked = checkedAllBox.checked;
items[i].checked = this.checked;
}
};
// 6.items
/*
* 如果四个多选框全都选中，则checkedAllBox也应该选中
* 如果四个多选框没有都选中，则checkedAllBox不应该选中
*/
// 为四个多选框分别绑定单击响应
for(var i=0;i<items.length;i++){
items[i].onclick = function(){
checkedAllBox.checked =true;
for(var j=0;j<items.length;j++){
if(!items[j].checked){
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>
4.DOM查询的剩余方法
<script>
window.onload = function(){
/*
* 在document中有一个属性body，他保存的是body的引用
*/
var body = document.body;
/*
* document.documentElement保存的是html跟标签
*/
var html = document.documentElement;
/*
* document.all代表页面中所有的元素
* 这个两行代码一样
*/
var all = document.all;
all = document.getElementsByTagName("*");
/*
* 根据元素的class属性值，查询一组元素节点对象
* getElementsByClassName() 可以根据class属性值获取一组元素节点对象
* 但该方法不支持IE8及一下浏览器，可以用querySelector() 代替
*/
var box1 = document.getElementsByClassName("box1");
};
</script>
document.querySelector()
需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
使用该方法总会返回唯一的元素，如果满足条件的元素有多个，只会返回第一个
var div = document.querySelector(".box div");
console.log(div.innerHTML);
document.querySelectorAll()
该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
五、DOM增删改
- document.createElement()
可以用与创建一个元素节点对象，
它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
并将建好的对象作为返回值返回 - document.createTextNode()
可以用来创建一个文本节点对象
需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回 - appendChild()
向一个父节点中添加一个新的子节点
用法：父节点.appendChild(子节点); - insertBefore()
可以在指定的子节点前插入新的子节点
语法：父节点.insertBefore(新节点，旧节点); - replaceChild()
可以使指定的子节点替换已有的子节点
语法：父节点.replaceChild(新节点，旧节点); - removeChild()
可以删除子节点
语法：父节点.removeChild(子节点); = = 子节点.parentNode.removeChild(子节点);
city.removeChild(bj)；== bj.parentNode.removeChild(bj);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/reset.css">
<script type="text/javascript">
window.onload = function(){
function myClick(idStr, fun){
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
// 1.创建一个"广州"节点，添加到#city下
myClick("btn01",function(){
// 创建广州节点——创建li元素节点、创建广州文本节点
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
// 将gzText设置为li的子节点
li.appendChild(gzText);
// 将广州添加到city下
var city = document.getElementById("city");
city.appendChild(li);
});
// 2.将"广州"节点插入到#bj前面
myClick("btn02",function(){
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
var bj = document.getElementById("bj");
var city = document.getElementById("city");
city.insertBefore(li,bj);
});
// 3.使用"广州"节点代替#bj节点
myClick("btn03",function(){
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
var bj = document.getElementById("bj");
var city = document.getElementById("city");
city.replaceChild(li,bj);
});
// 4.删除#bj节点
myClick("btn04",function(){
var bj = document.getElementById("bj");
// var city = document.getElementById("city");
// city.removeChild(bj);
bj.parentNode.removeChild(bj);
});
// 5.读取#city内的HTML代码
myClick("btn05",function(){
var city = document.getElementById("city");
alert(city.innerHTML);
});
// 6.设置#bj内的HTML代码
myClick("btn06",function(){
var bj = document.getElementById("bj");
bj.innerHTML = "昌平"
});
// 7.向#city中添加"广州"节点
myClick("btn07",function(){
var city = document.getElementById("city");
/*
* 使用innerHTML也可以完成DOM的增删改的相关操作
* 一般我们会两种方式相结合使用
*/
// city.innerHTML += "<li>天津</li>"
var li = document.createElement("li");
li.innerHTML = "天津";
city.appendChild(li);
});
};
</script>
</head>
<body>
<div class="total">
<div class="inner h">
<p>你喜欢哪个城市？</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
</div>
</div>
<div class="btnList">
<div><button id="btn01">创建一个"广州"节点，添加到#city下</button></div>
<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
<div><button id="btn03">使用"广州"节点代替#bj节点</button></div>
<div><button id="btn04">删除#bj节点</button></div>
<div><button id="btn05">读取#city内的HTML代码</button></div>
<div><button id="btn06">设置#bj内的HTML代码</button></div>
<div><button id="btn07">向#city中添加"天津"节点</button></div>
</div>
</body>
</html>
增删记录练习
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加删除记录练习</title>
<link rel="stylesheet" type="text/css" href="./css/css.css" />
<script type="text/javascript">
window.onload = function(){
/*
* for循环会在页面加载完成后立即执行
* 而响应函数会在超链接被点击时才执行
* 当响应函数执行时，for循环早已执行完毕
*/
function delA(){
var tr = this.parentNode.parentNode;
// 删除之前弹出的一个提示框
/*
* confirm() 用于弹出一个带有确认和取消按钮的提示框
* 需要一个字符串作为参数，该字符串会作为提示文字显示出来
* 如果用户点击确认则返回true，如果点击取消则返回false
*/
var flag = confirm("你确认删除"+tr.children[0].innerHTML);
if(flag){
tr.parentNode.removeChild(tr);
}
return false;
}
var allA = document.getElementsByTagName("a");
// 为每个超链接都绑定一个单击响应函数
for(var i=0;i<allA.length;i++){
allA[i].onclick = delA;
// 点击超链接后需要删除超链接所在行
// 这里我们点击哪个超链接this就是谁
// 获取当前tr
}
//为提交按钮绑定一个单击响应函数
var addEmpButton = document.getElementById("addEmpButton");
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");
tr.innerHTML = "<td>"+name+"</td>"+
"<td>"+email+"</td>"+
"<td>"+salary+"</td>"+
"<td><a href='javascript:;'>Delete</a></td>";
var a = tr.getElementsByTagName("a")[0];
a.onclick = delA;
var employeeTable = document.getElementById("employeeTable");
var tbody = employeeTable.getElementsByTagName("tbody")[0];
tbody.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>
六、操作内联样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<script>
window.onload = function(){
var box1 = document.getElementById("box1");
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
/*
* 通过JS修改元素的样式：
* 语法：元素.style.样式名 = 样式值;
*
* 注意：如果CSS的样式名中含有-，这种名称在JS中是不合法的
* 需要将这种样式名修改为驼峰命名法
* 去掉 - ，然后将-后的字母大写
*
* 我们通过style属性设置的样式都是内联样式，
* 而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
*
* 但是如果在样式中写了!important，则此样式会有最高的优先级
* 即使JS也不能覆盖该样式，所以尽量不要为样式添加!important
*/
box1.style.width = "300px";
box1.style.height = "300px";
box1.style.backgroundColor = "yellow";
};
// 点击第二个按钮后，读取元素样式
var btn2 = document.getElementById("btn2");
btn2.onclick = function(){
// 读取box1样式
/*
* 语法：元素.style.样式名
*
* 通过style属性设置和读取的都是内联样式
* 无法读取样式表中的样式
*/
alert(box1.style.width);
};
};
</script>
</head>
<body>
<button id="btn1">第一个按钮</button>
<button id="btn2">第二个按钮</button>
<div id="box1"></dic>
</body>
</html>
获取元素的当前显示的样式
语法：元素.currentStyle.样式名
它可以用来读取当前元素正在显示的样式
如果当前元素没有设置样式，则获取它的默认值
currentStyle 只有IE浏览器支持，其他的浏览器都不支持
在其他浏览器中可以使用：
getComputedStyle()这个方法来获取元素当前的样式
这个方法是window的方法，可以直接使用
需要两个参数：
- 第一个：要获取样式的元素
- 第二个：可以传递一个伪元素，一般都传null
该方法会返回一个对象，对象中封装了当前元素对应的样式
如果获取的样式没有设置，则会获取到真实的值，而不是默认值
比如：没有设置width，它不会获取到auto，而是一个长度
var obj = getComputedStyle(box1,null);
alert(obj.width);
通过currentStyle和getComputedStyle()读取到的样式都是只读的，不能修改，如果需要修改必须通过styel属性
如果想要兼容所有浏览器：
定义一个函数，用来获取指定元素的当前的样式
参数：
- obj 要获取样式的元素
- name 要获取的样式名
function getStyle(obj,name){
if(window.getComputedStyle){
return getComputedStyle)(obj,null)[name];
}else{
return obj.currentStyle[name];
}
}
七、其他样式相关的属性
<script>
window.onload = function(){
var box1 = document.getElementById("box1");
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
/*
* clientWidth
* clientHeight
* - 这两个属性可以获取元素的可见高度和宽度
* - 这两个属性都是不带px的，返回的都是一个数子，可以直接进行计算
* - 会获取元素的宽度和高度，包括内容区和内边距
* - 这些属性都是只读的，不能修改
*/
alert(box1.clientWidth);
/*
* offsetWidth
* offsetHeight
* - 获取元素的整个的宽度和高度，包括内容区、内边距和边框
*/
alert(box1.offsetWidth);
/*
* offsetParent
* - 可以用来获取当前元素的定位父元素
* - 会获取到离当前元素最近的开启了定位的祖先元素
* - 如果所有的祖先元素都没有开启定位，则会返回body
*/
var op = box1.offsetParent;
alert(op);
/*
* offsetLeft
* - 当前元素相对于其定位父元素的水平偏移量
* offsetTop
* - 当前元素相对于其定位父元素的垂直偏移量
*/
alert(box1.offsetLeft);
/*
* scrollWidth
* scrollHeight
* - 可以获取元素整个滚动区域的宽度和高度
*/
alert(box1.scrollHeight);
/*
* scrollLeft
* scrollTop
* - k可以获取水平和垂直滚动条滚动的距离
*/
alert(box1.scrollLeft);
// 当满足 scrollHeight - scrollTop == clientHeight
// 说明滚动到底了
};
};
</script>
练习——注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#info{
width: 400px;
height: 400px;
background-color: #bfa;
overflow: auto;
}
</style>
<script>
window.onload = function(){
/*
* 当垂直滚动条滚动到底时，使表单项可用
* onscroll
* - 该事件会在元素的滚动条滚动时触发
*/
var info = document.getElementById("info");
var inputs = document.getElementsByTagName("inprut");
info.onscroll = function(){
// 检查垂直滚动条是否滚动到底
if(info.scrollHeight-info.scrollTop <= info.clientHeight){
// 是表单项可用
inputs[0].disabled=false;
inputs[1].disabled=false;
}
};
};
</script>
</head>
<body>
<h3>欢迎注册</h3>
<p id="info">
请仔细阅读，才能注册！！！！！！！！！！！！！请仔细阅读，才能注册！！！！！！！！！！！！！请仔细阅读，才能注册！！！！！！！！！！！！！请仔细阅读，才能注册！！！！！！！！！！！！！请仔细阅读，才能注册！！！！！！！！！！！！！请仔细阅读，才能注册！！！！！！！！！！！！！请仔细阅读，才能注册！！！！！！！！！！！！！请仔细阅读，才能注册！！！！！！！！！！！！！请仔细阅读，才能注册！！！！！！！！！！！！！请仔细阅读，才能注册！！！！！！！！！！！！！请仔细阅读，才能注册！！！！！！！！！！！！！请仔细阅读，才能注册！！！！！！！！！！！！！请仔细阅读，才能注册！！！！！！！！！！！！！请仔细阅读，才能注册！！！！！！！！！！！！！请仔细阅读，才能注册！！！！！！！！！！！！！请仔细阅读，才能注册！！！！！！！！！！！！！请仔细阅读，才能注册！！！！！！！！！！！！！请仔细阅读，才能注册！！！！！！！！！！！！！请仔细阅读，才能注册！！！！！！！！！！！！！请仔细阅读，才能注册！！！！！！！！！！！！！请仔细阅读，才能注册！！！！！！！！！！！！！请仔细阅读，才能注册！！！！！！！！！！！！！
</p>
<!-- 如果为表单项添加disabled="disabled" 则表单项变成不可用状态 -->
<input type="checkbox" disabled="disabled"/>我已仔细阅读
<input type="submit" value="注册" disabled="disabled"/>
</body>
</html>
运行未成功😭😰😠🤕
八、事件对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#areaDiv {
border: 1px solid black;
width: 300px;
height: 50px;
margin-bottom: 10px;
}
#showMsg {
border: 1px solid black;
width: 300px;
height: 20px;
}
</style>
<script>
window.onload = function(){
// 当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标
var areaDiv = document.getElementById("areaDiv");
var showMsg = document.getElementById("showMsg");
/*
* onmousemove
* - 该事件将会在鼠标在元素中移动时被触发
*
* 事件对象
* - 当事件的响应函数被触发时，浏览器每次都会将一个事件作为实参传递进响应函数
* 在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标、键盘哪个键被按下、鼠标滚轮滚动的方向……
*/
areaDiv.onmousemove = function(event){
/*
* 在IE8中，响应函数被触发时，浏览器不会传递事件对象
* 在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
* 所以改成 var x = window.event.clientX; 即可
* 或者如下
*/
if(!event){
event = window.event;
}
// event = event || window.event; 同上
/*
* clientX可以获取鼠标指针的水平坐标
* clientY可以获取鼠标指针的垂直坐标
*/
var x = event.clientX;
var y = event.clientY;
// 在showMsg中显示坐标
showMsg.innerHTML = "x ="+x+"y ="+y
};
};
</script>
</head>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>
1.练习——div跟随鼠标移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
height: 1000px;
}
#box1{
width: 100px;
height: 100px;
background-color: red;
/* 开启绝对定位 */
position: absolute;
}
</style>
<script>
window.onload = function(){
// 使div可以跟随鼠标移动
var box1 = document.getElementById("box1");
document.onmousemove = function(event){
// 解决兼容问题
event = event||window.event;
// 获取鼠标坐标
/*
* clientX和clientY
* 用于获取鼠标在当前可见窗口的坐标
* div的偏移量是相对于整个页面的
*
* pageX和pageY可以获取鼠标相对于当前页面的坐标
* 但这两个属性在IE8中不兼容
*/
/*
* 获取滚动条滚动的距离
* chrome认为浏览器的滚动条时body的，可以通过body.scrollTop来获取
* 火狐等浏览器认为浏览器的滚动条是html的
*/
var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
// var left = event.pageX;
// var top = event.pageY;
var left = event.clientX;
var top = event.clientY;
// 设置div的偏移量
box1.style.left = left+ + sl + "px";
box1.style.top = top+ st + "px";
};
};
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
2.事件的冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
#s1{
background-color: yellow;
}
</style>
<script>
window.onload = function(){
/*
* 事件的冒泡(Bubble)
* - 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
* - 在开发中大部分冒泡都是有用的，如果不希望发生事件冒泡可以取消冒泡
* -
*/
var s1 = document.getElementById("s1");
s1.onclick = function(event){
event = event || window.event;
alert("1");
// 取消冒泡
// 可以将事件对象的cancelBubble设置为true，即可取消冒泡
event.cancelBubble = true;
};
var box1 = document.getElementById("box1");
box1.onclick = function(){
alert("2");
};
document.body.onclick = function(){
alert("3");
};
};
</script>
</head>
<body>
<div id="box1">
我是box1
<span id="s1">
我是span
</span>
</div>
</body>
</html>
3.事件的委派
例如：增删记录练习中的超链接，在一开始为每一个超链接绑定了单击响应函数，但在增加记录后，新的超链接要再次绑定单击响应函数
我们希望，只绑定一次单击响应函数，即可应用到多个元素上，即使元素是后添加的，我们可以尝试将其绑定给元素的共同的祖先元素
就叫做：事件的委派
指将事件统一绑定给元素共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件
事件委派是利用了冒泡，减少绑定次数，提高程序性能
u1.onclick = function(event){
event = event || window.event;
/*
* target
* - event中的target表示的是触发事件的对象
*/
if(event.target.className == "link"){
alert("我是ul里的单击响应函数");
}
};
4.事件的绑定
使用 对象.事件 = 函数 的形式绑定响应函数
它只能同时为一个元素的一个事件绑定一个响应函数
不能同时绑定多个，如果绑定了多个，则后面的会覆盖掉前面的
addEventListener()
- 通过这个方法也可以为元素绑定单击响应函数
- 参数：
1.事件的字符串，不要 on
2.回调函数，但事件触发时该函数会被调用
3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false - 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数
- 这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
- 但这个方法不支持IE8及以下的浏览器
btn01.addEventListener("click",function{
alert(1);
},false);
btn01.addEventListener("click",function{
alert(2);
},false);
btn01.addEventListener("click",function{
alert(3);
},false);
attachEvent()
- 在IE8中可以使用attachEvent()来绑定事件
- 参数：
1.事件的字符串，要on
2.回调函数 - 这个方法也可以同时为一个事件绑定多个处理函数
- 不同的是它是后绑定先执行，执行顺序和addEventListener()相反
btn01.attachEvent("onclick",function(){
alert(1);
});
btn01.attachEvent("onclick",function(){
alert(2);
});
btn01.attachEvent("onclick",function(){
alert(3);
});
addEventListener()中的this，是绑定事件的对象
attachEvent()中的this，是window
this是谁是由调用方式决定的
callback.call(obj)在调用回调函数时，无法使用
所以添加以个匿名函数加入回调函数就可以使用了
所以为了解决兼容问题，定义一个函数，用来为指定元素绑定单击响应
参数：
obj 要绑定事件的对象
eventStr 事件的字符串(不要on)
callback 回调函数
function bind(obj, eventStr, callback) {
if (obj.addEventListener) {
//大部分浏览器兼容的方式
obj.addEventListener(eventStr, callback, false);
} else {
//IE8及一下
obj.attachEvent("on" + eventStr, function () {
callback.call(obj);
});
}
}
bind(btn01, "click", function () {
alert("我是box1的响应函数")
});
5.事件的传播
关于事件的传播，网景公司和微软公司有不同的理解
- 微软公司：认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就是说事件应该在冒泡阶段执行
- 网景公司：认为事件应该是由外向内传播的，也就是当事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后再向内传播给后代元素
- W3C：综合了两个公司的方案，将事件传播分成了三个阶段
1.捕获阶段 —— 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
2.目标阶段 —— 事件捕获的目标元素，捕获结束开始在目标元素上触发元素
3.冒泡阶段 —— 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件 - 如果想要在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true（一般用不到）
- 在IE8及一下的浏览器中没有捕获阶段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 {
width: 300px;
height: 300px;
background-color: aqua;
}
#box2 {
width: 200px;
height: 200px;
background-color: antiquewhite;
}
#box3 {
width: 100px;
height: 100px;
background-color: crimson;
}
</style>
<script>
window.onload = function () {
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
function bind(obj, eventStr, callback) {
if (obj.addEventListener) {
//大部分浏览器兼容的方式
obj.addEventListener(eventStr, callback, false);
} else {
//IE8及一下
obj.attachEvent("on" + eventStr, function () {
callback.call(obj);
});
}
}
bind(box1, "click", function () {
alert("我是box1的响应函数")
});
bind(box2, "click", function () {
alert("我是box2的响应函数")
});
bind(box3, "click", function () {
alert("我是box3的响应函数")
});
}
</script>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
</body>
</html>
扫一扫
832
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
