JavaScript（续）

BOM

一整套操作浏览器相关内容的属性和方法

获取浏览器窗口尺寸

获取浏览器可视窗口的尺寸

//宽度
var w = window.innerWodth

//长度
var h=window.innerHeight

浏览器的弹出层

提示框：window.alert（‘提示信息’）只有提示

询问框：window.confirm（‘提示信息’）  确定true，取消false

输入框：window.prompt（‘提示信息’）多了一个文本框

开启和关闭标签页

开启：window.open（‘地址’）

关闭：window.close（）

浏览器常用事件

资源加载完毕：window.inload = function（）{}//等页面所有资源加载完毕后执行

可视尺寸改变：window.onresize = function（）{}//可视窗口发生变化的时候执行

滚动条位置改变：window.onscroll = function（）{}//滚动条位置改变的时候触发

浏览器的历史记录操作

回退页面：window.history.back（）浏览器前进

前进页面：window.history.forward（）浏览器后退一个页面

浏览器卷去的尺寸

卷去的高度：document.documentElement.scrollTop  //页面有DOCTYPE标签的时候使用

                      document.body.scrollTop  //可以使用||来使用

卷去的宽度：document.documentElement.scrollLeft  

                      document.body.scrollLeft   和高度一样

浏览器滚动到哪里

滚动到：window.scrollTo（）

window.scrollTo（left，top ）

window.scrollTo（{left：xx，top：yy，behavior：‘smooth’//平滑滚动}）

定时器

间隔定时器：按照固定周期（毫秒）去执行指定的代码

serInterval（函数，时间）

//定时器
setInterval(function(){
console.log（‘执行一次’）
},1000)

延时定时器：在固定的时间后执行指定的代码

//定时器
setTimeout(function(){
console.log（‘执行一次’）
},1000)

关闭定时器：

clearInterval（要关闭的定时器返回值） 

clearTimeout（要关闭的定时器返回值） 

DOM的基本操作

一整套操作文档流相关内容的属性和方法

操作 元素 修改样式 ，修改属性，改变位置，添加时间

获取元素的方式：确定你要操作的是哪一个元素

根据 id 名称获取

//语法
document.getElementById('id名称')
//获取文档流中id名对应的一个元素

根据元素 类名 获取

document.getElementsByClassName('元素类名')
//获取文档流中所有类名对应的元素

根据元素 标签名 获取

//语法
document.getElementsByTagName('元素类名')
//获取文档流中所有标签名对应的元素

根据 选择器 获取一个

//语法
document.querySelector('选择器')
//获取文档流中满足选择器规则的第一个元素

根据 选择器 获取一组

//语法
document.querySelectorAll('选择器')
//获取文档流中满足选择器规则的所有元素

 操作元素内容

操作元素文本内容

//获取
元素.innerText

//设置
元素.innerText='新内容'

操作元素超文本内容

//获取
元素.innerHTML

//设置
元素.innerHTML='新内容'

操作元素属性 

原生属性

//获取
元素.属性名
//设置
元素.属性名 = '属性值'

自定义属性

//获取
元素.getAttribute（'属性名'）
//设置
元素.setAttribute（'属性名'，'属性值'）
//删除
元素.removeAttribute（'属性名'）

操作元素类名

//获取
元素.className
//设置
元素.className='新类名'

操作元素行内样式

//获取
元素.style.样式名
//设置
元素.style.样式名 = '样式值'

获取元素非行内样式（不能设置非行内样式）

window.getComputedStyle（元素）.样式名
//注意：可以获取行内样式，也可以获取非行内样式