JavaScript操作-DOM對象

標籤：名稱   test   設定   view   可見   樹狀   rtb   strong   垂直   

DOM是Document Object Model的縮寫，即文件物件模型，是基於文檔編程的一套API介面

一、節點和節點關係

DOM是以樹狀結構組織HTML文檔的，HTML文檔中的每個標籤或元素都是一個節點，

　　01、整個文檔是一個文檔節點

　　02、每個HTML標籤是一個元素節點

　　03、包含在HTML元素中的文本是文本節點

　　04、每一個HTML 屬性是一個屬性節點

　　05、注釋屬於注釋節點

訪問節點

　　01、get系列　　getElementById（）、getElementByName（）、getElementByTagName（）

　　02、（下列方法會把注釋和空格換行作為一個節點）

　　　　parentNode　　返回節點的父節點

　　　　childNodes　　返回子節點的集合

　　　　firstChild　　　　返回節點的第一個子節點

　　　　lastChild　　　　返回節點的最後一個子節點

　　　　nextSibling　　返回下一個節點

　　　　previousSibling　　返回上一個節點

　　03、（返回元素節點-不解析空格、注釋、換行）

　　　　firstElementChild　　　　第一個子節點

　　　　lastElementChild　　　　最後一個子節點

　　　　nextElementSibling　　下一個子節點

　　　　previousElementSibling　　上一個子節點

節點資訊

　　nodeName（節點名稱）

　　　　元素的nodeName是標籤名稱，屬性節點的nodeName是屬性名稱，文本節點的nodeName永遠是#text，文檔節點的nodeName永遠是#document

　　nodeValue（節點值）

　　　　文本節點的nodeValue是所包含的文本，屬性節點的nodeValue是對應的屬性值，nodeValue對於文檔節點和元素節點是停用

　　nodeType（節點類型）

　　　　元素節點：返回1

　　　　屬性節點：返回2

　　　　文本節點：返回3

　　　　注釋節點：返回8

　　　　文檔節點：返回9

二、動作節點

動作節點屬性

　　getAttribute（"屬性名稱"）：用來擷取屬性的值（區別：getAttributeNode()-用來獲得屬性節點）

　　setAttribute（"屬性名稱","屬性值"）：用來設定屬性值

建立和插入節點

　　createElement(tagName)　　建立一個標籤名為tagName的新元素節點

　　A.appendChild(B)　　　　把B節點作為子節點，添加A節點的末尾

　　A.insertBefore(C,D)　　　　把D節點作為子節點，添加到A節點的子節點D之前

　　cloneNode(deep)　　　deep控制複製深度，deep為true：則複製該節點及該節點的所有子節點。deep為false：只複製該節和屬性

刪除和替換節點（都要藉助父節點parentNode來完成）

　　removeChild(node)　　刪除指定節點

　　replaceChild(newNode,oldNode)　　替換節點

動作節點樣式

　　style屬性

　　　　文法：HTML元素.style.樣式屬性="值‘

　　ClassName

　　　　HTML元素.ClassName="樣式名稱"（前提要在css外部檔案設定了相應的樣式）

擷取元素樣式

　　擷取內聯樣式：

　　　　文法：HTML元素.style.樣式屬性

　　擷取外部樣式：

　　　　01、IE：

　　　　　　文法：HTML元素.currentStyle.樣式屬性

　　　　02、Firefox、opera、Safari、Chrome

　　　　　　文法：document.defaultView.getComputeStyle(元素,null).屬性

　　擷取元素位置

　　　　offsetLeft　　返回當前元素左邊界到上階項目的左邊界的距離（即左外邊距），唯讀屬性

　　　　offsetTop　　返回當前元素上邊界到上階項目的上邊界的距離（即上外邊距），唯讀屬性

　　　　offsetHeight　　返回元素的高度

　　　　offsetWidth　　返回元素寬度

　　　　scrollTop　　返回匹配元素的捲軸的垂直位置

　　　　scrollLeft　　返回匹配元素的滾動天的水平位置

　　　　clientWidth　　返回元素的可見寬度

　　　　clientHeight　　返回元素的可見高度

　　　

　　　　獲得捲軸位置有瀏覽器安全色問題

　　　　　　標準瀏覽器只認識：document.documentElement.scrollTop;　　document.documentElement.scrollLeft;

　　　　　　Chrome 只認識：document.body.scrollTop;　　document.body.scrollLeft;

　　　　解決辦法：var sTop=document.documentElement.scrollTop || document.body.scrollTop;(用||邏輯關係符號)

 

JavaScript操作-DOM對象