JS学习打卡Day03

1.BOM操作   一套操作浏览器相关内容的属性和方法
        操作浏览器历史记录、滚动条、页面跳转、标签页的开启和关闭
        1）获取浏览器窗口尺寸 window.innerwidth/.innerheight
        2）浏览器的弹出层 window.alert提示框/.confirm询问框/.prompt输入框
        3）开启和关闭标签页 window.open/.close
        4）浏览器事件
                window.onload资源加载完毕触发的事件
                window.onresize可视尺寸改变触发的事件
                window.onscroll滚动条位置改变触发的事件
        5）浏览器的历史操作记录
                window.history.back()回退页面
                window.history.forward()前进页面
        6）浏览器卷去的尺寸（滚动时页面被遮住的部分）
                卷去的高度  document.documentElement.srcollTop || document.body.scrollTop
                卷去的宽度  document.documentElement.srcollLeft || document.body.scrollLeft
        7）浏览器滚动到 window.scrollTo（）
                参数方式1：window.scrollTo(left，top)//直接滚动到
                参数方式2：window.scrollTo({
                                        left:xx,
                                        top:yy,
                                        behavior:'smooth'})//平滑滚动到

2.定时器
        1）间隔定时器  按照指定周期（毫秒）去执行指定的代码 setInterval（函数，时间）
        2）延时定时器  在固定的时间（毫秒）后执行一次代码 setTimeout（函数，时间）
        返回值为页面中的第几个定时器，用于关闭定时器
        1）clearInterval(要关闭的定时器的返回值)
        2）clearTimeout(要关闭的定时器的返回值)    //注意，两种定时器不区分种类，可互相关闭

3.DOM操作  一套操作文档流相关内容的属性和方法
        操作元素 修改样式、修改属性、改变位置、添加事件
        1）获取元素的方式
                Ⅰ.根据id名称获取，document.getElementById('id名称') ，返回值为标签元素或null
                Ⅱ.根据类名获取，document.getElementsByClassName('元素类名')，返回值伪数组
                        伪数组就是长得很像数组的数据集合，也按索引排列，但是不能使用数组的方法
                Ⅲ.根据标签名获取，document.getElementsByTagName('标签名')，返回值伪数组
                Ⅳ.根据选择器获取，document.querySelector('css选择器'),返回满足的第一个元素
                Ⅴ.根据选择器获取所有元素，document.querySelectorAll('css选择器'),返回值伪数组
        2）操作元素内容
                Ⅰ.操作文本内容 innerText
                Ⅱ.操作超文本内容 innerHTML 可执行html代码
        3）操作元素属性
                Ⅰ.原生属性 元素.属性名 /  元素.属性名 = '属性值'
                Ⅱ.自定义属性  获取：元素.getAttribute（‘属性名’）
                                         设置：元素.setAttribute（‘属性名’，‘属性值’）
                                         删除：元素.removeAttribute（‘属性名’）
        4）操作元素类名  元素.className /  =‘新类名’
        5）操作元素行内样式  元素.style.样式名  /  =‘样式值’  带有中划线的样式名要写成驼峰
获取非行内样式（外部和内部样式）  window.getComputedStyle(元素).样式名，但是无法修改