DOM和BOM常用API

• DOM 是为了操作文档出现的 API，document 是其的一个对象；

• BOM 是为了操作浏览器出现的 API，window 是其的一个对象。

DOM

• 获取节点

document获取方法	节点指针(node)
document.getElementById('元素id')	parentNode父节点(亲爸爸) childNodes 元素所有的子节点列表
document.getElementsByName('元素name属性')	firstChild第一个子节点 lastChild最后一个子节点 返回元素包括元素节点和文本节点 ol.children[0]选择第几个孩子
document.getElementsByTagName('元素标签')	nextSibling 下个兄弟节点 previousSibling 上个兄弟节点
document.querySelector('选择器名') 返回第一个满足条件的 document.querySelectorAll('选择器名') 返回满足条件的集合	firstElementChild 返回第一个子元素节点 lastElementChild 返回最后一个子元素节点 ie9才支持

• 节点操作

创建节点	添加插入节点	替换节点	复制节点	删除节点
document.createElement('元素标签');	node.appendChild(child)	replaceChild('插入新元素'，'替换老元素')	node.cloneNode(true/false)	node.removeChild(child)
document.createAttribute('元素属性');	node.insertBefore(添加的新节点, 指定元素);指定元素前面添加节点		true 复制当前节点及其所有子节点 false 仅复制当前节点	child代表要删除的节点
document.createTextNode('文本内容');	node（父级） child（子级）

• 属性操作

获取属性	设置属性	删除属性
element.getAttribute('元素属性名')	element.setAttribute('属性名', '属性值');	element.removeAttribute('属性名')
一般是获取元素内置属性的(元素本身自带的，例id,class) 可获取自定义元素的属性属性值	主要针对于自定义属性	删除元素中的指定属性
自定义属性：date-index h5规定凡是以date开作为属性名且赋值头的是自定义属性 获得属性值的话还是用getattribute	创建或改变元素节点的属性
console.log(div.getAttribute('data-index'));

• 事件操作

鼠标事件	键盘事件
onclick - 鼠标左键点击 ondbclick - 鼠标左键两次	onkeyup - 按键被松开 - 不区分字母大小写
onmouseover - 鼠标经过 onmouseout - 鼠标离开	onkeydown - 按键按下 - 能识别所有的键
onmousemove - 鼠标移动 onmouseup - 鼠标弹起 onmousedown - 鼠标按下	onkeypress - 按键按下-区分大小写-不识别功能键，比如ctrl shift 箭头等
contextmenu禁用右键菜单 selectstart禁止选中文字	三个事件的执行顺序：onkeydown --> onkeypressd --> onkeyup

BOM

BOM的核心是Window

• navigator对象包含有关浏览器的信息

  最常用的是userAgent，该属性可以返回客户机发送服务器的user-agent头部的值。

• screen

availHeight	availWwidth	height	width	colorDepth
返回显示屏幕的可用高度	返回显示屏幕的可用宽度	返回显示屏幕的像素高度	返回显示屏幕的像素宽度	返回显示屏幕颜色的位数
(除去任务栏的高度)	(除去任务栏的宽度)

• history 与浏览器历史记录进行交互

back()	forward()	go(参数)
后退功能	前进功能	前进后退功能 1，前进一个页面；-1，后退1个页面

• location

属性	方法
location.href：获取或设置整个URL	location.assign()：跟href一样，可以跳转页面（也称为重定向页面），可以回退
location.host：返回主机(域名)	location.replace()：替换当前页面，因为不记录历史，不能后退页面
location.port：返回端口号，如果没有，则返回空字符串	location.reload()：重新加载页面，相当于刷新按钮。如果参数为true，强制刷新ctrl+f5 如果页面缓存后，刷新会从本地提取，强制刷新就是从服务器里重新加载
location.pathname：返回路径
location.search：返回参数
location.hash：返回片段。#后面的内容，常见于链接锚点

• 焦点控制

focus	blur
得到焦点	移出焦点

• 打开关闭窗口

open	close()
('url','窗口名称‘’，’窗口风格')	- 自动关闭浏览器窗口

• 定时器

setTimeout	clearTimeout	setInterval	clearInterval
到指定时间执行代码	取消定时器	到指定时间循环执行代码	取消循环定时器
const a = setTimeout(()=>{},5000)	clearTimeout(a)	const b = setInterval(()=>{},5000)	clearInterval(b)

• 对话框

alert	confirm	prompt

• 常见事件

window.pageXOffset	window.addEventListener（‘load’,function(){}）	window.addEventListener('resize', function() {})	window.innerwidth
- 页面滚动的距离	- load窗口加载事件	resize调整窗口大小事件,常做响应式布局	- 当前屏幕宽度