dom就是暴露的接口，内容太多，参见这个文档：

dom概述

1，DOM — > Document Object Model(文档对象模型)
2，DOM 定义了表示和修改文档所需的方法（对象、这些对象的行为和属性以及这些对象之间的关系。）DOM 对象即为宿主对象，由浏览器厂商定义，用来操作 html和 xml 功能的一类对象的集合。也有人称 DOM 是对 HTML 以及 XML 的标准编程接口。
3，dom不能改变 css 样式表，但可以间接改变行间样式的 css

样例

选项卡
image.png
image.png
image.png

小方块移动
image.png
键盘控制方块移动
image.png
image.png

刮刮乐
image.png

document

代表整个文档（如果给 html 标签上面再套一层标签就是 document）

getElementById()
//元素 id 在 Ie8 以下的浏览器，不区分 id 大小写，而且也返回匹配 name 属性的元素
getElementsByTagName()
//标签名，这是一个类数组，dom中接口生成的数组都是类数组
getElementsByClassName
//IE8及以下不支持
getElementsByName()
//不是在所有的浏览器都能用——开发一般不用
querySelector()
// css 选择器，只能选一个，在 ie7 和 ie7 以下的版本中没有
querySelectorAll()
// css 选择器，全选，选一组，在 ie7 和 ie7 以下的版本中没有

querySelectorAll()和.querySelector()选出来的元素不是实时的（是静态的）是一个镜像，所以一般不用，其他的再怎么修改，跟原来的没有关系

image.pngimage.png

node

遍历节点树：(灵活，兼容好)——关系类的选择
parentNode → 父节点 (最顶端的 parentNode 为#document)，元素的父节点只有一个
childNodes → 子节点们（直接的节点数）节点包括文本节点，属性节点
firstChild → 第一个子节点
lastChild → 最后一个子节点
nextSibling →后一个兄弟节点
previousSibling → 前一个兄弟节点

image.png

image.png
image.png

遍历元素节点树
parentElement -> 返回当前元素的父元素节点 (IE 不兼容)
image.png

children -> 只返回当前元素的元素子节点
image.png

firstElementChild -> 返回的是第一个元素节点(IE 不兼容)
lastElementChild -> 返回的是最后一个元素节点(IE 不兼容)

nextElementSibling / previousElementSibling ->返回后一个/前一个兄弟元素节点
（IE 不兼容)
image.png

除 children 外，parentElement、node.childElementCount、firstElementChild、lastElementChild、nextElementSibling、 previousElementSibling 在 ie9 及以下不兼容

节点的属性

nodeName
元素的标签名，以大写形式表示,只读，不能写
image.png

nodeValue
Text 文本节点或 Comment 注释节点的文本内容,可读写
image.png

nodeType（最有用）
该节点的类型，只读返回这个 div 的所有的元素节点
image.png
attributes
Element 节点的属性集合

image.png

节点的一个方法 Node.hasChildNodes();——他有没有子节点，返回值是 true 或 false

image.png
image.png

DOM

结构 查找

image.png
image.png
image.png
image.png

1.getElementById 方法定义在 Document.prototype 上，即 Element 节点上不能使用。
2.getElementsByName 方法定义在 HTMLDocument.prototype 上，即非 html 中的document 以外不能使用(xml document,Element)
3.getElementsByTagName 方法定义在 Document.prototype 和 Element.prototype 上
image.png
4，HTMLDocument.prototype 定义了一些常用的属性，body,head,分别指代 HTML 文档
中的标签
image.png
5.Document.prototype 上定义了 documentElement 属性，指代文档的根元素，在 HTML文档中，他总是指代元素
image.png
6.getElementsByClassName、querySelectorAll、querySelector 在 Document,Element 类
中均有定义

image.png
image.png
image.png
image.png
image.png

基本操作

增

document.createElement() //增加或创建元素节点（标签）——常见
document.createTextNode(); //创建文本节点
document.createComment(); //创建注释节点
document.createDocumentFragment(); //创建文档碎片节点，最后讲
document.body.appendChild(div)

插——剪切操作

PARENTNODE.appendChild() 可以理解成.push
后append的push到后面，如果push已经存在的节点，是剪切操作，如下图所示
image.png
image.png
image.png
PARENTNODE.insertBefore(a, b) 一定是 div 先 insert a，before b
image.png

删

parent.removeChild() //就是被剪切出来了
child.remove() //自尽，完全删除
image.png

替换

parent.replaceChild(new, origin) //用新的 new 去置换旧的 origin，origin被剪切出来
image.png

Element 节点的一些属性

innerHTML ==> 可取，可写，可赋值
innerText ==> 可取，可赋值，赋值要谨慎，会把所有结构换成text (老版本火狐不兼容) / textContent(火狐使用这个，老版本 IE 不好使)
image.png
image.png

Element 节点的一些方法

ele.setAttribute() //设置
ele.getAttribute(); //取这个值

image.png

把datalog发到服务器，用于统计点击
image.png
image.png
image.png

如果想改变一个 div 结构或 dom 结构或 html 结构的 class，直接用 div.className=””就可以了，不用 setAttribute

image.png

脚本化CSS

读写元素 css 属性

dom.style.prop //常用，只有这个可读可写，其余只能读

  • 只可读写行间样式，没有兼容性问题，碰到 float 这样的关键字属性，前面应加 css(行 间样式以外没用)
    • eg:float — > cssFloat
  • 符合属性必须拆解（建议），组合单词变成小驼峰式写法 “backgroundColor” “borderRadius”
  • 写入的值必须是字符串格式

  • 只是读写行间样式，不可读写页面头style和css文件

  • image.png

查询计算样式

getComputedStyle

window.getComputedStyle(ele,null); //原生底层的方法。展示权重最高的
//计算样式只读，不可以写入
//返回的计算样式的值都是绝对值，没有相对单位
//IE8 及 IE8 以下不兼容
//获取的是最终的显示值，不管是不是行间样式

image.png
image.png
理解 window.getComputedStyle(ele,null);第二个值是 null

获取伪元素的方法：window.getComputedStyle(ele,null);括号里面要填两个东西，第一 个 ele 是填的是你要获取谁，第二个先填写 null（null 解决的就是伪元素的问题，用 它可以获取伪元素的样式表）
image.png

改变伪元素

image.png
image.png

currentStyle

ele.currentStyle //展示权重最高的
//IE 独有的属性
//计算样式只读，不可以写入
//返回的计算样式的值不是经过转换的绝对值，是原封不动的

image.png

状态机

image.png

image.png