BOM
全称browser object model -->浏览器对象模型,使用由对象组成的结构操作浏览器
navigator -- 存储浏览器信息
history -- 操作浏览器的历史记录 、
history back() 后退一个页面
history forward() 前进一个页面
history go() 前进或后退多个页面 正数是前进,负数是后退,前进后退几个页面就看数字是几,0是刷新
location -- 操作地址栏url
href 设置完整的地址 -- location.href =新地址
获取完整的地址 -- location.href
search 设置地址栏参数 -- location.search=?键=值&键=值
获取地址栏参数 -- location.search
hash 设置锚点 -- location.hash=#单词
获取锚点 -- location.hash
窗口大小:
innerWidth 滚动条的宽度
innerHeight 滚动条的高度
事件
window.onload 当所有资源加载完成后,触发执行
window.onresize 当浏览器窗口大小发生改变,触发执行
window.onscroll 当浏览器卷去的距离发生改变,触发执行
BOM的方法
弹出层
alert()
confirm()
prompt()
全局定义的函数,都属于window的方法
全局定义的变量,都属于window的属性
定时器
setInterval(函数,毫秒数) 让函数每隔毫秒数,就执行一次,会不停的执行下去
setTimeout (函数,毫秒数) 让函数延迟毫秒数执行一次,就这一次
返回值都代表当前页面的第几个定时器 - 数字
停止定时器,使用返回值 clearInterval(返回值)
clearTimeout(返回值)
打开新的标签页 window.open(url)
设置卷去的距离 window.scrollTop(x,y)
关闭窗口 widow.close()
DOM
全称 -- document object model -- 文档对象模型
获取标签
document.querySelector(css选择器) -- 获取满足css选择器的第一个标签
document.querySelectorAll(css选择器) -- 获取所有满足css选择器的标签
document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
document.getElementsByName()
获取html基本结构标签
html -- document.documentElement
body -- document.body
head -- document.head
网页标题 -- document.title 可获取标题
可设置标题
获取标签名 -- 标签.tagName
操作内容
双标签 文本内容 设置 标签.innerText = 值
获取 标签.innerText
带标签的内容 设置 标签.innerHTML = 值
获取 标签.innerHTML
表单 设置 标签.value = 值
获取 标签.value
操作属性 设置属性
设置属性 标签.setAttribute(属性名,值)
获取属性 标签.setAttribute(属性名)
删除属性 标签.setremove(属性名)
样式操作 获取样式 getComputedStyle(标签) 返回由所有CSS键值对组成的对象 设置样式 标签.style.css键 = 值 设置到行内
类名操作 直接操作class属性值 标签.className = 值
标签.className
classList add() 添加一个类名
classList remove() 删除一个类名
classList contains() 判断是否有这个类名
classList toggle() 让类名在删除和添加之间切换
获取卷去的距离 有文档声明 document.documentElement.scrollTop
没有文档声明 document.body.scrollTop
万能(兼容)写法 var t=document.documentElement.scrollTop || document.body.scrollTop
document.documentElement.scrollTop = document.body.scrollTop = 数字
短路运算 使用逻辑运算符&&和||给变量进行赋值
var 变量=值1&&值2 如果左边为true,就会将右边的值赋值给变量
如果左边为false,就会将左边的值赋值给变量
var 变量=值1||值2 如果左边为true,就会将左边的值赋值给变量
如果右边为false,就会将右边的值赋值给变量