Document Object Model 文档对象模型
1、概念
文档(Document)：就是指HTML或者XML文件
节点(Node)：HTML文档中的所有内容都可以称之为节点，常见的节点有
元素节点 属性节点 文本节点 注释节点
元素(Element)：HTML文档中的标签可以称为元素
2、结构概念
父节点 当前节点的父级
子节点 当前节点的子级
兄弟节点 和当前节点同属一个父级的节点
3、.获取元素
getElementById
getElementsByTagName 通过标签名寻找一类元素（伪数组）
4、设置属性
元素对象.属性名 = “属性值”;
<标签 属性名=”属性值”>
5、绑定事件
事件三要素
事件源.事件 = function(){ 事件处理程序 };
对象方法中的this永远指的是该方法所属的那个对象
6、常用属性
常用标签属性:
DOM对象的属性和HTML的标签属性几乎是一致的，常用的有src、title、className、href和style
内部文本属性:
innerHTML 获取和设置标签中的内容，设置的内容会当作节点对象被解析到DOM树上
innerText 获取和设置标签中的内容，设置的内容会被当作普通文本（有兼容性问题，旧版ff不支持）
textContent获取和设置标签中的内容，设置的内容会被当作普通文本（有兼容性问题，旧版IE不支持）
常用表单属性:
常见的表单元素属性有： type、value、checked、selected、disabled
type设置input元素的类型
value设置input元素的值
checked设置input元素是否选中
selected 设置下拉列表select中的option是否被选中
disabled 设置input元素是否被禁用
获取焦点事件是onfocus 失去焦点事件是onblur
自定义属性–必须以data-开头:
getAttribute() 获取标签属性
setAttribute() 设置标签属性
removete() 移除标签属性
7、节点
childNodes //子节点
children //子元素
nextSibling //下一个兄弟节点
nextElementSibling //下一个兄弟元素 有兼容性问题
previousSibling//上一个兄弟节点
previousElementSibling //上一个兄弟元素 有兼容性问题
firstChild //第一个节点
firstElementChild //第一个子元素 有兼容性问题
lastChild //最后一个子节点
lastElementChild //最后一个子元素 有兼容性问题
parentNode //父节点 （一定是元素节点，所以无需处理）
8、样式属性
style属性是对象，style对象的属性是字符串
style只能获取和设置行内样式
JS中 - 不能作为标识符，涉及到计算的时候必须直接通过JS加样式
9、动态创建元素
①插入和移除节点
在父元素中的最后追加子元素：father.appendChild(要追加的元素);
在父元素中的某个子元素前面插入子元素：father.insertBefore(要插入的元素,插到这个元素的前面);
从父元素中移除子元素：father.removeChild(要移除的子元素);
②js动态创建结构
方式一：直接在文档中书写 document.write(“内容”)
方式二：改变元素对象内部的HTML：innerHTML=”内容”
使用 字符串 或者 数组 先拼接再用innerHTML去添加到页面
方式三：创建或克隆节点并追加，参数是一个布尔值 true表示深层复制 false是浅层复制
document.createElement()
document.cloneNode()