DOM是JS中专门操作HTML页面内容的
他的三种基本使用方法是：
1. document.getElementById('')； ——>选取html页面中带有Id的属性名；
2.document.getElementsByClassName('')； ——>选取html页面中属性名为class的内容；
3.document.getElementsByTagName(''")； ——>选取html页面中特指的标签属性。
在HTML中的每一个元素：元素，属性，文本都是一个节点对象（node），document对象是整棵树的根节点。
节点父子关系：
1. node.ParentNode ：获得节点的父节点；
node.ChildNode ：获得node的所有子节点；
node.firstChild：获得node下最后一个子节点。
节点兄弟关系：
2. node.PreivousSibling ：返回当前节点的前一个兄弟节点；
node.nextSibling ：返回当前节点的下一个兄弟节点；
*网页中的一切都是节点，包括换行和空字符
元素树之间的关系：仅包含元素节点的树结构（仅是节点数的子集）
1.父子关系：
elem.parentElement：返回一个父元素对象；
elem.child（IE8支持）返回一个子元素对象集合；
elem.firstElementChild 返回第一个子元素对象；
elem.lastElementChild 返回最后一个子元素。
2.兄弟关系：
elem.preivousElementSibling： 返回当前节点的前一个兄弟元素；
elem.nextElementSibling ： 返回当前节点的下一个兄弟元素。
选择器查找：查找一些条件复杂的元素，既可以找一个元素，也可以找多个元素，Selector可以写css的选择器
语法：var elem=parent.querySelector("seletor")；单个
var elem=parent.querySelectorAll("seletor")；多个
返回非动态集合：实际存储的数据，不会返回访问DOM树
getxx和SeletorAPIde差别：
1.返回值：get返回动态集合；selectorAPI返回非动态集合
2.效率：get首次 查找效率高；selectorAPI首次查找效率低
3.易用性selector更简单，get更繁琐
推荐：
一个条件能找到的元素就用 get；
若条件过多时就用selector
获取或修改HTML内容：
elem.innerHTML
获取或修改元素
elem.classname="标签"
追加到DOM树，只有添加到DOM树中，才能显示在网页中
1.在父元素的结尾添加新元素
Parent.appendChild（elem）
2.插入：在现有子元素插入新元素
Parent.insertBefore（elem，oldElem）；
3.替换：替换现有子元素
Parent.replaceChild(elem,oldelem)
option ：获得select下的所有option对象
.option.length
.length 也可以直接获得option的个数
.value:
1.如果选中的option有value属性，则返回value属性；
2.如果选中的option没有value属性，则返回对标签中的内容
.selectedIndex ： 获得当前