DOM（Document Object Model 文档对象模型）
DOM定义了表示和修改文档所需的对象、行为和属性，以及这些对象之间的关系。 当你想要改变网页行为的时候 你该怎么办呢？你不会用脚来踹网页或者用头来顶网页吧？这时候怎么办呢 ？ 而你手中有javascript 这种工具！所以你就会考虑用javascript来改变网页行为.
DOM树
DOM操作
获取DOM节点
1、 document.getElementById(id名) 2、 getElementsByTagName(标签名) 得到的是一个集合（不止一个，是一堆） 3、 getElementsByName( ) 通过Name值获取元素，返回值是集合，通常用来获取有name的input的值； 注：1不是所有的标签都有name值； 2低版本的浏览器会有兼容问题； 4、 children属性，获得DOM元素的所有子元素；返回值是集合 5、 parentNode属性，获得DOM元素的父级元素 6、 getElementsByClassName(class名称) 但是：IE8以下不能用 7、 ES5选择器： document.querySelector () > 一旦匹配成功一个元素，就不往后匹配了 document.querySelectorAll () >>>> 强大到超乎想象;匹配到所有满足的元素, 支持IE8+
属性获取和操作
1、getAttribute( )获取元素的属性值，他是节点的方法！所以前缀必须是节点！ document.getElementById( ID值 ).getAttribute( ) 什么是元素属性呢？ class就是元素属性，写在标签内的所有东西都是标签属性， 比如link的href比如img的src....都是元素属性。 元素自带的属性可以直接用 . 语法获取，但是自定义属性需要 getAttribute() 和 setAttribute( ) 方法 2、setAttribute( )设置元素的属性。同上； 有些小小的兼容性问题，低版本IE不兼容； 设置的属性永远都是字符串类型 3、removeAttribute( )删除属性；同上； 兼容性问题同上；
DOM元素类型(元素、文本和属性)
nodeObj.nodeName // 节点名称
/*
元素节点：标签名（大写）
属性节点：属性名称
文本节点：#text
*/
nodeObj.nodeType // 1 ==> 元素节点 2 ==> 属性节点 3 ==> 文本节点
操作DOM
增、删、克隆节点 1.创建节点 var oDiv = document.createElement("div"); 2.克隆节点 clonedNode = Node.cloneNode(boolean) // 只有一个参数，传入一个布尔值，true表示深客隆，复制该节点下的所有子节点；false表示浅克隆，只复制该节点 3.插入节点 parentNode.appendChild(childNode); // 将新节点追加到子节点列表的末尾 parentNode.insertBefore(newNode, targetNode);//将newNode插入targetNode之前 4.替换节点 parentNode.replaceChild(newNode, targetNode); //使用newNode替换targetNode 5.移除节点 parentNode.removeChild(childNode); // 移除目标节点 node.parentNode.removeChild(node); //在不清楚父节点的情况下使用 childNode.remove() //IE不支持
