1、history:操作浏览器的历史记录

①back()后退一个页面

②forward() 前进一个页面

③go()前进或后退多个页面 :正数是前进;负数是后退;前进后退几个页面，就看数字是几.

2、location：操作地址栏url

①href：

设置完整的地址-location.href = 新地址

获取完整的地址-location.href

②、search：

设置地址栏参数-location.search = ?键=值&键=值、

获取地址栏参数-location.search

③、hash：设置锚点-location.hash = #单词

获取锚点-location.hash

3、事件：

①window.onload：当所有资源加载完成后，触发执行

②window.onresize：当浏览器窗口大小发生改变，触发执行

③window.onscroll：当浏览器卷去的距离发生改变，触发执行

4、方法：

① 定时器；

setInterval(函数, 毫秒数)-让函数每隔毫秒数，就执行一次，会不停的执行下去

setTimeout(函数, 毫秒数)-让函数延迟毫秒数执行一次，就这一次

② 打开新的标签页：window.open(url) ② 设置卷去距离：window.scrollTo(x, y) ③ 关闭窗口：window.close()

DOM

概念：document object model；文档对象模型-由对象组成的结构操作html文档

获取标签：

1、document.querySelector(css选择器)：获取满足css选择器的第一个标签-返回一个标签

2、document.querySelectorAll(css选择器)：获取所有满足css选择器的标签-返回一个集合 3、document.getElementById()

4、document.getElementsByClassName()

5、document.getElementsByTagName()

6、document.getElementsByName()

获取html基本结构标签：

HTML ： dcument.documentElement

body：document.body

head： document.head

网页标题；document.title 可获取标题/可设置标题

获取标签名:

标签.tagName

操作内容:

1、双标签：

文本内容：

设置: 标签.innerText = 值

获取: 标签.innerText

带标签的内容:

设置：标签.innerHTML = 值

获取：标签.innerHTML

2、表单：

设置：标签.value = 值

获取：标签.value

3、操作属性：

设置属性：标签.setAttribute(属性名, 值)

获取属性：标签.getAttribute(属性名)

删除属性：标签.removeAttribute(属性名)

4、样式操作：

获取样式：getComputedStyle(标签) -返回由所有css键值对组成的对象

设置样式：标签.style.css键 = 值 -设置到行内

5、类名操作：

直接操作class属性值：

标签.className = 值

标签.className

classList： add() -添加一个类名

remove() -删除一个类名

contains() -判断是否有这个类名

toggle() - 让类名在删除和添加之间切换

6、获取卷去的距离

有文档声明：document.documentElement.scrollTop

没有文档声明：document.body.scrollTop

兼容写法：

var t = document.documentElement.scrollTop || document.body.scrollTop

document.documentElement.scrollTop = document.body.scrollTop = 数字

7、短路运算：

使用逻辑运算符 && 和 || 给变量进行赋值

var 变量 = 值1 && 值2 ：

如果左边为true，就会将右边的值赋值给变量

如果左边为false，就会将左边的值赋值给变量

var 变量 = 值1 || 值：

如果左边为true，就会将左边的值赋值给变量

如果左边为false，就会将右边的值赋值给变量

this在事件函数中，代表触发事件的标签 ··

8、节点操作：

① 创建标签：document.createElement(标签名)

//创建一个div
var div = document.createElement('div')

② 插入标签：

父.appendChild(标签) - 将标签插入到父标签的末尾

父.insertBefore(新的标签, 旧的子标签) - 将新标签添加到父标签中已经存在的某个子标签的前面

③ 替换标签：父.replaceChild(新, 旧)

④ 复制标签：标签.cloneNode(true)

⑤ 删除标签：

父.removeChild(子)

子.parentElement.removeChild(子)

⑥ 获取标签：

所有子：父.children

第一个子：父.firstElementChild

最后一个子：父.lastElementChild

父：子.parentElement

上一个兄弟：标签.previousElementSibling

下一个兄弟：标签.nextElementSibling

⑦ 标签大小:

带边框: 标签.offsetWidth/标签.offsetHeight

不带边框: 标签.clientWidth/标签.clientHeight

⑧ 标签位置：

标签.offsetLeft/标签.offsetTop

⑨ 边框厚度：

标签.clientLeft/标签.clientTop

⑩ 不包含滚动条的窗口大小：

document.documentElement.clientWidth

document.documentElement.clientHeight

BOM &DOM