浏览器存储，DOM，和操作元素

操作浏览器标签页

常用的操作方法

        关闭当前页面

        开启一个新的页面

        关闭当前标签页

                语法：window . close()

                注意：只能关闭当前标签页

        开启一个新的标签页

                语法：window .open(要开启标签页的地址)

        操作浏览器历史记录

                就是我们曾今去过的地方

                        历史回退

                        历史前进

                        历史跳转

                属性：history，保存操作浏览记录的属性和方法

                        历史回退’

                                语法：window . history . back()

                                前提：有一个历史记录

                        历史前进

                                语法：window . history . forward()

                                前提：有一个历史记录

                        历史跳转

                                语法：window . history . go (参数）

                                参数：正整数，即历史前进

                                负整数：历史后退，-1跳一个，-2跳两个

                                0 ： 刷新页面

浏览器的本地存储

        就是浏览器允许我们存储一些数据在其中

        常见的本地存储

                storage

                cookie

                storage

        localStorage

                是本地存储

                特点：是一个长期存储，除非手动关闭，否则里卖弄的数据不会被删除

                会跨页面提供数据，也就是说，在一个页面中保存的数据 ，可以在另一个页面中获取

                保存：

                        语法：window . localStorage . setItem ('key' , 'value')

                        注意：只能保存基本数据类型，基本数据类型也是字符串

                获取：

                        语法：window . localStorage . getItem ('key' , 'value')

                        获取出来也是字符串格式

                 清除：

                        语法：window . localStorage . clear ()

                删除某一个

                        语法：window . localStorage . removeItem (key)

                        作用：删除某一个

        sessionStorage

                特点：也是本地存储

                是一个会话存储，就是浏览器关闭后就会消失。 即短期存储

                也会跨页面提供数据

                操作：

                保存：

                        语法：window . sessionStorage . setItem (key , value)

                        注意：只能保存基本数据类型，基本数据类型也是字符串

                获取：

                        语法：window . sessionStorage . getItem (key , value)

                        获取出来也是字符串格式

                清除

                        语法：window . sessionStorage . clear()

                删除

                        语法：window . sessionStorage . clear("")

        本地存储

                特点：也是存储字符串，

                存储格式：key = value; key1= value1;......

                存储大小：只能存储4kb左右

                存储方式：默认会话存储

                打开方式：只能在服务器打开，也就是在带有域名的浏览器中打开

                服务器插件：live sever

                打开时选择open with live server打开

        传输文件

                只要在服务器中打开，同时cookie中有内容就会没次都被携带

        操作cookie

                前端js可以操作

                任何后端语言都可以操作

        依赖域名

        不同域名下面的cookie只能在当前域名下被操作

        cookie操作

                存储：

                默认失效

                        语法：document . cookie = 'key = value'

               设置一个默认的失效时间

                        语法：document . cookie = 'key = value；expires = 时间对象'

                        注意：这个时间不是我们当前终端时间，是世界标准时间

                        如果想要他失效，需要计算时间

                获取：

                        语法：document . cookie

DOM操作（文档对象模型）

        DOM树

                就是页面结构抽象为一棵数

        DOM获取元素

                常见的获取元素方式

                通过id获取

                        语法：document . getElementById("id")

                        返回值：如果存在就是这个id对应的标签

                                        如果没有，就是null

                通过类名获取

                        语法：document . getElementsByClassName("类名")

                        返回值：如果存在就是一个伪数组，伪数组中获取的所有的元素

                                        如果没有，就是空的伪数组

                通过标签名获取

                        语法：document . getElementsByTagName("标签名")

                        返回值：如果存在就是一个伪数组，伪数组中获取的所有的元素

                                如果没有，就是空的伪数组

                通过name属性来获取

                        语法：document . getElementsByName("标签名")

                        返回值：如果存在就是一个伪数组，伪数组中获取的所有的元素

                                如果没有，就是空的伪数组

                通过选择器来获取

                        获取一个：document . querySelector("选择器")

                        返回值：如果存在，就是这个选择器对应的标签，如果没有就是null

                获取多个document . querySelectorAll(类名)

                        返回值：如果存在就返回一个伪数组，如果没有就返回一个空的伪数组

操作元素样式

        js中分为两种，行内式（写在标签上）和非行内式（写在标签以外）

        行内样式

                获取行内样式

                        语法：元素（获取到的元素）. style . 样式名

                        返回值：就是该样式名对应的样式值以字符串的形式返回

                        注意：如果样式名中有中划线使用驼峰命名法或数组关联语法

                设置

                        语法：元素（获取到的元素）. style . 样式名 = 样式值

        非行内样式

                关于非行内样式只能获取不能设置

                        既能获取行内样式也能获取非行内样式

                        语法：window . getComputedStyle(元素) . 样式名

                        返回值：就是该样式名对应的样式值

        操作元素的属性

                就是书写在标签上以key = value 的形式存在

        属性分类

                原生属性

                自定义属性

                H5自定义属性

                注意：我们一般不操作class和style

        原生属性

                就是在w3c中提到的属性，对我们标签有一定说明或解释的作用

        操作原生属性

                获取

                        语法：元素 . 属性名

                        返回值：就是该属性名对应的属性值

                设置

                        语法：元素 . 属性名 = 属性值

        自定义属性

                        就是不是在w3c中提到的没有特殊意义的

                        就是为了在我们标签上记录一些信息

                操作自定义属性

                        获取自定义属性

                                语法：元素 . getAttribute（'属性名'）

                                返回值：就是该属性名对应的属性值

        设置自定义属性

                语法：元素 . setAttribute（'属性名'，属性值）

        删除自定义属性

                语法：元素 . removeAttribute（'属性名'）

                作用：删除该属性名对应的属性值

        H5自定义属性

                以data-开头

                属性叫做dataset

        操纵H5自定义属性

                获取

                        语法：元素 . dataset . 属性名

                        返回值：该属性名对应的属性值

                设置

                        语法：元素 . dataset . 属性名 = 属性值

                        作用：就是用来设置属性值，如果之间有就是修改，如果之前没有就是重新设置

                删除

                        语法：delete 元素 . dataset . 属性名

操作元素类名

        为了批量设置或修改我们的样式

        常用操作类名方法

                className

                classList

className

        获取

                语法：元素 . className

                返回值：就是标签上的所有类名

        设置

                语法：元素 . className = ' 值 '

                作用：就是设置一个类名

                注意：新的会把之前的类名都替换

        追加

                语法：元素 . className += ' 值 '

                作用：可以添加一个类名，不会替换之前的类名

                注意：不会查重

classList

        元素天生自带属性，里面是所有类名

        添加

                语法：元素 . classList . add（类名）

                作用：就是会添加一个类名，不会重复添加

        删除

                语法：元素 . classList . remove(类名)

        切换

                语法：元素 . classsList . toggle(类名)

                作用：用来切换类名，如果有就删除，没有就添加

操作元素文本内容

        操作标签中间的内容

        常用方法

                innerText

                innerHTML

                value

        innerText

                是一个读写属性

                读：

                        语法：元素 . innerText

                        返回值：就是文本中所有文本内容

                写：

                        语法：元素 . ineerText = 值

                        作用：完全覆盖式替换掉之前所有内容

                        特点：不认识标签

        innerHTML

                是一个读写属性

                读：

                        语法：元素 . innerHTML

                        返回值：操作元素中所有内容

                写：

                        语法：元素 . innerHTML = 值

                        作用：完全覆盖式替换掉之前所有内容

                        特点：认识标签，会解析标签

        value

                也是一个读写属性

                一般多用于表单元素

                读：

                        语法：元素 . value

                        返回值：就是表单元素中value值

                写

                        语法：元素 . value = 值

分页

获取窗口尺寸

        BOM级别的获取

                宽度：window . innerWidth

               高度：window . innerHeight

        DOM级别的获取

                获取宽度

                        语法：document . documentElement . clientWidth

                获取高度

                        语法：document . documentElement . clientHeight

                特点：获取到的尺寸不包含滚动条的尺寸

获取元素的尺寸

        两套语法

                offset

                client

        第一套 offset

                获取到的尺寸是内容区域 + 内边距 + 边框的尺寸

                获取宽度

                        语法：元素 . offsetWidth

                获取高度

                        语法：元素 . offsetHeight

                        返回值：就是一个数值

                        注意：只有设置display ：none；时获取到值为0

        第二套 client

                获取到的尺寸是内容区域 + 内边距

                获取宽度

                        语法：元素 . clientWidth

                        获取高度：元素 . clientHeight

                        返回值：就是一个数值

                        注意：只有设置display ：none；时获取到值为0

获取元素偏移量

        什么是元素偏移量

                就是距离某一个坐标点上边 / 左边的距离

        如何获取

        两套语法

                offset

                client

        第一套 offset

                距离上边的距离

                        语法：元素 . offsetTop

                距离左边的距离

                        语法：元素 . offsetLeft

                注意：获取到的尺寸是相对于定位父级的距离

        第二套 client

                距离上边的距离

                        语法：元素 . clientTop

                距离左边的距离

                        语法：元素 . clientLeft

                注意：获取到的尺寸是距离边框左上角的距离，也就是边框的宽度