一、BOM
（1） 认识BOM
BOM：浏览器对象模型
JavaScript代码中访问和操作浏览器的各种信息的一系列特殊对象，包含了 浏览器窗口对象、地址信息对象、历史访问对象、版本信息对象、网页文档对象
-
窗口对象：可以操作浏览器弹窗、获取/设置浏览器尺寸、获取/设置浏览器位置等等
-
地址对象：可以操作浏览器访问
url地址，实现根据地址切换不同页面 -
历史对象：可以操作浏览器访问历史记录
-
版本对象：可以获取浏览器和当前运行浏览器的操作系统信息
-
文档对象：
DOM对象，描述了当前浏览器打开的网页文档
（2） 常见BOM对象
常见BOM对象： -
窗口对象：
windowalert() / confirm() / prompt() / 其他bom对象...
-
地址对象：
location || window.location-
href：地址url信息
-
-
历史对象：
history-
back()后退 -
forward()前进 -
go()访问某个记录
-
-
版本信息对象：
navigator-
appName：浏览器内核名称 -
appVersion：浏览器版本信息 -
userAgent：浏览器相关信息，一般和版本信息相同
-
-
文档对象：
document- 文档对象，当前浏览器打开的网页文档
-
屏幕对象：
screen- 当前计算机屏幕信息
（3） 重要属性/事件
- 当前计算机屏幕信息
-
window.innerHeight / window.innerWidth: 窗口尺寸 -
window.onload / window.onresize / window.onscroll：事件操作 -
location.href：访问地址 -
history.back() / forward() / go()：访问历史记录 -
navigator.appName / appVersion / userAgent浏览器版本信息
（4） 案例：吸顶菜单
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0; padding: 0; box-sizing: border-box;}
#nav{width: 100%;height: 50px; background:orangered; color: white;font-size: 22px; text-align:center; line-height: 50px;}
</style>
<script>
// 网页加载事件：代码写在body的前面，保障标签加载完成后执行代码
window.onload = function() {
// 获取导航条
var _nav = document.getElementById("nav")
// 滚动条事件
window.onscroll = function() {
// 获取滚动条高度
var top = document.body.scrollTop || document.documentElement.scrollTop
console.log(top, "滚动条")
// 判断滚动条位置，并设置菜单样式
if(top >= 500) {
_nav.style.position = "fixed"
_nav.style.left = 0
_nav.style.top = 0
} else {
_nav.style.position = "relative"
}
}
}
</script>
</head>
<body>
<div id="nav">页面顶部菜单</div>
<div>内容0001</div>
<div>内容0002</div>
<div>..</div>
</body>
</html>
（5） 案例：回到顶部
<script>
// 网页加载事件：代码写在body的前面，保障标签加载完成后执行代码
window.onload = function() {
// 获取导航条
var _nav = document.getElementById("nav")
// 获取回到顶部
var _backTop = document.getElementById("back-top")
// 滚动条事件
window.onscroll = function() {
// 获取滚动条高度
var top = document.body.scrollTop || document.documentElement.scrollTop
console.log(top, "滚动条")
// 判断滚动条位置，并设置菜单样式
if(top >= 500) {
_nav.style.position = "fixed"
_nav.style.left = 0
_nav.style.top = 0
// 显示回到顶部
_backTop.style.display = "block"
} else {
_nav.style.position = "relative"
_backTop.style.display = "none"
}
}
_backTop.onclick = function() {
// 设置滚动条高度0
var timer = setInterval(function() {
var top = document.documentElement.scrollTop
if(top > 0) {
document.documentElement.scrollTop -= 200
} else {
// 已经回到顶部，清除计时器
clearInterval(timer)
}
}, 10)
}
}
</script>
</head>
二、DOM
（1） 认识DOM
DOM：文档对象模型
JavaScript语法上提供的可以用于对网页文档进行标签查询、创建/修改/删除标签、操作标签属性、操作标签样式、操作标签内容的一系列函数！
（2） 查询DOM对象
网页文档对象的操作，首先通过代码查询标签对象——DOM对象
① 基础查询函数
| 函数 | 描述 |
|---|---|
document.getElementById(idVal) |
根据id属性值查询单个DOM对象 |
document.getElementsByClassName(cVal) |
根据class属性查询多个DOM对象 |
document.getElementsByTagName(tVal) |
根据标签名称查询多个DOM对象 |
document.getElementsByName(nVal) |
根据name属性查询多个DOM对象 |
document.querySelector(selector) |
根据css选择器查询第一个匹配的对象 |
document.querySelectorAll(selector) |
根据css选择器查询多个匹配的对象 |
② 查询其他标签
| 函数 | 描述 |
|---|---|
domObj.getElementById()/querySelecto().. |
查询某个标签中包含的标签对象 |
domObj.parentElement |
获取父标签对象 |
domObj.parentNode |
获取父节点对象 |
domObj.children |
获取子标签对象 |
domObj.childNodes |
获取子节点对象(包含文本节点) |
domObj.previousElementSibling |
获取上一个兄弟标签节点 |
domObj.previousSibling |
获取上一个节点(包含文本节点) |
domObj.nextElementSibling |
获取下一个兄弟标签节点 |
domObj.nextSibling |
获取下一个节点（包含文本节点） |
document.forms |
查询网页中的所有表单 |
（3） 标签对象操作
DOM操作中我们已经可以查询对应的节点：需要对节点进行增加、修改和删除的操作
| 函数 | 描述 |
|---|---|
document.createElement() |
创建标签节点 |
document.createTextElement() |
创建文本节点 |
document.appendChild() |
末尾追加一个子节点 |
document.insertBefore() |
指定标签前面增加一个节点 |
document.removeElement() |
删除一个指定节点 |
document.replaceElement() |
替换/修改一个指定节点 |
（4） 标签属性操作
| 函数 | 描述 |
|---|---|
obj.id = val |
设置id属性 |
obj.className = val |
设置class属性 |
obj.setAttribute(属性名称, 变量值) |
给标签对象设置属性名称="属性值"的属性 |
obj.getAttribute(属性名称) |
获取标签对象的属性名称对应的属性值 |
obj.removeAttribute(属性名称) |
删除标签上属性名称对应的属性 |
（5） 标签样式操作
行内样式：设置和获取
| 代码 | 描述 |
|---|---|
obj.style.样式名称 |
获取指定标签的行内样式 |
obj.style.样式名称 = 值 |
给指定标签设置/添加 行内样式 |
外联样式：非行内样式，一般操作过程中主要用于获取操作，代码中设置样式推荐/指定使用行内样式
| 代码 | 适用浏览器 | 描述 |
|---|---|---|
obj.currentStyle.样式名称 |
IE |
获取样式 |
getComputedStyle(obj).样式名称 |
非IE
|
获取样式 |
当前标签对象的特殊属性
| 属性 | 描述 |
|---|---|
obj.offsetHeight |
高度 |
obj.offsetWidth |
宽度 |
obj.offsetLeft |
离窗口左侧的距离 |
obj.offsetTop |
离窗口顶部的距 |
（6） 标签内容操作
| 代码 | 描述 |
|---|---|
obj.innerText |
获取或者设置文本内容 |
obj.innerHTML |
获取或者设置标签文本内容 |
obj.textContent |
获取或者设置文本内容，等价innerText
|
obj.createTextNode() |
创建文本节点，标准DOM操作，一般不推荐使用 |
网友评论