目录
浏览器地址栏
在 window 下有一个成员叫做 location 里面存储的都是和地址栏相关的内容;
-
href
window.location.href
// 当前页面的地址栏完整信息
window.location.href = '地址'
// 把当前地址栏的地址修改
-
reload( )
window.location.reload()
// 把当前页面重新加载一遍
浏览器历史记录
window 下有一个成员 叫做 history,里面存储的都是和历史记录相关的信息;
-
历史回退
window.history.back()
// 回到上一个历史页面
// 前提是从上一个跳转过来
-
历史前进
window.history.forward()
// 去到下一个页面
// 前提是从前一个回退回来后
-
历史跳转
window.history.go(数字)
// 正整数 => 历史前进
// 0 => 重新打开当前页面
// 负整数 => 历史回退
浏览器的标签页
-
新开标签页
window.open('地址')
// 新开标签页,打开地址
-
关闭当前标签页
window.close()
// 关闭当前标签页
浏览器的常见事件
-
onload
window.onload = function () {}
// 当 js 代码书写在 head 内,还需操作页面元素的时候,需要写一个 window.onload 事件
-
onresize
window.onresize = function () {}
// 当页面可视窗口尺寸改变的时候触发
-
onscroll
window.onscroll = function () {}
// 当浏览器的滚动条滚动的时候触发
浏览器卷去的尺寸
-
卷去的高度
document.documentElement.scrollTop
// 当页面有 DOCUTYPE 标签的时候使用
document.body.scrollTop
// 当页面没有 DOCUTYPE 标签的时候使用
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
// 短路表达式 兼容
-
卷去的宽度
document.documenElement.scrollLeft
// 当页面有 DOCTYPE 标签的时候使用
document.body.scrollLeft
// 当页面没有 DOCTYPE 标签的时候使用
浏览器滚动到
-
scrollTo()
// 1. 传递数字,必须是两个参数;x 设置卷去的宽度, y 设置卷去的高度;只能瞬间定位
window.scrollTo(x, y)
// 2. 传递对象数据类型;可以只写一个参数,第三个参数可以实现平滑定位
window.scrollTo({
top: yyy,
left: xxx,
behavior: 'smooth'
})
认识 DOM
Document Object Model 文档对象类型,一整套操作文档流的属性和方法;
获取元素
-
id 直接使用
- 给元素标签设置一个 id 属性
- id 名是一个天生的变量,可以在 js 内直接使用
- 表示的是这个标签元素
- 不推荐使用
-
html, head, body(非常规标签)
// html 标签
document.documentElement
// head 标签
documen.head
// body 标签
document.body
-
根据 id 获取元素
document.getElementById('id名称')
// 有 id 对于的属性,就是这个元素;没有,就是 null
-
根据类名获取
document.getElementsByClassName('类名')
// 有多少个,放在伪数组内返回;没有,返回一个空伪数组
-
根据标签名获取
document.getElementsByTagName('标签名')
// 返回伪数组
-
根据 name 属性来获取
document.getElementsByName('name属性')
// 返回一个伪数组
-
根据选择器获取一个元素
document.querySelector('选择器')
// 如果有,只返回第一个;如果没有,返回 null;只能获取一个
-
根据选择器获取一组元素
document.querySelectorAll('选择器')
// 获取全部满足条件元素,返回一个伪数组
操作元素内容
-
innerText
var ele = document.querySelector('div')
ele.innerText
// ele 元素内的所有文本内容
-
innerHTML
var ele = document.querySelector('div')
ele.innerHTML
// 可以解析标签
-
value
var inp = document.querySelector('input')
inp.value
// 表单元素的 value 值
模板字符串
- 反引号定义的字符串,可以换行书写
- 可以直接在字符串里面解析变量 ${变量}
var age = 28
var str = `我今年${ age }岁了`
console.log(str)
// => 我今年28岁了
操作原生属性
// 读
var box = document.querySelect('div')
console.log(box.id)
// 写
box.id = 'container'
操作自定义属性
// 获取 box 元素的 hello 属性值
var res = box.getAttribute('hello')
// 设置 box 元素的属性为 200
box.setAttribute('hello', 200)
// 删除元素的自定义属性
box.removeAttribute('hello')
操作H5自定义属性
- 元素身上有一个叫做 dataset 的成员
- 类似对象数据类型
- 里面存储所有所有以 data- 开头的 H5 自定义属性
var box = document.querySelector('.box')
console.log(box.dataset)
// => DOMStringMap {id: 'box2', a: '100'}
console.log(box.dataset.a)
// => 100
操作元素样式
-
设置元素的行内样式
// 带有中划线的名字,改为 驼峰 或者 数组关联语法
var box = document.getElementsByTagName('div')
box.style.color = 'skyblue'
-
获取元素的行内样式(只能获取到行内样式)
console.log(box.style.height)
console.log(box.style.fontSize)
console.log(box.style['font-size'])
-
获取元素非行内样式(可以获取行内样式也可以获取非行内样式)
// 带有中划线的名字,改为驼峰或者数组关联语法
var box = document.getElementsByTagName('div')[0]
// 标准浏览器
var res = window.getComputedStyle(box).width
var res1 = window.getComputedStyle(box)['background-color']
var res2 = window.getComputedStyle(box).backgroundColor
console.log(res, res1, res2)
// => 100px rgb(255, 192, 203) rgb(255, 192, 203)
操作元素类名
-
className
// 获取类名,获取这个元素的所有类名,是一个字符串形式
console.log(ele.className)
// 设置类名
ele.className = 'container'
// 追加类名
ele.className += ' container'
-
classList
// 获取类名,是一个类似数组的集合,里面记录了所有的类名
console.log(ele.classList)
// 添加一个类名
ele.classList.add('container')
// 删除一个类名
ele.classList.remove('container')
// 切换一个类名,有就删除,没有就添加
ele.classList.toggle('container')
获取元素尺寸
-
offsetWidth 和 offsetHeight
- 元素.offsetWidth
- 元素.offsetHeight
- 该元素的 内容+ padding + border 区域的尺寸
- 不管盒子模型是什么,都是 内容 + padding + border
- 当元素 display:none ,拿不到尺寸
-
clientWidth 和 clientHeight
- 元素.clientWidth
- 元素.clientHeight
- 该元素的 内容 + padding 区域的尺寸
- 当元素 display:none ,拿不到尺寸
获取元素偏移量
-
offsetLeft 和 offsetTop
- 元素.offsetLeft
- 元素.offsetTop
- 该元素相对于参考元素左边和上边的距离
- 参考定位父级
获取窗口尺寸
-
DOM 级别获取
document.documentElement.clientWidth
document.documentElement.clientHeight
// 可是窗口的宽度和高度,不包含滚动条的尺寸
window.innerWidth
window.innerHeight
// BOM 级别,包含滚动条的尺寸
DOM 节点的操作
在一个页面内,所有内容都是一个一个节点,document、元素节点(标签)、文本节点(文本内容)、注释节点(注释内容)、属性节点(不作为独立节点出现);节点操作:对节点的增删改查;
获取节点
-
childNodes
父节点.childNodes
// 是一个伪数组,内部包含该父节点下的所有子一级节点
-
children
父节点.children
// 是一个伪数组,内部包含该父节点下的所有子一级 元素 节点
-
firstChild
父节点.firstChild
// 该父节点下的第一个子节点
-
firstElementChild
父节点.firstElementChild
// 该父节点下的第一个子 元素 节点
-
lastChild
父节点.lastChild
// 该父节点下的最后一个子节点
-
lastElementChild
父节点.lastElementChild
// 该父节点下的最后一个子 元素 节点
-
previousSibling
节点.previousSibling
// 该节点的上一个兄弟节点
-
previousElementSibling
节点.previousElementSibling
// 该节点的上一个兄弟 元素 节点
-
nextSibling
节点.nextSibling
// 该节点的下一个兄弟节点
-
nextElementSibling
节点.nextElementSibling
// 该节点的下一个兄弟 元素 节点
-
parentNode
节点.parentNode
// 该节点的父节点,一般为元素节点
-
parentElement
节点.parentElement
// 该节点的父 元素 节点
-
attributes
节点.attributes
// 类似于数组的数据结构,里面包含该元素的所有属性节点