JS操作DOM对象

DOM：Document Object Model（文档对象模型)由三部分组成
    Core DOM：也称核心的DOM，定义了一套标准的针对任何结构化文档的对象 ，包括XML，HTML，XHTML
    XML DOM：定义了一套标准的针对XML文档的对象
    HTML DOM：定义了一套标准的针对HTML文档的对象

一、节点的访问（ var  a=document.getElementBy~~() 可以获取一个或多个指定元素节点）

常用节点访问属性 常用节点访问属

    2、（1）节点.nodeName 获取节点名称，注意并不是节点的name属性值：例如 <input> 此节点获取的节点名称是 INPUT，文本节点获取的是“#text”。
          (2) 节点.nodeValue 获取节点的值，一般来说是获取世俗性节点或者文本节点的值
        （3) 节点.nodeType 获取节点的类型，参考下表

3、操作节点属性 节点.getAttribute("属性名")
                          节点.setAttribute("属性名","属性值")
            注意：对于div来说高度height并不是他的属性，style才是div的属性

4、创建插入节点

5、删除替换节点

注意：cloneNode(deep)中deep为boolean类型为可选项。该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。

举例： var delNode=document.getElementById("first");            获取节点 delnode
            delNode.parentNode.removeChild(delNode);                 删除节点 delnode

            var oldNode=document.getElementById("second");  获取旧节点 oldNode
            var newNode=document.createElement("img");       获取新节点 newNode
            newNode.setAttribute("src","images/f03.jpg");           设置新节点的属性
            oldNode.parentNode.replaceChild(newNode,oldNode); 新节点替换旧节点
解释：无论在删除还是替换旧节点需要先获取上级节点所以需要   节点.parentNode 来获上级节点

6.操作节点样式
        document.get~~.style.属性/事件/
    例如：document.getElementById("aa").style.color="red"; id为”aa“的节点的字体颜色为红色
               document.getElementById("aa").onclick=eat();  id为”aa“的节点的点击事件为 ss() 事件

7.获取元素位置：

获取元素样式： 1.document.defaultView.getComputedStyle(元素,null).属性;
                   例：document.defaultView.getComputedStyle(a,null).display
                         2.HTML元素. currentStyle.样式属性; 兼容IE
                   例：document.getElementById("aa").currentStyle.height
                         3.HTML元素.style.样式属性
                    例：document.getElementById("aa").style

注意获取的值需要转换为数值类型才能使用 

8.补充内容 ：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

获取当前页面滚动条纵坐标的位置：document.body.scrollTop与document.documentElement.scrollTop
|获取当前页面滚动条横坐标的位置：document.body.scrollLeft与document.documentElement.scrollLeft

9.关于offset~~和style.top等的区别
我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的，二者的区别是：

一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。(这里的style.top是读的css样式中的top:20px;这种形式的值,所以是带有"px"的)

二、offsetTop 只读，而 style.top 可读写。(style.top赋值切记加上"px",测试过发现IE下用数值是可以的,但其它主流chrome,opera,ff,safari都不能识别,所以必须加"px")

三、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也都是类似区别。