获取浏览器窗口的尺寸

innerHeight和innerwidth

这两个方法分别获取浏览器窗口的高度和宽度（包含滚动条的）

var windowHeight=window.innerHeight
console.log(windowHeight)

var windowWidth=window.innerWidth
console.log(windowWidth)

浏览器的地址信息

在window中有一个对象叫做location

就是专门用来存储浏览器的地址栏内的信息的

location.hrefc存储的是浏览器内URL地址的信息

console.log(window.location.href)

注：会把中文变成URL编码的格式

location.href这个属性也可以被赋值

window.location.href='./index.html'

location.reload()          //刷新页面

浏览器的onload事件

这个不再是对象了，而是一个事件

是在页面所有资源加载完毕后执行的

window.onload=function(){ //页面所有资源加载完执行（图片视频，dom等）console.log('页面已经加载完毕')}

window.onresize=function(){console.log("resize")
}

window.scroll=function(){
console.log("scroll")}

获取浏览器滚动距离

竖直

window.onscroll=function(){
console.log(document.documentElement.scrollTop || document.body.scrollTop)
}

水平

window.onscroll=function(){
console.log(document.documentElement.scrollLeft || document.body.scrollLeft)
}

滚动到制定位置

btn.onclick=function(){
window.scrollTo(x,y)
}

另一种写法

window.scrollTo({left:0,top:0
})

浏览器打开标签页 

btn.onclick=function(){
window.open("http://www.baidu.com")
}

btn.onclick=function(){       //关闭页面
window.close()
}

浏览器的历史记录

btn.onclick=function(){
history.back()
}

在生成历史记录后，我们可以用另一个历史记录函数

history.forward()   

history.go(1)=history.forward()

history.go(-1)=history.back()

-1回退一个页面，-2回退两个页面

1前进一个页面。

浏览器本地存储（存，只能存字符串；如果存数字会自动转为字符串，如果要存对象，需要把对象转换成字符串存储：比如JSON.stringify()）

btn.onclick=function(){localStorage.setItem("name","xxx")
}

取出本地存储（取出转换的对象时，也需要在取出时加上转换：JSON.parse()）

btn.onclick=function(){
console.log(localStorage.getItem("name"))}

删除本地存储

btn.onclick=function(){
localStorage.removeItem("name")}

全部删除本地存储

btn.onclick=function(){
localStorage.clear()}

sessionStorage和localStorage的用法相同，他们的区别是sessionStorage是临时存储（关闭页面就丢失），localStorage是永久存储（除非外力删除或卸载浏览器）。

记住用户名实例

用户名：
密码：
登录

 模拟下次登录时自动填写用户名和密码场景

首先获取用户名 密码信息进行存储，然后检测本地存储是否有值，有则放在用户名和密码的位置。

完整代码为：
 

用户名：
密码：
登录

DOM

DOM（Document Object Mode）：文档对象模型

其实就是操作html中标签的一些能力

DOM核心对象就是document对象

获取节点的方式

非常规：html,head,body

常规：id,class，tag等

获取HTML：

console.log(document.documentElement)

 获取head

console.log(document.head)

获取body

console.log(document.body)

常规获取

console.log(document.getElementById("box"))

console.log(document.getElementsByClassName("item"))

伪数组转换为真数组

var nwearray=Array.from(伪数组)

通过标签名获取

console.log(document.getElementsByTagName("li"))

通过name获取(返回伪数组)

console.log(document.getElementsByName(""))

querySelector(参数里面类似写css样式一样，ID前面也需要加#号，类名需要加.)

//新版浏览器支持
console.log(document.querySelector("#box"))    //ul li  ,ul
//瑕疵：如果ul下有多个li，则只返回第一个

querySelectorAll

//新版浏览器支持
console.log(document.querySelectorAll("ul li"))    //ul li  ,ul