BOM是什么?
Browser Object Model 浏览器对象模型 浏览器操作内容都是在对象的方法操作,也就操作浏览器的能力
顶级对象是 window
在全局中定义的变量其实就是在window身上作为属性,this、top、name等属性都是指向window的
获取浏览器窗口的尺寸
innerHeight 获取浏览器窗口的高度(包含滚动条)
innerWidth 获取浏览器窗口的宽度(包含滚动条)
使用:
window.innerHeight
window.innerWidth
浏览器的弹出层
1. alert() 提示弹框 没有返回值
2. confirm() 询问弹窗
返回值:确认--true、取消--false
3. prompt() 提示输入弹窗
返回值:取消返回null
确定返回输入的内容,不写返回空字符串
浏览器的地址信息
location对象表示用来存储浏览器地址栏内的信息的
1. location.href
浏览器访问的完整路径 会将地址中的中文转为url中的编码格式
也可以实现浏览器跳转到指定url地址
2. location.reload() 重新加载页面 不要写在全局中 会导致一直刷新
3. location中的其他属性
hash 地址中#后面的字符串
host 访问地址主机的地址
search ?后面的内容
浏览器的历史记录
history对象表示用来存储历史记录信息的
history对象中的length属性,1表示没有历史记录
1. history.back() 回到历史记录的上一个页面 如果没有不会回退
2. history.forward() 去到下一个页面 前提有过回退操作不然当前为最后一个页面 不生效
3. history.go(参数) 去到历史记录中指定的页面
history.go(-1); 相当于history.forward()
history.go(1); 相当于history.back()
浏览器的版本信息
navigator对象表示用来获取浏览器信息的
1. navigator.userAgent 获取浏览器整体信息
2. navigator.appName 获取浏览器的名称 不一定有效
3. navigator.appVersion 获取浏览器的版本信息 不一定有效
4. navigator.platform 获取当前计算机的OS 不一定有效
浏览器事件
1. scroll 浏览器的滚动事件 当滚动条动起来的时候触发的事件
scrollTop 获取页面垂直滚动的距离
两个获取方式:
1. document.body.scrollTop 当页面没有使用DOCTYPE声明的时候可以获取到
2. document.documentElement.scrollTop 当页面有使用DOCTYPE声明的时候可以获取到
scrollLeft 获取页面水平卷去的距离
两个获取方式:
1. document.body.scrollLeft 当页面没有使用DOCTYPE声明的时候可以获取到
2. document.documentElement.scrollLeft 当页面有使用DOCTYPE声明的时候可以获取到
eg:
window.onscroll = function () {
console.log('浏览器滚动了')
console.log(document.documentElement.scrollTop)
console.log(document.documentElement.scrollLeft)
}
2. load 浏览器的页面加载事件 当浏览器的页面中的内容(页面结构、文本、图片、CSS等资源)全部加载完毕后会触发该事件
window.onload = function () {
// 这个函数会在页面加载完毕以后在执行
// 那么这个时候页面的 DOM 元素都已经加载了,我们就可以获取 div 了
// 编写函数等代码块
}
3. resize 浏览器的页面可视化窗口变化事件 当浏览器窗口大小变化的时候会触发该事件
eg:
window.onresize = function(){
console.log(window.innerWidth);
console.log(window.innerHeight);
}
定时器
JS中有两种定时器,倒计时定时器和间隔定时器 返回值返回每个定时器的标识id
定时是异步执行的
1. 倒计时定时器
作用: 在被设置的规定时间执行函数一次
语法: setTimeout(函数,时间) 时间单位为毫秒
返回值: 定时器标识id
eg:
var timerId = setTimeout(function(){
console.log("我只执行一次....");
},3000);
2. 间隔定时器
作用: 每一段时间就执行一次函数
语法: setInterval(函数,时间) 时间单位为毫秒
返回值: 定时器标识id
eg:
var timerId = setInterval(function(){
console.log("我每3秒执行一次....");
},3000);
3. 清除定时器
clearInterval(定时器标识) 关闭对应的定时器
clearTimeout(定时器标识) 关闭对应的定时器
eg:
var timerId = setInterval(function(){
console.log("我每3秒执行一次....");
},3000);
clearInterval(timerId);
var timerId = setTimeout(function () {
console.log("我只执行一次....");
}, 3000);
clearTimeout(timerId);
原则上是
- clearTimeout 关闭 setTimeout
- clearInterval 关闭 setInterval
但是其实是可以通用的,他们可以混着使用
DOM是什么?
Document Object Model 文档对象模型 操作页面中的节点,也就是操作html标签的一些能力
顶级对象是 document(浏览器内置对象,存储着用来操作元素的方法) 上一级是 window 对象
页面中的标签,我们通过JS获取到以后,就把这个对象叫做DOM对象
DOM中的获取方法
1. 通过id获取元素
语法:
document.getElementById(标签的id);
返回值:对应的标签元素,如果没有这个标签返回null
2. 通过类名获取元素
语法:
document.getElementsByClassName(类名);
返回值:对应类名的标签组成的伪数组,如果没有类名返回空的伪数组
3. 通过标签名获取元素
语法:
document.getElementsByTagName(标签名);
返回值:返回一个伪数组,里面是匹配的标签,如果没有返回空的伪数组
4. 通过name属性获取元素
语法:
document.getElementsByName(name属性值);
返回值:匹配的所有元素的一个伪数组,如果没有则返回空的伪数组
5. 通过选择器获取元素
语法:
document.querySelector(选择器); // 选择器和CSS中写法一致
返回值:匹配的第一个元素,如果没有返回null
6. 通过选择器获取元素
语法:
document.querySelectorAll(选择器);
返回值:匹配的所有元素的一个伪数组,如果没有则返回空的伪数组
DOM中的操作方法
1. 操作标签的内容
获取的对象.innerText 获取设置标签的文本 (不识别html标签)
获取的对象.innerHTML 获取设置标签的超文本 (识别html标签)
获取的对象.xxxxxxxxx = "值"; 设置会覆盖性设置
2. 操作标签属性
获取的对象.getAttribute(属性名) 获取标签的属性值
获取的对象.setAttribute(属性名,属性值) 设置标签的属性
获取的对象.removeAttribute(属性名) 移除标签的属性
3. 操作标签的CSS样式
获取的对象.style 获取到标签的所有行内样式
获取的对象.style.样式名 获取设置标签的行内样式值
4. 操作标签的类名
获取的对象.className 获取设置标签的类名
获取的对象.className = "值"; 设置会覆盖性设置
DOM节点
是什么?
DOM就是html结构中一个个节点组成,标签是一个节点,文本内容、注释、空格都是节点。
节点的分类
1. 文本节点 html中的文本内容和空格换行 通过innerText获取到的就是元素的文本节点
2. 元素节点 html标签 通过getElementBy..获取到的都是元素节点
3. 属性节点 html标签中的属性 通过getAttribute获取到的就是元素的属性节点
获取节点的方法
1. childNodes 获取某一个节点下的所有子节点
语法: 对象.childNodes
返回值:子节点的伪数组
2. children 获取元素的所有子元素节点
语法: 对象.children
返回值:子元素节点的伪数组
3. firstChild 获取元素的子节点的第一个节点
语法: 对象.firstChild
4. lastChild 获取元素的最后一个子节点
语法: 对象.lastChild
5. firstElementChild 获取元素的第一个子元素节点
语法: 对象.firstElementChild
6. lastElementChild 获取元素的最后一个子元素节点
语法: 对象.lastElementChild
7. nextSibling 获取元素的下一个兄弟节点
语法: 对象.nextSibling
8. previousSibling 获取元素的上一个兄弟节点(包含元素节点、文本节点、注释节点)
语法: 对象.previousSibling
9. nextElementSibling 获取元素的下一个兄弟元素节点
语法: 对象.nextElementSibling
10. previousElementSibling 获取元素的上一个兄弟元素节点(只包含元素节点)
语法: 对象.previousElementSibling
11. parentNode 获取元素的父节点元素
语法: 对象.parentNode
12. attributes 获取元素的所有属性节点
语法: 对象.attributes
返回值:属性节点伪数组
节点属性
1. 获取节点类型
语法:节点对象.nodeType
2. 获取节点名称
语法:节点对象.nodeName
3. 获取节点值
语法:节点对象.nodeValue
节点类型有一下四种:
1. 元素节点 用1表示
2. 属性节点 用2表示
3. 文本节点 用3表示
4. 注释节点 用8表示
节点名称
1. 元素节点的名称为 大写的标签名
2. 属性节点的名称为 属性名
3. 文本节点的名称为 #text
4. 注释节点的名称为 #comment
节点的值
1. 元素节点的值为 null
2. 属性节点的值为 属性值
3. 文本节点的值为 文本内容
4. 注释节点的值为 注释内容
操作DOM节点
1. createElement 创建一个元素节点
语法:document.createElement(标签名)
返回值:可用的DOM元素节点
2. createTextNode 创建一个文本节点
语法:document.createTextNode(内容)
返回值:返回一个文本节点
3. appendChild 向元素中添加元素
语法:元素A.appendChild(节点B) 将节点B追加到元素A里面的末尾
4. insertBefore 向元素的前面添加一个元素
语法:元素A.insertBefore(节点B,元素C) 将节点B添加到元素A里面的元素C的前面
5. removeChild 移除页面元素
语法:元素A.removeChild(元素B) 将元素A中的元素B移除
6. replaceChild 修改元素,替换元素
语法:元素A.replaceChild(节点B,节点C) 用节点B替换元素A中的节点C
7. cloneNode 克隆
语法: 元素A.cloneNode(参数) 参数默认是布尔值false ,如果是true则克隆子元素
返回值:克隆复制的元素
获取元素的样式
1. 元素对象.style.样式属性
该方法只能获取到元素行内样式(标签内的style)
2. getComputedStyle 全能获取样式方法,IE8以下不兼容
语法:window.getComputedStyle(元素,参数2).样式名 参数不写默认 null,获取元素的样式值
参数2这个位置 after/before 可以获取元素伪类的样式
3. curentStyle 可以兼容IE8一下的浏览器
语法:元素对象.curentStyle.样式
获取元素的偏移量
是什么? 就是元素在页面上的什么位置
// 获取元素的尺寸 内容宽高 + padding + border
offsetWidth 宽
offsetHeight 高
语法:元素对象.offsetWidth / 元素对象.offsetHeight
// 获取元素的偏移量
offsetLeft 获取左边的偏移量
offsetTop 获取上边的偏移量
语法:元素对象.offsetLeft / 元素对象.offsetTop
如果元素没有定位,则获取的是相对于页面的左上角(元素边框外侧到页面内侧的距离)
如果元素有定位,则获取的是相对父元素左上角的定位(元素边框外侧到定位父级边框内侧的距离(其实就是我们写的 left 和 top 值))