dom和bom

• DOM
• 获取元素方法
• 事件
• 操作元素

DOM

文档对象模型,代表整个浏览器页面，里面每个标签都是一个元素对象

获取元素方法

//根据id选择元素
document.getElementById()
//根据css选择器获取元素
document.querySelector(css选择器)
//根据css选择器获取元素 获取元素集合
document.querySelectorAll(css选择器)

事件

事件注册
元素.事件名=处理函数
元素.addEventListener(事件名,处理函数,true)
第三个参数为true可将冒泡改为捕获
解除绑定
元素.事件名=null
元素.removeEventListener(事件名,处理函数)
事件对象
e.target 当前触发事件的元素
e.preventDefault（）阻止默认事件 链接跳转等
e。stopPropagation() 阻止事件冒泡
鼠标事件对象
e.clientX 鼠标相对浏览器可视区的X,Y坐标
e.clientY
e.pageX 相对于文档页面
e.pageY
e.screenX 相对于电脑屏幕
e.screenY
事件委托
<div id="father">
<div id="son"></div>
</div>
document.getElementById("father").addEventListener("click",function (e) {
console.log(e.target) //点击son元素即可对齐进行操作
})
常用的键盘事件
keyup 按键弹起的时候触发
keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头啊
keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头啊

操作元素

元素.innerText 只会获取内容
元素.innerHTMl  获取内容和标签
元素.value 获取表单内容
操作css属性
元素.style.属性名=属性值
元素.className=类名
自定义属性
元素.getAttribute（元素名）//获取元素属性值
元素.setAttribute（属性名,值） //设置元素属性值
节点操作
父节点 parentNode 得到的是离元素最近的父级节点 如果找不到就返回null 只会是元素节点
所有子节点 parentNode.childNodes(标准) 但会获得全部节点 包括文本节点 需要专门处理
parentNode.children获取所有的子元素节点 常用
parentNode.firstChild
parentNode.lastChild 获得第一个和最后一个 同样包括文本节点
parentNode.firstElementChild
parentNode.lastElementChild 只会获得元素节点第一个和最后一个 IE9才支持
兄弟节点 nextSibling 下一个兄弟节点
previousSibling 上一个兄弟节点 同样包括文本节点
nextElementSibling 得到下一个兄弟元素节点
previousElementSibling 上一个元素节点  （兼容性IE9以上)

创建节点元素节点 document.createElement('li')
添加节点 node.appendChild(child) 后面添加
添加节点 node.insertBefore(child, 指定元素) 前面添加
删除元素  node.removeChild(child) 返回删除的节点

node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容

BOM

浏览器对象模型
window.onload 是窗口 (页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。经常用在开头
DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。兼容性 IE9
window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。
定时器

• setTimeout(回调函数,时间)
  清除 clearTimeout(timer)
• setInterval() //重复调用执行
  clearInterval(timer)
  offset 元素偏移量
  元素.offsetParent 返回带有定位的父级元素 没有则为boby
  元素.offsetTop 返回相对于定位父元素上方偏移
  元素.offsetLeft 左方便宜
  元元素.offsetWitdh 返回自身宽度 包括内边距 边框 内容素.offsetHeight返回自身宽度 包括内边距 边框 内容
  client 元素可视区
  元素.clientTop 返回元素上边框大小
  元素.clientLeft 返回元素左边框大小
  元素.clientWidth 返回元素宽度 不含边框 外边距
  元素.clientHeight 返回元素高度 不含边框 外边距
  scroll 元素滚动
  元素.scrollTop 返回被卷去的上侧距离
  元素.scrollLeft 返回被卷去的左侧距离
  元素.scrollWidth 返回自身实际宽度 不含边框
  元素.scrollHeight 返回自身实际高度 不含边框