JavaScript的组成：ECMAScript、BOM、DOM，其中ECMAScript为JavaScript的核心，但是如果要在浏览器中使用JavaScript，那么BOM才是JavaScript的核心。
也就是说，无论ECMAScript有多权威，进了浏览器，就得遵守浏览器的规则。
BOM浏览器对象模型
BOM简介
BOM是英文Browser Object Model的首字母缩写（浏览器对象模型）
BOM作用
它提供了一系列对象用于与浏览器窗口进行交互，这些对象通常统称为BOM 如：获取浏览器信息，操作浏览器.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PJwBAyy4-1662463971274)(/1560515950954.png)]
window（浏览器窗口对象,主要用于操作浏览器，浏览器中最大的对象,BOM核心对象）
location（地址栏对象 - 提供了对地址栏操作的方法和属性）
history（浏览历史对象，提供了对浏览器历史记录操作的方法和属性）
screen（屏幕对象，获取屏幕的信息）
navigator（浏览器对象，提供了获取浏览器信息的方法和属性）
document（文档对象， - 代表整个网页，DOM的根节点）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tQ9Utnil-1662463971276)(/1560563858508.png)]
window对象[掌握]
属性
| 属性名 | 描述 |
|---|---|
| window.innerWidth | 获取当前网页可显示区域宽度问题：ie有兼容性问题解决：document.documentElement.clientWidth |
| window.innerHeight | 获取当前网页可显示区域高度问题：ie有兼容性问题解决：document.documentElement.clientHeight |
脚下留心
1、写属性加上对象名（建议）
2、innerWidth 的width首字母大写
例1: 获取当前网页的宽度和高度（注意兼容性问题）
var w = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth;
var h = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ;
document.write("当前网页可显示区域宽:" + w + "，高度：" + h);
方法
自己声明的函数也是win的方法
| 方法 | 描述 |
|---|---|
| alert() | |
| prompt(输入框提示信息,输入框默认值) | 提示框 |
| confirm(确认框提示的信息) | 确认框 |
| open(待打开的网页,窗口名,‘height=400,width=400,top=10,…’) | 打开网页 |
| close() | 关闭当前网页 |
| scrollBy(x,y) | 控制当前可视窗口的滚动 |
| scrollTo(x,y) | 控制当前可视窗口的滚动 |
例1
<script type="text/javascript">
window.alert(123)
var a = prompt("你叫什么名字")
console.log(a)
var a = confirm("你冲钱么")
console.log(a)
function fn(){
var a = confirm("你冲钱么？")
if(a){
alert("欢迎尊贵的会员")
}else{
fn()
}
}
fn()
var res = null;
// 给documen绑定事件,点击打开新的页面
document.onclick = function(){
res = window.open('http://www.baidu.com', 'hello', 'height=400,width=400,top=100,left=200')
}
// 关闭当前窗口
var a = confirm("确认关闭此页面么")
if(a){
res.close()
}
</script>
例2:控制当前页面的滚动(一定得有滚动条)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function scrollWindow() {
//滚动到距离左边,顶部各100像素的位置
window.scrollBy(100, 100);
window.scrollTo(100, 100);
// 以对象的形式入参
window.scrollTo({
// left: 100,
top: 100,
behavior: 'smooth' // 平滑滚动
})
}
</script>
</head>
<body>
<input type="button" onclick="scrollWindow()" value="滚动条" />
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
window内置子对象
history对象[了解]：
该对象包含浏览器访问过的url。
属性：
| 名称 | 作用 |
|---|---|
| history.length | 返回当前窗口历史记录的数量 |
方法：
| 名称 | 作用 |
|---|---|
| history.forward() | 前进，需要后退一下之后，才有前进的方向 |
| history.go(num) | 参数为正，前进相应的数目，为负，后退相应的数目，为0，刷新 |
| history.back() | 后退，加载前一个url。 |
例1:history.length输出
// 输出浏览过的历史长度
console.log(history.length);
例2:编写a.html在其中添加超链跳到b.html.
a.html
<body>
<a href="./b.html">点我跳转</a>
<br />
<input type="button" value="goForward" onclick="goForward()">
<script>
function goForward(){
window.history.forward();
}
</script>
</body>
b.html
<body>
<input type="button" value="goBack" onclick="goBack()">
</body>
<script>
function goBack(){
window.history.back(); //点我返回
}
var len = window.history.length; // 当前窗口浏览总长度
console.log(len);
</script>
location对象[掌握]
包含当前url的相关信息，而history对象不能具体反映url的相关信息。
| 属性 | 作用 |
|---|---|
| location.href | 设置或返回完整的url |
| location.search | 返回url?后面的查询部分(参数) |
| location.hash | 是一个可读写的字符串，是url的锚部分（从#开始的部分） |
| location.reload(bool) | 刷新页面的方法，传递一个true，表示从浏览器加载 |
| location.assign(url) | 跳转到指定目录 |
| location.replace(url) | 修改当前的地址,且不能后退 |
例:
<input type="button" value="获取网址" onclick="getUrl();" />
<input type="button" value="跳转网址" onclick="goUrl();"/>
<input type="button" value="刷新网页" onclick="shuaXin();" />
<script>
// 创建获取网址方法
function getUrl(){
console.log(location.href);
}
// 创建跳转网址方法
function goUrl()
{
// location.href = 'http://baidu.com'; // 跳转百度
location.href = './1-延时器和定时器.html';
}
// 创建刷新网址方法
function shuaXin(){
location.reload();
}
</script>
多学一招:
在第一个#后面出现的任何字符，都会被浏览器解读为位置标识符。这意味着，这些字符都不会被发送到服务器端。
比如，下面URL的原意是指定一个颜色值：
http://www.example.com/?color=#fff
JD秒杀的页面,点击不同商品,#后数字不同
https://miaosha.jd.com/#11782112078
onload 事件
window.onload = function // 当html都加载完成,才执行里面的js
// 当文档加载完成后执行一些操作
window.onload = function(){
console.log("页面加载完成")
}
图片加载获取src时的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>谁先出来哈哈</title>
<script>
// 必须使用onload才能获取到图片地址
// 与执行顺序有关
window.onload = function(){
var img = document.querySelector('img');
console.log(img.src)
}
</script>
</head>
<body>
<img src="https://img11.360buyimg.com/n8/jfs/t1/45887/8/5561/569642/5d3568dbEadc7afc3/6f4cbfe082807cba.jpg">
</body>
</html>
一般是控制资源的获取,必须是加载完成才能获取.就要使用onload
窗口事件[掌握]
onscroll滚动事件
例1:在页面中填充内容,出现滚动条时
<body style="height: 1000px;">
window.onscroll = function(){
console.log(1) //当页面发生滚动时，打印1
}
滚动条位置获取
页面滚动条距离顶部的距离
document.documentElement.scrollTop
document.body.scrollTop (兼容写法)
页面滚动条距离左边的距离
document.documentElement.scrollLeft
document.body.scrollLeft (兼容写法)
综合的写法
// 工作中兼容的写法
// || 两侧表达式谁存在使用谁,两侧都存在使用左侧的
// var a=10;
// var b=2;
// var c= b || a;
// console.log(c);
<body style="height: 1000px;width:2000px;">
window.onscroll=function(){
// console.log('我检测到了!')
// 获取滚动条距离顶部的位置,一定写在滚动条事件中
var top = document.documentElement.scrollTop || document.body.scrollTop;
console.log(top);
var left = document.documentElement.scrollLeft || document.body.scrollLeft;
console.log(left)
}
onresize窗口大小改变时触发
window.onresize = function(){
console.log(1) //当窗口大小发生改变时，打印1
}
练习
广告弹出框（自动关闭）
页面加载完成之后，自动打开一个广告弹出框，10秒中之后自动关闭，关闭之前，在这个弹出框中有至少两个功能.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#box{
width: 200px;
height: 200px;
border:1px red solid;
position: absolute;
right: 0px;
bottom:0px;
background:#ccc;
display: none;
}
</style>
<body>
<div id="box">
<input type="button" value="X" id="btn">
</div>
<script>
// 目标:在右下角弹出一个框,可以点击关闭
// 1 指定页面加载完成后,显示
window.onload = function(){
// 2 获取box节点
var boxObj = document.getElementById('box');
// 3 设置css属性显示广告框
// style用于css样式的设置
boxObj.style.display = 'block';
//4 给btn绑定点击事件,可以关闭广告框
var btnObj = document.getElementById('btn');
btnObj.onclick = function(){
// 5 再次设置广告框的css属性
// boxObj.style.display='none';
// 重新定向网址,流氓软件做法
location.href = 'http://jd.com/';
}
// 使用延时器,十秒之后关闭
setTimeout(function(){
boxObj.style.display='none';
},10000);
}
</script>
</body>
</html>
DOM的概念和作用[掌握]
1 DOM简介与作用
DOM是英文Document Object Model的首字母缩写（文档对象模型）
使javascript有能力操作HTML文档（获取HTML标记元素，添加HTML标记元素，删除HTML标记元素等）
2. DOM的分类
核心 DOM
-
提供了操作HTML元素的属性和方法
-
遍历DOM树、添加新节点、删除节点、修改节点
HTML DOM
-
提供了查找改变HTML元素的属性和方法
以一种简便的方法访问DOM树
CSS DOM
- 提供了操作CSS的属性和方法
事件 DOM
事件对象模型（如：onclick.....）
3 DOM的树形结构（节点树）
在DOM中，文档的层次结构被表示为树形结构。
树是倒立的，树根在上，树叶在下面，树的节点表示文档中的内容。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QW4YwuMK-1662463971277)(/1560569155700.png)]
4 节点关系
根节点：一个HTML文档只有一个根，它就是HTML节点。
子节点：某一个节点的下级节点。
父节点：某一个节点的上级节点。
兄弟节点：两个子节点同属于一个父节点。
节点的分类
【属性节点（attribute）】，指定是HTML标签的属性
<input name="user" value="张三" id="name" type="text" class="us" goodsId='22' >
除了input本身, name,value,id等都是属性
【文本节点（text）】，指定是HTML标签的内容
<p> 春江水暖鸭先知 </p>
【空白节点】，在主流浏览器中标签和标签之间的换行会理解为一个空白节点，在IE浏览器中不会
<p> 春江水暖鸭先知 </p>
<p> 111111</p>
DOM的选择器(访问节点方法)
getElementById(id)
描 述：获取网页指定id名字的元素，返回一个对象
语 法：var obj = document.getElementById("id名称")
参 数：id名称（注：需要加引号）
返回值：对象，对象的属性就是HTML标签的属性
getElementsByTagName()
功 能：获取网站指定标签名称的元素
语 法：var obj = document.getElementsByTagName("标签名称")
参 数：标签名称（注：需要加引号）
返回值：返回一个集合（数组），集合中每个元素都是一个单独标签对象
getElementsByName()
功 能：通过标签的name值获取元素
语 法：var obj = document.getElementsByName("标签name名称")
参 数：标签的name名称（注：需要加引号）
返回值：返回值是数组，通常用来获取有name的input的值
getElementsByClassName() //通过class名获取元素，返回值是数组
功 能：通过class名获取元素
语 法：var obj = document.getElementsByClassName() ("标签的class属性名称")
参 数：标签的class属性名称（注：需要加引号）
返回值：返回值是数组
脚下留心
1.不是所有标签都有name值；
2.在低版本的浏览器中，getElementsByName和getElementsByClassName有兼容性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p id="poem"> 假如生活不够慷慨,降至以普通的生 </p>
<p class="str">何必报之以猥琐的活</p>
<p class="str">因为总要走向远方</p>
<div>走向远方是为了让生命更辉煌</div>
<div>如果选择了停下,生活就会用凛冽的北风嘲笑</div>
<input type="text" name="user">
<input type="text" name="user" id="">
<script>
// 根据id获取节点对象,得到单个节点(常用)
var p1Obj = document.getElementById('poem');
// console.log(p1Obj)
// 根据class进行获取,得到的是一个结果集合(常用)
// 集合的操作方法和数组一样
var p2Obj = document.getElementsByClassName('str');
// console.log(p2Obj);
// console.log(p2Obj[1]);
// 根据标签的名称获取,得到的是一个结果集合
// 集合下标也是从0开始
var div1Obj = document.getElementsByTagName('div');
// console.log(div1Obj);
// console.log(div1Obj[0]);
//总结:使用class和标签获取,不管页面中有几个元素,得到的都是集合
// 想要操作那个元素,就要按照下标取出
// 根据name获取,返回节点列表,和数组的操作一样(根本不用)
var input1Obj = document.getElementsByName('user');
console.log(input1Obj)
console.log(input1Obj[0])
</script>
</body>
</html>
多学一招:
ES5选择器：强大到超乎想象，支持IE8+。ECMAScript借鉴了jQuery选择器的
document.querySelector(); //返回匹配到的第一个元素
document.querySelectorAll(); //返回一个数组，哪怕只有一个元素
可以直接填写,我们需要找的标签名,类名,id名称
例:
// 根据class进行获取,要写.
// 页面有多个符合条件的,默认只获取第一个
var classObj = document.querySelector('.str');
// console.log(classObj)
// 根据标签名称进行获取
var divObj = document.querySelector('div');
// console.log(divObj)
// querySelectorAll() 返回节点集合
// 只有一个符合条件的也返回集合
var class1Obj = document.querySelectorAll('.str');
// console.log(class1Obj);
// 输出第一个节点
// console.log(class1Obj[0]);
// 根据id进行获取,返回的也是集合
var id1Obj = document.querySelectorAll('#poem');
var ps=document.querySelector("[name=password]");
console.log(id1Obj)
console.log(id1Obj[0])
表单操作
所有的表单元素都是表单elements属性(元素集合)中包含的一个值.
注意:表单元素上,一定要添加name值
<body>
<form action="" method="post" name="form2" >
<input type="text" name="pwd" id="" value="" />
<input type="text" name="user" id="" value="" />
<input type="button" onclick="fn()" value=" 提交" />
</form>
<script type="text/javascript">
function fn(){
let forms = document.querySelector('form')
console.log(forms.elements['user']);
}
</script>
练习与作业
1.顶部悬浮-----使用js模拟position:fixed
<style type="text/css">
body{
height: 3000px;
}
.top{
position: absolute;
line-height: 30px;
padding: 0 10px;
background: #ccc;
left: 0;top:100px;
}
</style>
</head>
<body>
<h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1><h1>一级标题</h1>
<div class="top">回到顶部</div>
</body>
var obox = document.querySelector(".top");
// 提前回去元素初始的top值
var oldT = 100;
// 滚动时元素固定在屏幕
// 1.绑定事件
window.onscroll = function(){
// 2.获取滚动的距离
var t = document.documentElement.scrollTop;
// 3.计算top,设置回去
obox.style.top = t+oldT + "px";
}
缓慢回到顶部
var timer;
// 1.绑定事件
obox.onclick = function(){
// 2.开启之前先清除
clearInterval(timer);
// 3.正式开启计时器
timer = setInterval(function(){
// 4.先获取滚动的距离
var t = document.documentElement.scrollTop;
// 5.不断判断是否到顶
if(t <= 0){
// 6.到顶就停下
clearInterval(timer)
}else{
// 7.没到顶就向上滚动
document.documentElement.scrollTop = t-20;
}
},30)
}
h1>
一级标题
一级标题
回到顶部
var obox = document.querySelector(“.top”);
// 提前回去元素初始的top值
var oldT = 100;
// 滚动时元素固定在屏幕
// 1.绑定事件
window.onscroll = function(){
// 2.获取滚动的距离
var t = document.documentElement.scrollTop;
// 3.计算top,设置回去
obox.style.top = t+oldT + "px";
}
缓慢回到顶部
var timer;
// 1.绑定事件
obox.onclick = function(){
// 2.开启之前先清除
clearInterval(timer);
// 3.正式开启计时器
timer = setInterval(function(){
// 4.先获取滚动的距离
var t = document.documentElement.scrollTop;
// 5.不断判断是否到顶
if(t <= 0){
// 6.到顶就停下
clearInterval(timer)
}else{
// 7.没到顶就向上滚动
document.documentElement.scrollTop = t-20;
}
},30)
}
411
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
