文章目录
DOM
DOM (Document Object Model) 浏览器已经为我们提供了文档节点对象,这个对象是 window 属性。可以在页面中直接使用,文档节点代表的是整个网页。
事件
事件就是用户和浏览器之间的一些交互行为。例如: 点击按钮、鼠标移动、关闭窗口
处理事件
我们可以在事件对应的属性中,设置一些 js 代码,这样当事件被触发时,js代码会执行。这种写法叫做结构和行为耦合,不方便维护不推荐使用。
<!-- 这样写不方便后期的维护 -->
<button onclick="alert('啊!我被点击了~~')">点我一下</button>
文档的加载
浏览器在加载一个页面时,是按照自上向下的顺序开始加载的,读取到一行就运行一行。
如果将 js 代码写到页面的上边,在代码执行的时候,页面还没有加载,DOM对象也没有加载,会导致无法获取到DOM 对象
解决办法 使用window.onload
来解决
onload
事件会在整个页面加载完成之后才会触发
为 window 绑定 onload 事件,该事件对应的响应函数会在页面加载完成之后执行,这样可以确保我们的代码在执行时所有的 DOM对象已经加载完毕了。
window.onload = function(){
// 在这里编写你的 JS 代码...
};
DOM 查询
获取元素节点
document.getElementById()
通过 id 属性
获取一个元素节点对象
<script>
window.onload = function () {
var bnt = document.getElementById("btn"); // 通过 ID 来获取元素节点
};
</script>
<body>
<button id="btn">点我</button>
</body>
document.getElementsByTagName()
通过标签名获取一组元素节点对象,它返回的是个数组。
<script>
window.onload = function () {
var allA = document.getElementsByTagName("a");
console.log("数组的长度为:" + allA.length);
};
</script>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.taobao.com">阿里</a>
<a href="http://www.qq.com">腾讯</a>
</body>
运行结果
document.getElementsByName()
通过name
属性值获取一组元素节点对象,返回的是一个数组。
<script>
window.onload = function () {
var hobby = document.getElementsByName("hobby"); // 根据 name 属性值来获取元素
console.log("数组的长度为:" + hobby.length);
};
</script>
<body>
<form action="#">
<input type="checkbox" name="hobby" value="zq">足球
<input type="checkbox" name="hobby" value="lq">篮球
<input type="checkbox" name="hobby" value="ymq">羽毛球
</form>
</body>
运行结果
获取元素节点的子节点
getElementsByTagName()
获取当前节点的所有子节点,返回一个数组
<script>
window.onload = function () {
var box = document.getElementById("box"); // 获取 ID 为 box 的元素
var allA = box.getElementsByTagName("a"); // 获取 box 下边所有的 <a> 标签
console.log("数组的长度为:" + allA.length);
};
</script>
<body>
<div id="box">
<a href="http://www.baidu.com">百度</a>
<a href="http://www.qq.com">腾讯</a>
<a href="http://www.taobao.com">阿里</a>
</div>
</body>
运行结果
childNodes
获取当前节点的所有子节点。根据DOM 标准,标签间的空白也算是一个文本节点。
注意: 在IE8
及以下浏览器中,不会把空白当成子节点。
<script>
window.onload = function () {
var box = document.getElementById("box");
var allA = box.childNodes; // 获取 box 下边所有的子节点.
console.log("数组的长度为:" + allA.length);
};
</script>
<body>
<div id="box">
<a href="http://www.baidu.com">百度</a>
<a href="http://www.qq.com">腾讯</a>
<a href="http://www.taobao.com">阿里</a>
</div>
</body>
运行结果
为什么是 7
呢?
children
可以获取当前元素的所有子元素,它是不包含空白的。
<script>
window.onload = function () {
var box = document.getElementById("box");
var allA = box.children; // 获取 box 下边所有的子元素
console.log("数组的长度为:" + allA.length);
};
</script>
<body>
<div id="box">
<a href="http://www.baidu.com">百度</a>
<a href="http://www.qq.com">腾讯</a>
<a href="http://www.taobao.com">阿里</a>
</div>
</body>
运行结果
firstChild 和 lastChild
firstChild
可以获取当前元素的第一个子节点(包括空白区域)
lastChild
可以获取当前元素的最后一个子节点(包括空白区域)
<script>
window.onload = function () {
var box = document.getElementById("box");
var fc = box.children; // 获取 box 下边第一个子节点.
var lc = box.lastChild; // 获取 box 下边最后一个子节点.
};
</script>
</head>
<body>
<div id="box">
<!-- 我就不想获取空白的区域,可以写到一行 -->
<a href="http://www.baidu.com">百度</a><a href="http://www.qq.com">腾讯</a><a href="http://www.taobao.com">阿里</a>
</div>
</body>
获取父节点和兄弟节点
parentNode
获取当前元素的父节点(父元素)
<script>
window.onload = function () {
var p = document.getElementById("childNode"); // 获取 p 元素
var myParent = p.parentNode; // 获取我爸爸
};
</script>
<body>
<div id="box">
<p id="childNode">我是子节点</p>
</div>
</body>
previousSibling 和 nextSibling
previousSibling
获取当前元素的前一个兄弟节点(哥哥节点)
nextSibling
获取当前元素的后一个兄弟节点(弟弟节点)
<script>
window.onload = function () {
//获取我的节点
var my = document.getElementById("my");
var previous = my.previousSibling; // 获取哥哥节点
var next = my.nextSibling; // 获取弟弟节点
};
</script>
<body>
<p>哥哥节点</p>
<p id="my">我节点</p>
<p>弟弟节点</p>
</body>
DOM 查询的其他方法
document.body
获取 body
标签
window.onload = function(){
var body = document.body; // 获取 body 标签
console.log(body);
};
运行结果
document.documentElement
获取 HTML
根标签
window.onload = function () {
var html = document.documentElement; // 获取 html 根标签
console.log(html);
};
运行结果
document.all
获取页面上的所有元素,相当于document.getElementsByTagName("*")
window.onload = function(){
var all = document.all(); // 获取页面上的所有的元素
console.log(all);
};
getElementsByClassName()
根据元素的 class 属性值查询一组元素节点对象,但是该方法不支持 IE8 及以下的浏览器。
<script>
window.onload = function () {
var ps = document.getElementsByClassName("p1"); // 获取所有class 为的 p1 的元素
console.log("数组的长度为:" + ps.length);
};
</script>
<body>
<p class="p1">我是一个段落</p>
<p class="p1">我是一个段落</p>
<p class="p1">我是一个段落</p>
</body>
运行结果
document.querySelector()
需要一个选择器的字符串作为参数,可以根据一个CSS 选择器来选择一个元素节点对象
使用该方法总会选择唯一的一个元素,如果满足条件的元素有多个,它只会返回第一个.
支持 IE8 及以上的浏览器
<script>
window.onload = function () {
var fp = document.querySelector("#firstP"); // 通过选择器获取元素
console.log(fp);
};
</script>
<body>
<p class="p1" id="firstP">我是一个段落</p>
<p class="p1">我是一个段落</p>
<p class="p1">我是一个段落</p>
</body>
运行结果
document.querySelectotAll()
该方法和querySelector()
方法用法一样,不同的是,它会将符合条件的元素封装到一个数组中返回。即使符合条件的元素只有一个,也会返回一个数组。
<script>
window.onload = function () {
var fp = document.querySelectorAll(".p1"); // 通过选择器获取元素
console.log(fp);
};
</script>
<body>
<p class="p1" id="firstP">我是一个段落</p>
<p class="p1">我是一个段落</p>
<p class="p1">我是一个段落</p>
</body>
运行结果
DOM 增删改操作
document.createElement()
用于创建一个节点,需要一个标签名作为参数,将会根据标签名创建元素节点对象,并将创建好的对象作为返回值返回。
<script>
window.onload = function () {
// 获取到 btn01
var btn01 = document.getElementById("btn01");
// 添加点击事件
btn01.onclick = function(){
// 创建一个节点
var p = document.createElement("p");
console.log(p);
};
};
</script>
<body>
<button id="btn01">创建一个节点</button>
</body>
运行结果
document.createTextNode()
可以用来创建一个文本节点对象,需要一个文本内容作为参数,将会根据该内容创建文本节点,并将新的节点返回。
<script>
window.onload = function () {
// 获取到 btn01
var btn01 = document.getElementById("btn01");
// 添加点击事件
btn01.onclick = function(){
// 创建一个文本节点
var txt = document.createTextNode("我是一个文本节点");
console.log(txt);
};
};
</script>
<body>
<button id="btn01">创建一个文本节点</button>
</body>
运行结果
appendChild()
向一个父节点中添加一个新的子节点父节点.appendChild(子节点);
<script>
window.onload = function () {
// 获取到 btn01
var btn01 = document.getElementById("btn01");
// 添加点击事件
btn01.onclick = function () {
// 创建一个 p 标签
var p = document.createElement("p");
// 创建一个文本节点
var txt = document.createTextNode("我是新创建p标签中的内容...");
// 把文本节点添加到 p 标签中
p.appendChild(txt);
// 把 p 标签添加到 body 中
var body = document.body; // 获取body
body.appendChild(p);
};
};
</script>
<body>
<button id="btn01">创建一个p标签</button>
</body>
点击按钮以后,就会创建一个 p 元素
removeChild()
删除一个子节点 父节点.removeChild(子节点);
<script>
window.onload = function () {
// 获取到 btn01
var btn01 = document.getElementById("btn01");
// 添加点击事件,删除第三个子节点
btn01.onclick = function () {
//获取第三个子节点
var node = document.getElementsByTagName("li")[2];
// 获取父节点
var ul = document.getElementById("uls");
ul.removeChild(node); // 删除子节点
};
};
</script>
<body>
<button id="btn01">删除一个子节点</button>
<ul id="uls">
<li>我是第一个子节点</li>
<li>我是第二个子节点</li>
<li>我是第三个子节点</li>
<li>我是第四个子节点</li>
</ul>
</body>
运行结果
replaceChild()
可以使用指定的子节点来替换已有的子节点 父节点.replaceChild(新节点,旧节点);
<script>
window.onload = function () {
// 获取到 btn01
var btn01 = document.getElementById("btn01");
// 添加点击事件
btn01.onclick = function () {
// 获取p标签
var p = document.getElementById("pNode");
// 获取父节点
var body = document.body;
//创建一个新的节点,用于替换旧节点
var a = document.createElement("a");
var txt = document.createTextNode("我是新的节点 a 哦~");
a.appendChild(txt);
// 替换节点
body.replaceChild(a, p);
};
};
</script>
<body>
<button id="btn01">替换子节点</button>
<p id="pNode">我是旧节点 p </p>
</body>
运行结果
点击按钮以后
insertBefore()
可以在指定的子节点前插入一个新的子节点父节点.insertBefore(新节点,旧节点);
<script>
window.onload = function () {
// 获取到 btn01
var btn01 = document.getElementById("btn01");
// 添加点击事件
btn01.onclick = function () {
// 获取p标签
var p = document.getElementById("pNode");
// 获取父节点
var body = document.body;
//创建一个新的节点,用于插入到 p 元素前面
var a = document.createElement("a");
var txt = document.createTextNode("我是新的节点 a 哦~");
a.appendChild(txt);
// 插入一个新的节点 a
body.insertBefore(a, p);
};
};
</script>
<body>
<button id="btn01">替换子节点</button>
<p id="pNode">我是旧节点 p </p>
</body>
运行结果
点击按钮以后
DOM 操作 CSS 样式
读取和修改内联样式
使用 JS 来修改元素的样式
语法: 元素.style.样式名 = 样式值
注意: 如果 CSS 样式名中含有 -
这种名称在JS 中是不合法的,例如: background-color
我们需要将这种样式名,修改为 驼峰命名法backgroundColor
- 通过 style 属性设置的样式都是内联样式,而内联样式有较高的优先级,所以通过JS 修改的样式往往会立即显示。
- 但是如果在样式中写了
!important
则此时样式会有最高的优先级,即使通过 JS 也不能覆盖这个样式。此时将会导致 JS 修改的样式失效,所以尽量不要给样式添加 !important
- 通过 style 读取和设置的都是内联样式、无法读取样式表中的样式。
<style>
/* 设置一个基本的样式 */
#box{
width: 100px;
height: 100px;
background-color: darkcyan;
}
</style>
<script>
window.onload = function () {
// 获取到 btn01
var btn01 = document.getElementById("btn01");
// 添加点击事件
btn01.onclick = function () {
// 获取 box
var box = document.getElementById("box");
box.style.width = "150px"; // 修改宽度
box.style.height = "150px"; // 修改高度
box.style.backgroundColor = "deeppink"; // 修改背景颜色
};
};
</script>
<body>
<button id="btn01">更换样式</button>
<br>
<br>
<div id="box"></div>
</body>
运行结果
读取元素当前显示的样式
语法:元素.currentStyle.样式名
仅支持 IE 8
可以用来读取当前元素正在显示的样式,如果当前元素没有设置该样式,则获取默认值。
在其他浏览器中可以使用 getComputedStyle()
这个方法来获取元素当前的一个样式.这个方法是 window
的方法,可以直接使用.
getComputedStyle()
需要两个参数
1. 要获取样式的元素
2. 可以传递一个伪元素,一般都传 null
该方法会返回一个 对象,对象中封装了当前元素的样式,可以通过对象.样式名
来读取样式。如果获取的样式没有设置,则会获取到真实的值,而不是默认值。
- 例如:没有设置
width
,则不会获取auto
,而会返回一个具体的宽度
注意:通过currentStyle
和 getComputedStyle()
读取到的样式都是只读
的,不可以修改,如果要修改必须通过 style 属性
为了兼容 IE8 和其他浏览器一般会写一个方法用来返回当前的样式
/*
定义一个函数,来返回当前的样式
参数
1. 需要获取样式的元素
2. 元素的名称 例如:width height ....
*/
function getStyle(obj,name){
// 如果有这个属性则代表是 正常浏览器
if(window.getComputedStyle){
// 正常浏览器
return getComputedStyle(obj,null)[name];
}else{
//IE 8 及以下浏览器
return obj.currentStyle[name];
}
}
例子:
<style>
#box {
width: 100px;
height: 100px;
background-color: darkcyan;
}
</style>
<script>
window.onload = function () {
function getStyle(obj, name) {
// 如果有这个属性则代表是 正常浏览器
if (window.getComputedStyle) {
// 正常浏览器
return getComputedStyle(obj, null)[name];
} else {
//IE 8 及以下浏览器
return obj.currentStyle[name];
}
}
var btn01 = document.getElementById("btn01"); // 获取按钮
var box = document.getElementById("box"); // 获取 box 元素
// 为按钮添加事件
btn01.onclick = function () {
// 获取 box 元素当前显示的宽度
var width = getStyle(box, "width");
alert(width);
};
};
</script>
<body>
<button id="btn01">获取box的样式</button>
<br>
<br>
<div id="box"></div>
</body>
运行结果
其他样式相关的属性
这些属性都是不带 px
的,返回的都是一个数字,可以直接进行计算。
这些属性都是只读的,不可以修改
clientWidth 和 clientHeight
clientWidth
和 clientHeight
这两个属性可以获取元素的可见宽度和高度
可以获取到元素宽度和高度,包括内容区
和内边距
<style>
#box {
width: 100px;
height: 100px;
padding: 10px; /* 设置内边距为10 */
background-color: darkcyan;
}
</style>
<script>
window.onload = function () {
var btn01 = document.getElementById("btn01");
var box = document.getElementById("box"); // 获取 box 元素
btn01.onclick = function () {
// 获取元素的可见宽度和高度
var width = box.clientWidth;
var height = box.clientHeight;
console.log("元素的可见宽度为:" + width);
console.log("元素的可见高度为:" + height);
};
};
</script>
<body>
<button id="btn01">获取元素的可见宽度和高度</button>
<br>
<br>
<div id="box"></div>
</body>
运行结果
offsetWidth 和 offsetHeight
offsetWidth
和 offsetHetght
可以获取到元素的整个宽度和高度,包括内容区
、内边距
、边框
<style>
#box {
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid deeppink;
background-color: darkcyan;
}
</style>
<script>
window.onload = function () {
var btn01 = document.getElementById("btn01");
var box = document.getElementById("box"); // 获取 box 元素
btn01.onclick = function () {
// 获取元素的可见宽度和高度
var width = box.offsetWidth;
var height = box.offsetHeight;
console.log("元素的整个宽度为:" + width);
console.log("元素的整个高度为:" + height);
};
};
</script>
<body>
<button id="btn01">获取元素的宽度和高度</button>
<br>
<br>
<div id="box"></div>
</body>
运行结果
offsetParent
用来获取当前元素的定位父元素
(开启了定位的父元素)
- 会获取到距离当前元素最近开启了定位的祖先元素。
- 如果所有的祖先元素都没有开启定位,则返回
body
<style>
#box {
width: 100px;
height: 100px;
background-color: darkcyan;
position: relative;
}
#box1 {
width: 50px;
height: 50px;
background-color: deeppink;
}
</style>
<script>
window.onload = function () {
var btn01 = document.getElementById("btn01");
var box1 = document.getElementById("box1"); // 获取 box1 元素
btn01.onclick = function () {
// 获取距离我开启了定位的父元素
var myParent = box1.offsetParent;
console.log(myParent);
};
};
</script>
<body>
<button id="btn01">获取距离我开启了定位的父元素</button>
<br>
<br>
<div id="box">
<div id="box1"></div>
</div>
</body>
运行结果
offsetTop 和 offsetLeft
offsetTop
获取当前元素相对于定位元素的垂直偏移量
offsetLeft
获取当前元素相对于定位元素的水平偏移量
<style>
* {
padding: 0;
margin: 0;
}
#box {
width: 100px;
height: 100px;
background-color: darkcyan;
position: absolute;
}
</style>
<script>
window.onload = function () {
var btn01 = document.getElementById("btn01");
var box = document.getElementById("box"); // 获取 box 元素
btn01.onclick = function () {
// 获取偏移量
var top = box.offsetTop;
var left = box.offsetLeft;
console.log("顶部的偏移量为:" + top);
console.log("左侧的偏移量为:" + left);
};
};
</script>
<body>
<button id="btn01">获取偏移量</button>
<div id="box"></div>
</body>
运行结果
scrollWidth 和 scoreHeight
scrollWidth
和 scrollHeight
可以获取元素整个滚动区域的宽度和高度
<style>
* {
padding: 0;
margin: 0;
}
#box {
width: 200px;
height: 200px;
margin: 50px auto;
background-color: darkcyan;
overflow: auto;
}
</style>
<script>
window.onload = function () {
var btn01 = document.getElementById("btn01");
var box = document.getElementById("box"); // 获取 box 元素
btn01.onclick = function () {
// 获取滚动区域的宽度和高度
var sWidth = box.scrollWidth;
var sHeight = box.scrollHeight;
console.log("滚动区域的宽度为:" + sWidth);
console.log("滚动区域的高度为:" + sHeight);
};
};
</script>
<body>
<button id="btn01">获取滚动区域的宽度和高度</button>
<br>
<br>
<div id="box">
<p>
欲将沉醉换悲凉,清歌莫断肠。这混乱的尘世,究竟充斥了多少绝望和悲伤。你想去做一个勇敢的男子,为爱,为信仰,轰轰烈烈的奋斗一场。你周身充斥着无人可比的灵气和光芒。你有着与伟人比肩的才气和名声,你是那样高傲孤洁的男子。你的一寸狂心未说,已经几度黄昏雨。
</p>
</div>
</body>
运行结果
scrollTop 和 scrollLeft
scrollTop
可以获取垂直方向滚动条滚动的距离
scrollLeft
可以获取水平方向滚动条滚动的距离
<style>
* {
padding: 0;
margin: 0;
}
#box {
width: 200px;
height: 200px;
margin: 50px auto;
background-color: darkcyan;
overflow: auto;
}
</style>
<script>
window.onload = function () {
var btn01 = document.getElementById("btn01");
var box = document.getElementById("box"); // 获取 box 元素
btn01.onclick = function () {
// 获取滚动条滚动的距离
var st = box.scrollTop;
var sl = box.scrollLeft;
console.log("垂直方向滚动条滚动的距离为:" + st);
console.log("水平方向滚动条滚动的距离为:" + sl);
};
};
</script>
</head>
<body>
<button id="btn01">获取滚动区域的宽度和高度</button>
<br>
<br>
<div id="box">
<p>
欲将沉醉换悲凉,清歌莫断肠。这混乱的尘世,究竟充斥了多少绝望和悲伤。你想去做一个勇敢的男子,为爱,为信仰,轰轰烈烈的奋斗一场。你周身充斥着无人可比的灵气和光芒。你有着与伟人比肩的才气和名声,你是那样高傲孤洁的男子。你的一寸狂心未说,已经几度黄昏雨。
</p>
</div>
</body>
运行结果
判断滚动条滚动到底
scrollHeight - scrollTop == clientHeight; // 说明垂直方向的滚动条滚动到底了。
scrollWidth - scrollLeft == clientWidth; // 说明水平方向的滚动条滚动到底了。