什么是dom
获取页面元素
给元素注册事件
操作DOM元素的属性
能够创造元素
能够操作DOM节点
DOM简介
（文档对象模型Document Model）是W3C组织推荐的处理可扩展标记语言的标准编程接口
获取元素
获取元素有以下几种方法：
1：根据ID获取
getElementById()
//console.dir() 更好打印我们返回的元素对象，更好查看里面的属性和方法
2：根据标签名获取
返回的是 获取过来元素对象的集合 以伪数组的形式存储
getElementByTagName（）
3：通过HTML5新增的方法获取
4：特殊元素获取
事件基础
事件源 事件类型
操作元素
改变元素的内容
1、element.innerText
2、element.innerHTML
1和2 区别：①1不识别html标签，去掉空格和换行，反之2,
②两个属性是可读写的
修改元素的属性 src
利用DOM可以操作表单元素属性：type、value、checked、selected、disabled
样式属性的操作利用JS修改元素的大小，颜色，位置等样式
element.style
className
作业：世纪佳缘 用户名 显示隐藏内容
京东关闭广告（直接隐藏即可）
新浪下拉菜单（微博即可）
开关灯效果
排他思想
如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：
1、所有元素全部清除样式（干掉其他人）
2、给当前元素设置样式（留下我自己）
3、注意顺序不能颠倒，首先干掉其他人，再设置我自己
例：
自定义属性的操作
1、获取属性值
element.属性 获取内置属性值（元素本身自带的属性）
element.getAttribute('属性')； 主要获得自定义的属性（标准）程序员自定义的属性
2、设置属性值
element.属性=‘值’；
element.setAttribute（‘属性’，‘值’）；
3、移除属性
element.removeAttribute（‘属性’）；
tab栏切换（重点案例）
4、H5自定义隐藏
H5规定自定义属性data开头做为属性名并且赋值
比如<div data-index="1"></div>
h5新增的获取自定义属性的方法
element.dataset.index或者element.dataset['index'] ie11才开始支持
节点操作
为什么学习节点操作？
获取元素通常使用两种方式：
1、用dom提供的方法获取元素
2、利用节点层级关系获取元素
父节点 parentNode
子节点childNode 所有节点包含元素节点，文本节点等等
（重点）parentChildren 主获取元素节点
实际开发中用法，第一个和最后一个
利用伪数组，node.children[0]第一个子节点
node.children[ol.children.length-1]最后一个节点
兄弟节点
node.nextSibling 下一个兄弟节点，包含元素节点，文本节点等
node.nextElementSibling 返回当前元素下一个兄弟节点
node.previousElementSibling 返回当前元素上一个兄弟节点
封装一个兼容性函数
创建节点
document.createElement('tagName')
添加节点
node.appendChild(child) node父级 child子级
node.insertBefore(child,指定元素);
删除节点
node.removeChild（child）
克隆节点
node.cloneNode();括号为空或者里面是false 浅拷贝，只复制标签不复制里面的内容，括号内为true 深拷贝 复制标签复制里面的内容
三种动态创建元素区别
document.write() 如果页面文档加载完毕，再调用这句话会导致页面重绘
element.innerHTML 拼接效率慢 但是创建多个元素效率更高(不要拼接字符串，采用数组形式拼接)，结构稍微复杂
document.createElement() 效率快，结构清晰