前端基础之BOM与DOM
BOM与DOM操作
大概了解
BOM 浏览器对象模型>>>:使用js操作浏览器
DOM 文档对象模型>>>:使用js操作前端页面
window的子对象
navigator对象（了解即可）
浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。
navigator.appName // Web浏览器全称
navigator.appVersion // Web浏览器厂商和版本的详细字符串
navigator.userAgent // 客户端绝大部分信息
navigator.platform // 浏览器运行所在的操作系统
screen对象（了解即可）
屏幕对象，不常用。
一些属性：
- screen.availWidth - 可用的屏幕宽度
- screen.availHeight - 可用的屏幕高度
history对象（了解即可）
window.history 对象包含浏览器的历史。
浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。
history.forward() // 前进一页
history.back() // 后退一页
location对象
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
常用属性和方法：
location.href 获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面
弹出框
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
语法：
alert("你看到了吗？");
确认框（了解即可）
确认框用于使用户可以验证或者接受某些信息。
当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
语法：
confirm("你确定吗？")
提示框（了解即可）
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
语法：
prompt("请在下方输入","你的答案")
计时相关
通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
setTimeout()
语法：
var t=setTimeout("JS语句",毫秒)
setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数（1000 毫秒等于一秒）。
clearTimeout()
语法：
clearTimeout(setTimeout_variable)
举个例子：
// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);
setInterval()
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法：
setInterval("JS语句",时间间隔)
返回值
一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。
clearInterval()
clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
语法：
clearInterval(setinterval返回的ID值)
举个例子：
// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);
BOM操作总结
window.open() - 打开新窗口
window.close() - 关闭当前窗口
history.forward() // 前进一页
history.back() // 后退一页
location.href 获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面
setTimeout()
clearTimeout()
setInterval()
clearInterval()
DOM操作
查找标签
前缀关键字>>>:document
# 基本查找(核心)
document.getElementById 根据ID获取一个标签
document.getElementsByClassName 根据class属性获取
document.getElementsByTagName 根据标签名获取标签合集
"""
如果我们的js代码需要页面上某个标签加载完毕
那么该js代码应该写在body内部最下方或者引入外部js文件
"""
# 间接查找(重要)
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
列子
<body>
<div id="d1"></div>
<p class="c1"></p>
<script>
var res = document.getElementById('d1')
console.log(res)
var res1 = document.getElementsByClassName('c1')
console.log(res1)
</script>
</body>
### 效果如下图:
节点操作
| 方法 | 说明 |
|---|---|
| getElementById | 获取带有指定id的节点 |
| getElementsByTagName() | 获取带有指定标签名的节点集合 |
| getElementsByClassName() | 获取带有指定类名的节点集合 |
| querySelector() | 获取指定选择器或选择器组匹配的第一个节点 |
| querySelectorAll() | 获取指定选择器或选择器组匹配的所有节点集合 |
创建节点
语法：
createElement(标签名)
示例:
var aEle = document.createElement('a');
属性节点
var aEle = document.createElement('a'); # 创建标签
aEle.setAttribute('href','https://www.mmzztt.com/') # 设置属性
aEle.innerText = '好不好看?' # 设置内容文本
document.getElementsByTagName('p')[0].appendChild(aEle) # 动态添加
"""一定要明确当前手上是什么对象"""
imgEle.getAttribute('title') # 获取标签属性
#获取文本节点的值：
var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML
#设置文本节点的值：
var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"
节点写入
当我们需要更改一个标签的文字或内容时，这时就需要了解节点写入的知识，学会节点写入可以帮助我们更加精确的控制网页内容，节点写入的方式有很多种，这里介绍常用的几种方法：
| 方法 | 说明 |
|---|---|
| innerHTML | 返回元素中的 html 内容，通过赋值，可设置元素中的 html 内容 |
| innerText | 返回元素中的文本内容，通过赋值，可设置元素中的文本内容 |
| document.write() | 将 html 字符串写入到文档中 |
节点写入示例
innerHTML
<!--在 div 中写入 h1 标签,如果原来div中有内容会被覆盖-->
<body>
<div></div>
</body>
<script>
document.querySelector('div').innerHTML = '<h1>我是新内容</h1>'
</script>
innerText
<body>
<div></div>
</body>
<script>
document.querySelector('div').innerText = '<h1>我是新内容</h1>'
</script>
document.write()
document.write('我是新内容')
document.write('<h1>我是新内容</h1>')
JS 复制 全屏
和 innerHTML 类似，写入内容如果包含 html 标签字符串，会被解析成对应的 html 标签，document.write()根据运行时机，会写入文档不同的位置
注意
'''
innerText
不加赋值符号是获取内部文本
加了赋值符号是设置内置文本
# 不可以识别HTML标签
innerHTML
不加赋值符号是获取内部标签+文本
加了赋值符号是设置内置标签+文本
# 可以识别HTML标签
'''
删除节点
语法：
获得要删除的元素，通过父元素调用该方法删除。
somenode.removeChild(要删除的节点)
替换节点
语法：
somenode.replaceChild(newnode, 某个节点);
attribute操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."
获取值操作
# 普通的文本数据获取
标签对象.value
# 特殊的文件数据获取
标签对象.value '''仅仅获取一个文件地址而已'''
标签对象.files[0] '''获取单个文件数据'''
标签对象.files '''获取所有文件数据'''
class操作
classList 查看所有的类
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加
例子
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
width: 400px;
height: 400px;
border-radius: 50%;
}
.c2 {
background-color: red;
}
.c3 {
background-color: greenyellow;
}
</style>
</head>
<body>
<p>恍恍惚惚一个上午又过去了 是否有所收货</p>
<div id="d1" class="c1 c2 c3"></div>
</body>
指定CSS操作
obj.style.backgroundColor="red"
JS操作CSS属性的规律：
1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
事件
事件定义
- 用户与浏览器交互的方法，规定了浏览器在什么时刻执行什么事情
- 事件举例：鼠标单击，双击，键盘输入，页面或图像载入
事件三要素
- 事件源：谁触发的，一般指某个元素节点
- 事件：怎么触发的
- 事件处理程序：触发后发生了什么事情
内置参数this
# this指代的就是当前被操作对象本身
在事件的函数体代码内部使用
btnEle.onclick = function () {
alert(456)
console.log(this)
}
事件绑定
事件绑定就是事件源与事件绑定之后，才能触发对应事件
三种绑定方式
- 事件属性赋值
var btn = document.querySelector('button');
btn.onclick = function() { alert('事件属性赋值') }
- 行内事件属性赋值
<button onclick="alert('行内事件属性赋值')">点击按钮</button>
- 事件监听
格式：addEventListener(type, listener, useCapture)
type：事件类型
listener: 监听器（处理程序）
useCapture: 默认为 false，设置为 true 时，不会因冒泡触发监听器
const btn = document.querySelector('button');
btn.addEventListener('click', function() { alert('事件监听') })
事件属性赋值和事件监听区别
- 事件属性多次赋值，只会执行最后一次事件处理程序；事件监听可以添加多个监听器，执行多个事件处理程序；
- 事件属性赋值兼容 IE8 及以下浏览器，而事件监听最低兼容到 IE9 浏览器
常用鼠标事件
| 方法 | 说明 |
|---|---|
| click | 单击鼠标左键触发。焦点在按钮并按了 Enter 键时，也会触发 |
| contextmenu | 右键点击（右键菜单显示前触发） |
| dblclick | 双击左键触发 |
| mouseenter | 指针移至元素范围内触发一次 |
| mouseleave | 指针移出元素范围外触发一次 |
| mouseover | 指针移至元素或其子元素内，可能触发多次 |
| mouseout | 指针移出元素，或者移至其子元素内，可能触发多次 |
鼠标及键盘事件
事件处理程序中的 this 指代当前操作元素
var btn = document.querySelector('button')
btn.addEventListener('mouseenter', function() { // 鼠标移入文字为红色
this.style.color = 'red' })
btn.addEventListener('click', function() { // 鼠标单击文字为蓝色
this.style.color = 'blue' })
btn.addEventListener('mouseleave', function() { // 鼠标移出文字为黑色
this.style.color = 'black' })
常用键盘事件
| 方法 | 说明 |
|---|---|
| keydown | 按下任意按键，按住可连续触发 |
| keypress | 按下按键（包括字母，文字和 Enter）触发，按住可连续触发，不能监听一些特殊按键（ALT、CTRL、SHIFT、ESC、方向键等） |
| keyup | 释放任意按键 |
ps：键盘事件经常用于表单元素中，如：input 输入框
示例
<script>
var input = document.querySelector('input')
input.addEventListener('keydown', function() {
console.log(this.value) // 获取上一次输入值
})
input.addEventListener('keypress', function() {
console.log(this.value) // 获取上一次输入值
})
input.addEventListener('keyup', function() {
console.log(this.value) // 获取当前输入值
})
</script>
- 使用时注意触发顺序（
keydown->keypress->keyup），不同的键盘事件触发时机不 同，返回的结果有区别
常用键盘事件属性
使用键盘事件属性可以精确的控制键盘操作，如：回车触发，方向键触发
| 方法 | 说明 |
|---|---|
| keyCode | keyCode 属性返回 keypress 事件触发的键的值的字符代码，或者keydown 或 keyup 事件的键盘代码 |
- 字符代码：表示 ASCII 字符的数字
- 键盘代码：表示键盘上真实键的数字
| 方法 | 说明 |
|---|---|
| charCode | 返回 keypress 事件触发时按下的字符键的字符 Unicode 值，用于用于 keydown 或 keyup 时总是返回 0 |
| key | 返回按键的标识符(字母区分大小写)。keypress，keyup，keydown |
示例
// 以输入 a 为例，分别查看三种事件返回结果
var input = document.querySelector('input') //a
input.addEventListener('keydown', function(event) {
console.log(event.keyCode) // 65
console.log(event.charCode) // 0
console.log(event.key) // a
})
input.addEventListener('keypress', function(event) {
console.log(event.keyCode) // 97
console.log(event.charCode) // 97
console.log(event.key) // a
})
input.addEventListener('keyup', function(event) {
console.log(event.keyCode) // 65
console.log(event.charCode) // 0
console.log(event.key) // a
})
可以看到，三种事件中，只有 key 属性返回的结果保持统一，如果不考虑 IE8 以下浏览器兼容性，推荐使用 key 来代替 keyCode 和 charCode
窗口事件
窗口事件在浏览器窗口发生变化时触发，其中包括窗口大小更改，加载窗口，关闭窗口，窗口滚动等，掌握如何处理窗口事件可以帮助我们实现更加丰富的交互效果；
常用窗口事件
| 方法 | 说明 |
|---|---|
| load | 当整个页面及所有依赖资源（如样式表和图片）都已完成加载时，将触发load事件 |
| beforeunload | window、document 和它们的资源即将卸载时触发。当事件属性returnValue 被赋值为非空字符串时，会弹出一个对话框，让用户确认是否离开页面。否则，事件被静默处理。一些浏览器实现仅在框架或内置框架接收到用户手势或交互时才显示对话框 |
| resize | 窗口大小改变时触发 |
| scroll | 元素内发生滚动时触发 |
load事件示例
<script>
/* 输出 div 中文字内容 */
// 方式一
window.addEventListener('load', function() {
console.log(document.querySelector('.box').innerHTML) })
// 方式二
window.onload = function() {
console.log(document.querySelector('.box').innerHTML) }</script>
<div class="box">主要内容</div>
- 此处 JS 代码在元素之前，所以应该将代码放在 load 事件中，等待元素加载完成后再 获取其内容；
- 使用 onload 绑定事件时，注意一个页面不要存在多个 onload，这样会只会运行最后一个 onload 中的代码，推荐使用addEventListener 绑定事件；
beforeunload 事件代码示例
- 根据 returnValue 或 return 的值可自定义对话框信息（只对 IE 有效）
window.addEventListener("beforeunload", function (e) {
var confirmationMessage = "confirm close window ?"
//兼容 WebKit 与非 WebKit 内核浏览器
(e || window.event).returnValue = confirmationMessage
return confirmationMessage
})
resize 事件代码示例
多用于检测不同屏幕尺寸，自适应布局
/* 调整浏览器窗口时，获取可视窗口宽高 */
window.addEventListener("resize", function (e) {
console.log(window.innerWidth) // 可视窗口宽
console.log(window.innerHeight) // 可视窗口高
})
scroll 事件代码示例
常用于检测滚动条滚动距离
/* 获取滚动条垂直滚动距离 */
window.addEventListener("scroll", function () {
var scrollTop= window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop; // 兼容写法
console.log(scrollTop);
})
window.onload
当我们给页面上的元素绑定事件的时候，必须等到文档加载完毕。因为我们无法给一个不存在的元素绑定事件。
window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。
注意：.onload()函数存在覆盖现象。
