js的组成部分
![](https://i-blog.csdnimg.cn/blog_migrate/95bccd01df51ebaedc807d80e7ae88e5.png)
前面学习的部分是ECMAScript部分,都是基础语法部分。基础语法只是规定的代码如何写,并不能实现很多主流的操作,比如跳转页面,获取浏览器的尺寸等操作。再比如让HTML中的元素动起来。
所以需要学习BOM来操作浏览器。学习DOM来操作HTML标签。
一、BOM
1、BOM介绍
BOM是三个单词的首拼--Browser Object Model,即浏览器对象模型。
所谓对象模型,指的是用对象来描述的一个结构。
BOM意思是通过对象组成的结构来操作浏览器的。
![](https://i-blog.csdnimg.cn/blog_migrate/8b57acd73296ff3475c30f85b815df32.png)
2、浏览器的历史记录
历史记录的操作是window的子对象history。可以操作网页的前进和后退。
history.back(); # 返回到上一个页面,相当于浏览器的后退按钮
history.forward(); # 前进到下一个页面(下一个页面必须是点击以后的页面),相当于浏览器的前进按钮
history.go()
3、浏览器的地址栏信息
浏览器的地址栏操作,window对象交给了自己的子对象location对象去处理。
console.log(location.hash); // 设置或返回从#开始的url --- 锚点
console.log(location.href); // 设置或返回完整的的url
console.log(location.search); // 设置或返回url中的参数部分
方法:
语法:
location.assign("要跳转的地址"); # 这个方法是设置要跳转的地址
location.reload(); # 重新加载本页面
location.replace() # 使用新地址替换掉旧地址(跳转)
4、浏览器的弹出层
window.alert("恭喜你!");
window.prompt("请输入数字:",1);
window.confirm("你确定要删除吗?")
5、浏览器窗口尺寸
window.innerHeight - 浏览器窗口的高度
window.innerWidth - 浏览器窗口的宽度
var w = window.innerWidth;
console.log(w);
var h = window.innerHeight;
console.log(h);
说明:
这两个属性返回的单位是像素
这两个属性计算的范围包含滚动条的区域
6、浏览器的事件
onload事件:当网页中的所有资源都加在完成之后执行这个事件
window.onload = function(){
console.log("当网页中所有资源加载完成才打印");
}
使用说明:通常是将script标签放到head标签中的时候使用。因为放在head中默认是获取不到body中的内容的,但是有了这个事件后,就可以了。
onscroll 滚动事件:当网页滚动条的位置发生改变的时候触发这个事件
window.onscroll = function () {
console.log('浏览器滚动了')
}
使用说明:浏览器要有滚动条才行。
浏览器窗口改变事件:resize
window.onresize = function(){
// 当浏览器的窗口大小发生改变的时候触发这个事件
}
7、定时器
延迟执行:
var timerId = setTimeout(function () {
console.log('我执行了')
}, 1000)
console.log(timerId) // 1
使用说明:第一个参数是要执行的函数,第二个参数延迟的时间(单位毫秒)。返回一个数字,表示当前页面中第几个定时器。
每间隔一段时间执行:
var timerId = setInterval(function () {
console.log('我执行了')
}, 1000)
使用说明:第一个参数是要执行的函数,第二个参数是间隔的时间(单位毫秒)。返回一个数字,表示当前页面中第几个定时器。
关闭定时器:
定时器返回的数字,就是用来关闭定时器的
clearTimeout(timerId); // 关闭延迟执行的定时器
clearInterval(timerId); // 关闭间隔执行的定时器
使用说明:其实这两个方法可以混用。
var timerId = setTimeout(function () {
console.log('倒计时定时器')
}, 1000)
// 关闭延迟执行定时器
clearInterval(timerId)
var timerId2 = setInterval(function () {
console.log('间隔定时器')
}, 1000)
// 关闭间隔定时器
clearTimeout(timerId2)
8、异步操作
异步和同步的概念
张三叫李四一起去吃饭,张三说他还有作业没做完,让李四先去,李四去吃饭,张三在写作业,这两个人做的事情不一样,但是在同一时间段内,两个人的事情在同时做,这就是异步。
张三叫李四一起去吃饭,张三说他还有作业没做完,让李四等一下,李四就等张三做完作业后两个人才一起去吃饭。这就是同步。
同步意思是同一时间只能做一件事情,多件事情需要排队按照顺序执行。异步就是同一时间可以做多件事情。
我们平常写的代码都是同步代码,定时器我们接触到的第一个异步代码。
js的特点是单线程的,也就是同一时间只能做一件事情,所以js会将异步代码交给浏览器去处理,因为浏览器是多线程的。
js的线程,会先将所有同步代码执行完,与此同时,浏览器也在处理异步代码(例如正在等待时间),当浏览器中的异步代码到了应该执行的时候了,会将需要执行的异步代码放在一个队列中,进行排队等候;当js线程将所有同步代码执行结束后,会从队列中拿出第一个需要执行的代码去执行,执行过一个以后,再次到队列中拿出第二个需要执行的代码去执行。。。。
js的异步操作,是在所有同步代码执行完成以后才执行异步代码
一般情况代码是按顺序执行的,上一行代码执行结束之前,下一行代码一直在等待,这是同步机制
同步执行示意图
![](https://i-blog.csdnimg.cn/blog_migrate/c1adc7b4ba0630b022d3837a40314056.png)
异步代码是等待同步代码都执行完成以后,才运行异步代码,如下图:
异步执行示意图
![](https://i-blog.csdnimg.cn/blog_migrate/7a6f1474237c3c50071282e0f7ebd71f.png)
9、窗口控制
9.1、打开新的窗口
语法:
window.open(url, 窗口名称, 窗口风格)
参数说明:
如果url为空,会打开一个空的标签页;url不为空,就打开目标url页面
窗口名称是一个字符串
窗口风格:
height:窗口高度,数字,不能小于100
width:窗口高度,数字,不能小于100
left:窗口左边距离,数字
top:窗口上边距离,数字
返回新窗口的window
9.2、关闭窗口
window.close()
9.3、设置窗口滚动
语法:
window.scrollTo(x, y)
设置卷去的距离。
二、DOM
1、DOM介绍
DOM的全拼是:Document Object Model,叫做文档对象模型。
就是使用对象结构操作html文档。例如,改变标签的背景颜色,让标签移动产生动画。。。。
DOM中的顶级对象是document,言外之意,DOM其实是属于BOM的。
例如:
window.document.write();
window.document.bgColor="red";
2、html基本结构的操作:
document.body :body比较常用, 并且在页面中是唯一的, 因此可以使用document.body直接获取
document.documentElement : 可以获取html元素及其所有内容
document.head : 可以直接获取head元素
document.title : 可以直接获取title的文本
3、获取元素
在js中,标签的id名,可以当做是变量,直接就能代表这个标签元素,但是,id名可以随便定义,但是变量名不能随便定义,所以使用id名代表标签是有风险的。所以需要通过方法来获取到标签元素,自己定义给变量,可以避免这种风险。
通过document获取节点
document.getElementById("标签id名"); // 通过标签的id名获取标签
document.getElementsByTagName("标签名"); // 通过标签名获取标签
document.getElementsByClassName("标签类名"); // 通类名获取标签
document.getElementsByName("标签的name属性的值"); // 通过标签的name属性获取标签
// 上述4种获取标签的方法,除了通过id可以准确获取到元素,别的方法都是只能获取到元素的集合(类数组)
使用css选择器获取元素:
documen.querySelector(css选择器); // 获取到匹配css的第一个元素
documen.querySelectorAll(css选择器); // 获取到匹配css的所有元素
4、内容操作
语法:
元素.innerHTML # 代表元素中的所有内容(包含标签)
元素.innerText # 代表元素中的文本内容
表单元素.value
# 单标签操作内容其实就是在操作元素的属性
例:
<body>
<div id="box" introduce="区域"><p>我是盒子</p></div>
</body>
<script type="text/javascript">
document.getElementById("box").innerText = "今天你要嫁给我";
var text = document.getElementById("box").innerText;
document.write(text);
document.getElementById("box").innerHTML = "<a href='http://www.baidu.com'>百度</a>";
var content = document.getElementById("box").innerHTML;
console.log(content);
5、样式操作
5.1、设置样式
语法:
元素.style.css属性名 = css属性值; # 给标签设置样式
例:
<body>
<style type="text/css">
#box{
width:100px;
height:100px;
background:#f00;
}
</style>
<input type="button" id="btn" value="走你">
<div id="box"></div>
</body>
<script type="text/javascript">
var n = 0;
document.getElementById("btn").onclick=function(){
n += 100;
document.getElementById("box").style.marginLeft = n + "px";
}
</script>
这样设置的样式都是行内样式。
5.2、获取样式
语法:
window.getComputedStyle(标签)
返回所有样式键值对组成的对象。
6、元素类名
使用元素的className属性可以设置元素的类名,也可以获取类名
<body>
<div class="box"></div>
<script>
var div = document.querySelector('div')
div.className = 'test'
console.log(div) // <div class="test"></div>
console.log(div.className) // test
</script>
</body>
classList类名操作:
添加类名,语法:类名列表.add(类名)
例:
<style>
.box{
width: 100px;
height: 100px;
background-color: #f00;
}
.green{
background-color:#0f0;
}
.border{
border:10px solid #00f;
}
</style>
<body>
<button>按钮</button>
<div class="box green"></div>
</body>
<script type="text/javascript">
// 获取标签元素
var box = document.querySelector(".box");
// 获取标签类名列表
var list = box.classList;
console.log(list);
// 获取按钮
var btn = document.querySelector("button");
// 给按钮绑定单击事件
btn.onclick = function(){
// 给类名列表中添加一个类名
list.add('border')
}
</script>
效果:
添加类名 |
![](https://i-blog.csdnimg.cn/blog_migrate/df05d5c0f6183fc71589e2daaf6b71d9.png)
删除类名,语法:类名列表.remove(类名)
btn.onclick = function(){
// 将green从类名列表中删除
list.remove('green')
console.log(box.classList)
}
效果:
删除类名
![](https://i-blog.csdnimg.cn/blog_migrate/e6e96fe6823b2187785f78b0c6876ecf.png)
让类名在删除和添加之间切换,语法:类名列表.toggle(类名)
例:
btn.onclick = function(){
// 让green类名在删除和点击之间切换
list.toggle('green')
}
效果:
切换类名
![](https://i-blog.csdnimg.cn/blog_migrate/efee5200df39b460f116cabecd87bc76.gif)
判断类名列表中是否包含指定类名:类名列表.contains(类名)
例:
console.log(list.contains('green'))
7、属性操作
7.1、标签属性
元素.setAttribute(属性名,属性值) # 设置元素的属性
元素.getAttribute(属性名); # 获取元素属性
元素.removeAttribute(属性名); # 删除元素属性
7.2、对象属性
元素.属性名 = 值;
console.log(元素.属性名);
例:
btn.onclick=function(){
img.src = '2.jpg';
}
7.3、H5的自定义属性操作
当给标签添加属性以data-XXX开头时,H5提供了一个快速操作属性的api:
标签.dataset.XXX // 获取属性的值
8、页面卷去的距离
语法:
document.documentElement.scrollTop
上面这个语法当html没有文档声明的时候,是获取不到的,彼时,需要用到另外一个语法来获取:
document.body.scollTop
兼容写法 - 不管什么情况下都能获取到:
var t = document.documentElement.scrollTop || document.body.scrollTop
9、短路运算
利用逻辑运算中的&&和||让赋值操作变得更灵活,并带有选择性。
var 变量 = 数据1 && 数据2
当数据1为true,不能决定整个条件的结果,还需要进行到数据2,所以此时会将数据2赋值给变量。
当数据1为false,就已经知道整个条件的结果了,就没有必要进行到数据2了,所以此时会将数据1赋值给变量
var 变量 = 数据1 || 数据2
当数据1为true,就已经能决定整个条件的结果了,就没有必要进行数据2了,此时就将数据1赋值给变量
当数1为false,还不能决定整个条件的结果,需要进行到数据2,此时就会将数据2赋值给变量
案例:
随机点名
实时显示当前时间
全选全不选案例
10、节点操作
DOM 就是我们 html 结构中一个一个的节点构成的。不光我们的标签是一个节点,我们写的文本内容也是一个节点,注释,包括空格都是节点。
DOM节点分三种:元素节点、文本节点、属性节点。元素节点就是我们获取到的标签元素;标签里面的文本就是文本节点、标签上的属性就是属性节点。
10.1、获取节点
获取所有子标签节点:
父.children
获取到的是一个所有子标签组成的伪数组
获取第一个子标签节点:
父.firstElementChild
获取最后一个子标签节点:
父.lastElementChild
获取父标签节点:
子.parentElement
获取上一个兄弟标签节点:
标签.previouseElementSibling
获取上一个兄弟标签节点:
标签.nextElemenetSibling
10.2、创建标签
document.createElement('标签名字符串')
返回创建好的标签
10.3、插入节点
给父标签追加子标签:
父.appendChild(子标签对象)
将新的子标签插入到某个旧的子标签前面:
父.insertBefore(新的子标签, 旧的子标签)
10.4、替换节点
使用新的子标签替换掉旧的子标签:
父.removeChild(新的子标签, 旧的子标签)
10.5、删除节点
父标签将指定的子标签删除:
父.removeChild(子标签)
10.6、克隆节点
将一个标签复制一份出来:
标签.cloneNode()
返回一个标签对象,这样只能复制一个空的标签,没有内容。
标签.cloneNode(true)
返回一个标签对象,这样可以将标签中的内容也复制出来。
11、获取标签尺寸
包含标签边框的尺寸:
标签.offsetWidth
标签.offsetHeight
不包含边框的尺寸:
标签.clientWidth
标签.clientHeight
返回纯数字。
12、获取元素位置
标签.offsetLeft
标签.offsetTop
获取的是相对于设置过定位的父标签的左边距和上边距离,返回纯数字。
13、获取边框大小
标签.clientTop
标签.clientLeft
获取到的是上边框和左边框的厚度,纯数字。