window的相关方法

dom对象

一、什么是dom

dom：文档对象模型，将页面中的标签当作对象，通过dom对这些标签进行操作

二、查找页面标签

• document.document.getElementById：通过id进行查找
• document.getElementsByClassName：通过类名查找，（返回的是一个伪数组，有索引和length属性）
• document.getElementsByTagName：通过标签查找，（返回的是一个伪数组，有索引和length属性）
• document.querySelector：通过css选择器进行查找（只会返回查找到的第一个）
• document.querySelectorAll：通过css选择器进行查找（只会返回查找到的所有元素），（返回一个伪数组）

三、修改元素的内容

• innerHTML：可以识别标签
• innerText：不会识别标签

四、获取类名

className：获取类名
classList：获取类名
----------- classList.add：覆盖原来的类名
----------- classList.remove：删除原来的类名
----------- classList.replace：替换原来的类名
----------- classList.toggle：切换原来的类名
----------- classList.contains：判断是否包含类名

五、自定义属性

• setAttribute：设置自定义属性
• getAttribute：获取自定义属性
• data-xxx：可以通过dataset.xxx获取

六、方法

• attributes：获取属性节点
• childNodes：元素的所有孩子节点
• document.createTextNode：创建文本
• document.createElement：创建元素
• appendChild：页面元素尾部添加
• insertBefore：接收两个参数，第一个是添加的元素，第二个是参照元素。在参照元素前面添加元素
• removeChild：删除父元素中一个子元素
• remove：删除元素，包括该元素的所有子元素
• repalceChild：替换元素，接收两个参数，第一个是新的元素，第二个是被替换的元素
• getComputedStyle：获取元素经过计算的样式

bom对象

一、什么是bom

bom：浏览器对象模型。

二、弹出框

• alert：提示框，只有确定按钮
• prompt：输入框，点击取消返回null
• confirm：询问框，确定返回true，取消返回fales

三、页面跳转

window.open：可以打开一个新的窗口，如果自动跳转会被当成垃圾广告拦截
location：专门储存浏览器地址栏信息

• location.href：这个属性存储的是浏览器地址栏内 url 地址的信息（也可以给他赋值实现跳转页面的效果）
• location.reload()：重新加载页面，与刷新页面一样（注意：如果写在全局会一直刷新）
• location.hash：网页地址中 hash 部分
• location.search：获取hash 后面的后面

history：专门用来存储历史记录信息的

• history.forword：去下-一个页面
• history.go：跳转页面个数，如果为0则会实现刷新页面

四、获取浏览器信息

• navigator.userAgent()：获取的浏览器的整体信息，记录上网的 信息 浏览器–操作系统
• navigator.language：获取用户语言环境

五、window的方法

• window.onload：浏览器页面加载完执行
• window.onscroll：滚动页面的时候执行
• document.documentElement.scrollTop：与浏览器顶部的距离
• document.documentElement.scrollTo：与浏览器顶部的距离。有个behavior属性，可以设置滚动效果

六、本地储存

1、sessionStorage：临时储存，页面关闭后储存的数据会被清空

• sessionStorage.setItem：储存
• sessionStorage.setItem：修改，就是对已有的数据进行覆盖
• sessionStorage.removeItem：删除
• sessionStorage.clear：清空

2、localStorage：永久储存

• localStorage.setItem：储存数据
• localStorage.getItem：读取数据，如果没有该数据会返回null
• localStorage.setItem：修改数据，就是对已有的数据进行覆盖
• localStorage.removeItem：删除数据
• localStorage.clear()：清空所有数据

3、cookie：小饼干

作用：某些网站为了辨别用户的身份。在第一层访问服务器的时候，服务器会返回一个cookie自动保存到浏览器中，在下次访问的时候，服务器会总到携带coolie中的数据
document.cookie（）接收两个参数。第一参数是（name）即保存的数据，第二个参数（expires）即保存的时长