JavaScript操作DOM对象

1.DOM操作分类(三类):
(1)DOM Core(核心)
(2)HTML-DOM
(3)CSS-DOM

2.节点的定义：
(1)整个文档是一个文档节点
(2)每个HTML标签是一个元素节点
(3)包含在HTML元素中的文本是文本节点
(4)每个HTML属性是一个属性节点
(5)注释属于注释节点

3.访问节点:
借点属性：
parenNode: 返回节点的父节点
childNodes: 返回子节点集合，childNodes[i]
firstChild: 返回节点的第一个子节点
laseChild: 返回节点的最后一个子节点
nextSibling: 下一个节点
previousSibling: 上一个节点

例：var div1=document.getElementById("div1");
//div1.parentNode.innerHTML

innerHTML：获取文本信息

注：对于不同的浏览器，有可能空格，注释，回车，标签，都是节点
为了解决浏览器兼容问题
使用element属性：

firstElementChild: 返回节点的第一个子节点
laseElementChild: 返回节点的最后一个子节点
nextElementSibling: 下一个节点
previousElementSibling: 上一个节点

4.节点信息：
nodeName: 获取节点的名称
nodeValue： 获取节点的值
nodeType: 节点类型

节点名称，值，类型的信息如下：

节点的类型 获取节点的名称(nodeName) 获取节点的值(nodeValue) 获取节点的类型(nodeType)
元素(element) 标签名 null 1
属性(attr) 属性名 属性值 2
文本(text) #text 文本内容 3
注释(comment) #comment 注释内容 8
文档(document) #document null 9

例： div1.nodeName 元素节点：标签名
//div1.firstElementChild.firstChild.nodeName 文本节点：#text
//div1.firstElementChild.getAttributeNode("style").nodeName 属性节点：属性名

5.操作节点的属性：
getAttribute("属性名")； 用来获取属性的值

例：var str=arr[0].getAttribute("type");

setAttribute("属性名","属性值")； 用来设置属性的值

例：var img1=document.getElementsByTagName("img")[0];
img1.setAttribute("src","images/dd_logo.jpg");

6.创建和插入节点：
createElement(tagName) 创建一个标签名为tagName的新的元素节点
A.appendChild(B) 把B节点追加至A节点的末尾
insertBefore(A,B) 把A节点插入到B节点之前
cloneNode(deep) 复制某个指定的节点 注：deep为布尔值，为true时，则赋复制该节点以及该节点的所有子节点 ， 为false时：只复制该节点和其属性

例： /*img1.setAttribute("src","images/shoppingBg.jpg");*/
div1.insertBefore(div2,div1.firstChild);//在子元素前置插入

7.删除和替换节点：
removeChild(node) 删除指定节点
replaceChild(newNode,oldNode) 用其他的节点替换指定节点

例：obj.parentNode.removeChild(obj.previousElementSibling);//删除
例： var img1=document.createElement("img");
img1.setAttribute("src","images/shoppingBg.jpg");
obj.parentNode.replaceChild(img1,obj.previousElementSibling);//替换

8.操作节点的样式：
(1)style属性：
语法：HTML元素.style.样式属性="值";

注：凡是有例如font-size中间有 "-"的，后面首字母大写 例:font-size 写为：fontSize;

例：obj.firstElementChild.style.display="block";//给指定元素添加style属性值

(2)className属性：
语法：HTML元素.className="样式名称";

例：
#div1 .a{ display: block; }//先创建样式
obj.firstElementChild.className="a";//给指定元素添加类样式

9.常用的鼠标事件：
onclick: 当用户点击某个对象是调用的事件
onmouseover: 鼠标移动到某个元素上
onmouseout: 鼠标从某元素移开
onmousedown: 鼠标按钮被按下

10. 获取元素的样式：
语法：HTML元素.style.样式属性; (只能获取行内样式)
HTML元素.currentStyle.样式属性; (只能为IE浏览器)
document.defaultView.getComputedStyle(元素,null).属性 (IE不支持)

例： // alert(document.defaultView.getComputedStyle(obj.firstElementChild,null).display);

11.获取元素的位置：

HTML中元素的常见的属性如下：
offsetLeft: 返回当前元素左边界到它上级元素的左边界到的距离，只读属性
offsetTop: 返回当前元素上边界到它上级元素的上边界到的距离，只读属性
offsetHeight: 返回元素可见高度(包含边框)
offsetWidth: 返回元素可见宽度
offsetParent: 返回元素的便宜容器，及最近的动态定位的包含元素的引用
scrollTop: 返回匹配元素的滚动条的垂直位置
scrollLeft: 返回匹配元素的滚动条的水平位置
clientWidth: 返回元素的可见宽度（不包括边框）
clientHeight: 返回元素的可见高度

语法：document.documentElement.scrollTop;//获取当前滚动条距离顶端的偏移量
document.documentElement.scrollLeft;//获取当前滚动条距离左端的偏移量

或者：document.body.scrollTop;
document.body.scrollLeft;

(以上两种方式都可以获取滚动条距离上端和左端的距离，但有的浏览器不兼容某一种方法，所以建议写成一下方法）
var sTop= document.documentElement.scrollTop || document.body.scrollTop;