视频地址：【千锋前端JavaScript全套教程_JS零基础完美入门到项目实战】 https://www.bilibili.com/video/BV1W54y1J7Ed/?share_source=copy_web&vd_source=b1cb921b73fe3808550eaf2224d1c155
目录
7.1.1 获取浏览器窗口尺寸 innerwidth innerheight
7.1.2 浏览器的弹出层 alert confirm prompt
7、JavaScript的BOM和DOM操作
7.1 JavaScript的BOM操作
BOM Browser Object Model
一整套操作浏览器相关内容的属性和方法
操作浏览器历史记录
操作浏览器滚动条
操作浏览器页面跳转
操作浏览器标签页的开启和关闭
等等
7.1.1 获取浏览器窗口尺寸 innerwidth innerheight
获取可视窗口宽度：window.innerwidth
获取可视窗口高度：window.innerheight
7.1.2 浏览器的弹出层 alert confirm prompt
提示框：window.alert('提示信息')
询问框：window.confirm('提示信息') 有确定和取消按钮
输入框：window.prompt('提示信息') 有确定和取消按钮，且有文本输入框，点击确定，console输出输入的内容，点击取消，console输出null
7.1.3 开启和关闭标签页 open close
开启：window.open('地址')
关闭：window.close( )
开启：打开一个新网页
关闭：关闭当前显示按钮的网页
<body>
<button id = 'on'>开启</button>
<button id = 'off'>关闭</button>
<script>
on.onclick = function () {
window.open('http://www.baidu.com')
}
off.onclick = function () {
window.close( )
}
</script>
</body>7.1.4 浏览器常见事件
资源加载完毕：window.onload = function () {}
可视尺寸改变：window.onresize = function () {}
滚动条位置改变：window.onscroll = function () {}
1、window.onload = function () {}
等到页面所有资源加载完成后执行代码
<body>
<img src="../day01 JavaScr" alt="">
<script>
// 资源加载完毕后执行下面代码
window.onload = function () {
}
</script>
</body>其他两个函数用法与资源加载代码用法一致。
7.1.5 浏览器的历史记录操作
回退页面：window.history.back() 执行时作用相当于浏览器的左箭头
前进页面：window.history.forward() 执行时作用相当于浏览器的右箭头
7.1.6 浏览器卷去的尺寸
如果页面超过浏览器范围，此时页面出现滚动条，上面超出的部分就是卷去的高度，左边超出的部分就是卷去的宽度。
7.1.6.1 卷去的高度
- document.documentElement.scrollTop
- document.body.scrollTop
区别
1、当页面有DOCTYPE标签（下面代码第一行）时，要获取卷去的高度，使用document.documentElement.scrollTop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>2、当页面没有DOCTYPE标签（下面代码第一行）时，要获取卷去的高度，使用document.body.scrollTop
使用||运算符兼容贵两个写法。
var height= document.body.scrollTop || document.documentElement.scrollTop
7.1.6.2 卷去的宽度
- document.documentElement.scrollLeft
- document.body.scrollLeft
规则与卷去的宽度一致。
7.1.7 浏览器滚动到
设置浏览器滚动条的位置。
滚动到：window.scrollTo()
参数方式1: window.scrollTo(left, top)
left: 浏览器卷去的宽度
top: 浏览器卷去的高度
作用：使滚动条瞬间定位到卷去宽度为left，卷去高度为top的位置。
参数方式2: window.scrollTo( {
left: xx,
top: yy,
behavior: 'smooth' // 表示平滑滚动
} )
left: 浏览器卷去的宽度
top: 浏览器卷去的高度
作用：使滚动条平滑滚动到卷去宽度为left，卷去高度为top的位置。
7.1.8 总结
7.2 JS的定时器
利用定时器，每间隔一段时间就修改一次标签内的文本内容，比如倒计时。
- 间隔定时器：按照指定周期（毫秒）去执行指定的代码
- 延时定时器：在固定的时间（毫秒）后执行一次代码，理解为炸弹定时器。
7.2.1 间隔定时器
语法：setInterval(函数, 时间)
函数：每次要执行的内容
时间：单位是毫秒
setInterval()指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行，直到关闭当前窗口。与setTimeout()一样，setInterval()也可以传入多个参数。
// 书写一个间隔定时器
setInterval(function () {
console.log('明天不下雨')
}, 1000)没有终点
7.2.2 延时定时器
语法：setTimeout(函数, 时间)
函数：时间到达时执行的内容
时间：单位是毫秒
函数式将要推迟执行的函数名或一段代码，时间是推迟执行的毫秒数。
// 书写一个延时定时器
console.log(1);
setTimeout(function () {
console.log('明天不下雨')
}, 1000);
console.log(2);以上代码会先输出1和2，然后等到1000毫秒输出今天不下雨。
多个参数的情况
setTimeout()的后两个参数是回调函数的参数。
// 书写一个延时定时器
console.log(1);
setTimeout(function (a, b) {
console.log(a + b)
}, 1000, 1, 1);
console.log(2);7.2.3 定时器的返回值
不区分定时器种类
表示是当前页面的 第几个 定时器
索引从1开始。以后可以用来取消这个定时器。
7.2.4 关闭定时器
语法一：clearInterval(要关闭的定时器返回值)
语法二：clearTimeout(要关闭的定时器返回值)
注意：不区分定时器种类
按照视频里说的，使用上没有区别
7.3 JS的DOM操作
DOM
Document Object Model
一整套操作文档流相关内容的属性和方法
操作 元素 修改样式
操作 元素 修改属性
操作 元素 改变位置
操作 元素 添加事件
7.3.1 获取元素的方式
7.3.1.1 根据 id 名称获取
语法： document.getElementById('Id名称')
作用：获取文档流中 id 名对应的 一个 元素
返回值：如果有 id 对应的元素，就是 这个元素；如果没有 id 对应的元素，就是null
获取id为left的元素
<body>
<div class="container" id = "left">
四号
</div>
<script>
var ele = document.getElementById('left')
console.log(ele)
</script>
</body>控制台输出
7.3.1.2 根据元素 类名 获取
语法： document.getElementsByClassName('元素类名') 这里的elements有个s，因为元素id唯一，但是一个类名可以对应多个元素
作用：获取文档流中 所有 类名对应的元素
返回值：必然是一个 伪数组
如果有 类名 对应的元素，有多少就返回多少；
如果没有 类名 对应的元素，返回空的 伪数组
伪数组，长得像数组，排列按照数组排列，但是不能使用数组的常用方法。
7.3.1.3 根据元素 标签名 获取
语法： document.getElementsByTagName('标签名') 这里的elements有个s，因为元素id唯一，但是一个标签名可以对应多个元素
作用：获取文档流中 所有 标签名对应的元素
返回值：必然是一个 伪数组
如果有 标签名 对应的元素，有多少就返回多少；
如果没有 标签名 对应的元素，返回空的 伪数组
7.3.1.4 根据 选择器 获取一个元素
语法： document.querySelector('选择器')
（选择器是css选择元素的方式，比如div、p、a、body、,box（类选择器）、#abc（id选择器）等等）
作用：获取文档流中满足选择器规则的 第一个 元素
返回值： 如果有 选择器 对应的元素，返回 第一个；
如果没有 选择器 对应的元素，返回null
7.3.1.5 根据 选择器 获取一组元素
语法： document.querySelectorAll('选择器')
作用：获取文档流中 所有 满足选择器规则的元素
返回值： 必然是一个 伪数组
如果有 选择器 对应的元素，有多少就返回多少；
如果没有 选择器 对应的元素，返回空的 伪数组
7.3.1.6 总结
7.3.2 操作元素内容
分为操作元素 文本 内容和操作元素 超文本 内容，其实就是有没有标签结构的区别。
7.3.2.1 操作元素 文本 内容
- 获取：元素.innerText
- 设置：元素.innerText = ‘新内容’
案例：按钮点击时，给div的文本设置新内容
<button>操作内容</button>
<div>
<p>
文本内容
</p>
</div>
<script>
//操作元素
//获取元素
var ele = document.querySelector('div')
var btn = document.querySelector('button')
//获取元素的文本内容
console.log(ele.innerText)
// 给 按钮 绑定点击事件
btn.onclick = function () {
ele.innerText = '新内容'
}7.3.2.2 操作元素 超文本 内容
- 获取：元素.innerHTML
- 设置：元素.innerHTML = ‘新内容’
<button>操作内容</button>
<div>
<p>
文本内容
</p>
</div>
<script>
//操作元素
//获取元素
var ele = document.querySelector('div')
var btn = document.querySelector('button')
//获取元素的文本内容
console.log(ele.innerHTML)
// 给 按钮 绑定点击事件
btn.onclick = function () {
ele.innerHTML = '<span>新内容</span>'
}注意，超文本内容是包含p在内的内容
7.3.3 操作元素属性
- 原生属性
- 标签自带的属性，比如id，src，type等等
- 获取：元素.原生属性名
- 设置：元素.原生属性名=‘属性值’
- 自定义属性
- 自己随便写的属性，在元素身上记录一些信息，没有什么特殊意义
- 获取：元素.getAttribute('属性名')
- 设置：元素.setAttribute('属性名', ‘属性值’)
- 删除：元素.removeAttribute('属性名')
7.3.3.1 原生属性的获取和设置
获取：元素.原生属性名，
设置：元素.原生属性名=‘属性值’
<button>操作属性</button>
<div id="box">div 标签</div>
<input type="passward">
<script>
// 操作属性
//获取元素
var box = document.querySelector('div')
var inp = document.querySelector('input')
var btn = document.querySelector('button')
console.log(box.id)
console.log(inp.type)
//输出元素某一个属性的值
btn.onclick = function () {
box.id = 'square'
inp.type = 'user'
}设置前的元素属性
点击按钮后，
设置后的元素属性
7.3.3.2 自定义属性的获取和设置
- 获取：元素.getAttribute('属性名')
- 设置：元素.setAttribute('属性名', ‘属性值’)
- 删除：元素.removeAttribute('属性名')
<button>操作属性</button>
<div id="box" hello="world">div 标签</div>
<!-- <input type="passward"> -->
<script>
//获取元素
var ele = document.querySelector('div')
var btn = document.querySelector('button')
// 获取自定义属性
var res = box.getAttribute('hello')
console.log(res)
//给按钮绑定点击事件
btn.onclick = function () {
box.setAttribute('hello', 'word')
box.removeAttribute('hello')
}效果
hello属性由world变成word
div标签的hello属性被删除
7.3.3.3 总结
7.3.4 操作元素类名
- 获取：元素.className
- 设置：元素.className = ‘新内容’
代码实现
<button>操作属性</button>
<div class="content">div 标签</div>
<!-- <input type="passward"> -->
<script>
//获取元素
var ele = document.querySelector('div')
var btn = document.querySelector('button')
// 获取自定义属性
console.log(ele.className)
//给按钮绑定点击事件
btn.onclick = function () {
ele.className = 'box'
}效果
div的类名由content变为box
7.3.5 操作元素行内样式
行内样式，用来写css的。
css引入方式，内部样式表（代码写在style标签内）；外部样式表（代码写在.css文件里）；行内样式，针对标签直接加style，配合JS使用。
- 获取：元素.style.样式名
- 设置：元素.style.样式名 = ‘样式值’
代码实现
<button>操作属性</button>
<div style="width:100px;height:100px;background-color:pink">div 标签</div>
<script>
//获取元素
var ele = document.querySelector('div')
var btn = document.querySelector('button')
// 获取样式
console.log(ele.style.width)
console.log(ele.style.height)
console.log(ele.style.backgroundColor) // 带中划线的样式时要转换成驼峰命名法
//给按钮绑定点击事件
btn.onclick = function () {
ele.style.width = '300px'
ele.style.height = '250px'
ele.style.backgroundColor = 'white'
}
显示样式
点击按钮，样式替换为
7.3.6 获取元素非行内样式
获取：window.getComputedStyle(元素).样式名
注意：可以获取行内样式，也可以获取非行内样式
注意：没有设置非行内样式的方法，前端JS只能设置元素的行内样式
代码实现
获取非行内样式fontSize 改为驼峰命名法
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
font-size: 20px;
}
</style>
</head>
<body>
<button>操作属性</button>
<div style="width:100px;height:100px;background-color:pink">div 标签</div>
<script>
//获取元素
var ele = document.querySelector('div')
console.log(window.getComputedStyle(ele).fontSize) // 带中划线的样式时要转换成驼峰命名法结果
7.3.7 总结
7.4 案例
7.4.1 案例1：回到顶部
7.4.1.1 确认需求
7.4.1.2 设置基本样式
<style>
* {
margin: 0;
padding: 0;
}
/* // 清除默认样式 */
/* 给body设置高度，让页面出现滚动条 */
body {
height: 3000px;
}
/* 顶部通栏的基本样式 */
.header {
width: 100px;
height: 80px;
display: flex;
background-color: skyblue;
justify-content: center;
font-size: 40px;
color: #fff;
position: fixed;
top: -80px;
left: 0;
}
/* 回到顶部按钮的基本样式 */
.goTop {
width: 50px;
height: 50px;
background-color: pink;
font-size: 20px;
text-align: center;
color: #fff;
line-height: 20px;
position: fixed;
bottom: 50px;
right: 50px;
/* 默认是隐藏的 */
display: none;
}
</style>html里写标签
<div class="header">
顶部通栏
</div>
<div class="goTop">回到顶部</div>7.4.1.3 代码逻辑
1、给浏览器绑定滚动事件，实时获取卷去的高度
2、判断卷去的高度决定隐藏还是显示
3、给回到顶部按钮绑定点击事件
首先JS代码写在script标签内。
代码
<script>
// 1、获取元素
var header = document.querySelector('.header')
var goTop = document.querySelector('.goTop')
// 2、绑定滚动事件
window.onscroll = function () {
// 2-1 实时获取浏览器卷去的高度
var height = document.documentElement.scrollTop || document.body.scrollTop
// 2-2 判断卷去的高度
if (height > 300) {
// 显示
header.style.top = '0px'
goTop.style.display = 'block'
} else {
// 隐藏
header.style.top = '-80px'
goTop.style.display = 'none'
}
}
</script>效果
浏览器卷去的高度小于临界点，顶部通栏和回到顶部按钮隐藏
浏览器卷去的高度大于临界点，顶部通栏和回到顶部按钮显示
7.4.1.4 绑定点击事件
当点击返回按钮时，滚动条滚动回到顶部
// 3、绑定点击事件
goTop.onclick = function () {
// 3.1 让页面滚动回到顶点
window.scrollTo( {
top: 0,
behavior: 'smooth'
})
}项目完成
7.4.2 案例2：全选
7.4.2.1 确认需求
7.4.2.2 布局结构
7.4.2.3 代码实现
1、把按钮放上
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100px;
padding: 20px;
border: 1px solid pink;
margin: 30px auto;
border-radius: 5px;
}
hr {
margin: 10px 0;
}
</style>
</head>
<body>
<div class="box">
全选：<input type="checkbox"><br>
<!-- br换行标签 hr 水平线标签 -->
<hr>
<input type="checkbox"> 选项一 <br>
<input type="checkbox"> 选项二 <br>
<input type="checkbox"> 选项三 <br>
<input type="checkbox"> 选项四 <br>
</div>
</body>
</html>2、代码逻辑
- 给 全选按钮 绑定点击事件
- 拿到自己的选中状态
- 给所有按钮设置选中状态
<script>
// 1.获取元素
var allBtn = document.querySelector('input')
var items = document.querySelectorAll('input:nth-child(n+2)')
// 输出看一下
// console.log(allBtn)
// console.log(items)
// 2、给全选按钮绑定点击事件
allBtn.onclick = function () {
// 2-1 拿到自己的选中状态，其实就是自己的checked属性
var type = allBtn.checked
// 输出看一下
// console.log(type)
// 2-2 把自己的选中状态赋值给每一个选项按钮的选中状态
for (var i = 0; i < items.length; i++) {
items[i].checked = type
}
}
</script>逻辑2
- 给 每一个选项按钮绑定点击事件
- 判断是不是所有的选项按钮都是选中的
- 根据判断结果给全选按钮设置选中状态
// 3 循环遍历拿到每一个选项按钮的选中状态
for (var i = 0; i < items.length; i++) {
// 3-1 给每一个按钮绑定点击事件
items[i].onclick = function () {
// 3-2 定义假设变量，假设所有按钮都是选中的
var flag = true
// 3-3 通过循环验证假设，
for (var j = 0; j < items.length; j++) {
if (items[j].checked == false) {
flag = false
break
}
}
// console.log(flag)
// 3-4 把得到的flag结果设置给全选按钮
allBtn.checked = flag
}
}需要逻辑思考。
7.4.3 案例3：选项卡
7.4.3.1 确认需求
7.4.3.2 布局结构
代码实现初始布局
<style>
* {
margin: 0;
padding: 0;
}
ul, ol, li {
list-style: none;
}
.box {
width: 600px;
height: 400px;
border: 3px solid pink;
margin: 50px auto;
display: flex;
flex-direction: column;
}
.box > ul {
height: 60px;
display: flex;
}
.box ul li {
flex: 1;
background-color: skyblue;
color: #fff;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.box ul .active {
background-color: orange;
}
.box ol {
flex: 1;
position: relative;
}
/* 显示内容的盒子 */
.box ol li {
width: 100%;
height: 100%;
background-color: purple;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 100px;
position: absolute;
left: 0;
top: 0;
display: none;
}
.box ol .active {
display: flex;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
</body>
</html> 7.4.3.3 代码逻辑
代码实现
奇怪了自己就写不对
<script>
// 1、获取元素
var bts = document.querySelectorAll('ul>li')
var tabs = document.querySelectorAll('ol>li')
// 2、绑定点击事件
bts.forEach(function (item, index) {
// for (var i = 0; i < bts.length; i++) {
item.onclick = function () {
// text[i].display = 'flex'
// 2-1 给按钮盒子和内容盒子所有内容取消active类名
// 这个forEach很神奇，没学过
bts.forEach(function (t, i) {
t.className = ''
tabs[i].className = ''
})
// 2-3 当前点击的按钮和索引对应的盒子添加active类名
item.className = 'active'
tabs[index].className = 'active'
}
})
</script>7.5 JS的DOM操作下
7.5.1 节点操作
使用JS代码实现创建节点、插入节点等等
7.5.2 创建节点 无中生有
使用JS代码创建节点，不再是页面上提前写好的，而是根本没有的内容。
语法：document.createElement('标签名称')
作用：创建一个指定标签元素
返回值：一个创建好的元素节点
var tem = document.createElement('div')
console.log(tem)7.5.3 插入节点
即创建一个节点，插入到已经存在的结构内。
语法1：父节点.appendChild(子节点)
作用：将 子节点 放在 父节点 的内部，并且放在最后的位置
<div>
<p>我是div里面的p标签</p>
</div>
<script>
// 创建一个span标签
var span = document.createElement('span')
// 向span标签内部添加文本内容
span.innerText = '我是创建出来的span标签'
// 输出一下
console.log(span)
// 获取上面的div标签
var div = document.querySelector('div')
// 将创建好的span标签插入到div标签内部
div.appendChild(span)
</script>语法2：父节点.insertBefore(要插入的子节点，哪一个子节点的前面)
作用：将 子节点 放在 父节点 的内部，并且放在指定某一个子节点的前面
7.5.4 删除节点
语法1：父节点.removeChild(子节点)
作用：从 父节点 内删除某一个 子节点
<div>
<p>我是div里面的p标签</p>
</div>
<script>
// 获取上面的div标签和p标签
var div = document.querySelector('div')
var p = document.querySelector('p')
// 从div里删除p标签
div.removeChild(p)语法2：节点.remove( )
作用：把 自己 直接删除
7.5.5 替换节点
即用一个节点把另外一个节点替换下来
语法：父节点.replaceChild(要换上的节点，要换下的节点)
作用：在 父节点 内， 使用 换上节点 替换 换下节点
7.5.6 克隆节点
即把一个节点复制一份一模一样的出来
语法：节点.cloneNode( 是否克隆后代节点)
参数选填，默认是false，表示不克隆后代节点。
作用：该节点复制一份一模一样的内容
返回值：克隆好的节点
7.5.7 获取元素尺寸
获取元素尺寸就是获取元素的宽度和高度
语法1：元素.offsetHeight 和 元素.offsetWidth
获取的内容：元素 内容 + padding + border 区域的尺寸
语法2：元素.clientHeight 和 元素.clientWidth
获取的内容：元素 内容 + padding 区域的尺寸
语法1和语法2区别在于，语法1获取的尺寸包含元素的border。
7.5.8 总结
7.6 案例 动态渲染数据
通过代码将数据渲染成一个表格显示在页面上
不一定非得是表格，可以根据需求将数据渲染成各种各样的结构
7.6.1 代码逻辑
7.6.2 代码实现
<style>
table {
width: 300px;
text-align: center;
}
</style>
</head>
<body>
<table border="1" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<!-- JS渲染 -->
</tbody>
</table>
<script>
// 提前准备好的数据
var users = [
{id: 1, name: '张玉瑶', age: 18},
{id: 2, name: '瑶瑶', age: 18},
{id: 3, name: '舀子头', age: 18},
]
var tbody = document.querySelector('tbody')
// 2、循环遍历users数组，
users.forEach(function(item){
// 3.每循环一次生成一个tr标签
console.log(item)
var tr = document.createElement('tr')
// 4、循环遍历item
for(var key in item) {
// 5、生成td标签
var td = document.createElement('td')
td.innerHTML = item[key]
// 6、生成的td插入到tr内
tr.appendChild(td)
}
// 7、把tr插入到tbody内
tbody.appendChild(tr)
})
</script>效果
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
