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;