技術標籤：javascript

JavaScript操作DOM物件

• 1.DOM操作
• • 1.1 DOM操作分類
  • • 1.1.1 DOM Core
    • 1.1.2 HTML —DOM
    • 1.1.3 CSS —DOM
  • 1.2 節點和節點關係
  • 1.3 訪問節點
  • • 1.3.1 使用getElement系列方法訪問指定節點
    • 1.3.2 根據層次關係訪問節點
  • 1.3 節點資訊
• 2 操作節點
• • 2.1 操作節點的屬性
  • • 2.1.1 刪除和替換節點
  • 2.2操作節點樣式
  • • 2.2.1 style屬性
    • 2.2.2 className屬性
  • 2.3 獲取元素的樣式
  • 2.4 獲取元素位置
  • • 2.4.1 元素屬性應用

1.DOM操作

DOM是Document Object Model 的縮寫，即文件物件模型，是基於文件程式設計的一套API介面 1998年，W3C 釋出了第一級的 DOM規範，這個規範允許訪問和操作HTML頁面中的每個單獨元素，如網頁的表格、圖片，文字、表單元素等。由於大部分主流的瀏覽器都執行了這個標準，因此基本解決了瀏覽器相容性的問題。

1.1 DOM操作分類

使用JavaScript操作DOM時通常分為三類，DOMCore (核心) HTML，DOM和CSS -DOM。

1.1.1 DOM Core

DOM Core不是JavaScript的專屬品任何一種支援DOM的程式語言都可以使用它，它的用途不僅限於處理一種使用標記語言編寫出來的文件，如HTML。

1.1.2 HTML —DOM

使用JavaScript和DOM為HTML文件編寫指令碼時，有許多專屬的HTML–DOM屬性.HTML-DOM 出現的比DOM Core 更早，它提供了一些更簡單的標記來描述各種HTML元素的屬性，如 document . forms,獲取表單物件。
需要提醒大家注意的是，獲取DOM模型中的某些物件、屬性，既可以使用DOM Core實現，也 可以使用HTML- _DOM 實現，相對於DOM Core獲取物件、屬性而言，當使用HTML—DOM時，程式碼通 常較為簡短，只是它的應用範圍沒有DOM Core廣泛，僅適用於處理HTML文件。

1.1.3 CSS —DOM

CSS —DOM是針對CSS的操作，在JavaScript 中，CSS —DOM技術的主要作用是獲取和設定style物件的各種屬性.即CSS屬性，通過改變style物件的各種屬性，可以使用網頁呈現出各種不同的效 果，如element . style . color= "red”， 設定文字為紅色。
以上大家知道了什麼是DOM，DOM在網頁製作中的作用，以及與JavaScript相結合製作網頁效果，下面來看看DOM中的節點及節點之間的關係。

1.2 節點和節點關係

DOM是以樹狀結構組織的HTML文件，根據DOM概念，我們可以知道，HTML文件中每個標籤或元素都是一個節點，在DOM中是這樣的。

• 整個文件是一個文件節點。
• 每個HTML標籤是一個元素節點。
• 包含在HTML元素中的文字是文字節點。
• 每個HTML屬性是一個屬性節點。
• 註釋屬於註釋節點。

文件節點結構圖

使用父(parent)、 子(child) 和同胞(sibling) 等術語來描述這些節點的層次關係，父節點擁有子節點，同級的子節點被稱為同胞或兄弟節點，它們的關係如下。

• 在節點樹中，頂部節點被稱為根(root)， 如（html）節 點。

• 每個節點都有父節點，除了根(它沒有父節點)，如（head）和（body）的父節點都是（html），文字節點“DOM應用”的父節點是（p）節點。

• 一 個節點可以擁有任意數量的子節點，如（body）節點的子節點有（img）， （h1）和（p）。

• 同胞節點是擁有相同父節點的節點，如（img），（h1）和（p）就是兄弟節點，它們的父節點均為（body）節點。

由於HTML文件中的標籤、元素等都是一個節點，並且各個節點之間都存在著關係，因此JavaScript可以通過訪問或改變節點的方式來改變頁面的內容，使用JavaScript操作節點主要是訪問節點、在文件中建立和增加節點、刪除節點、替換節點，以及操作節點屬性和樣式等，下面首先學習一下如何訪問節點。

1.3 訪問節點

使用DOM Core訪問HTML文件的節點主要有兩種方式，-種是使用getElement系列方法訪問指定節點，另外一種是根據節點的層次關係訪問節點。

1.3.1 使用getElement系列方法訪問指定節點

在HTML 文件中，訪問節點的標準方法就是我們之前學習的getElement 系列方法，即 getElementByld( )、getElementsByName( )和getElementsByTagName( )，只是它們查詢的方法略有不同。

• getElementByld( )；返回按id屬性查詢的第一一個物件的引用。

• getElementsByName( )；返回按帶有指定名稱name查詢的物件的集合，由於一個文件中可能會有多個同名節點(如複選框、單選按鈕)，因此返回的是元素陣列。

• getElementsByTagName( )；返回帶有指定標籤名TagName 查詢的物件的集合，由於-一個文 檔中可能會有多個同類型的標籤節點(如圖片組、文字輸入框)， 因此返回元素陣列。

1.3.2 根據層次關係訪問節點

通過getElementByld( )、getElementsByName( )和getElementsByTagName( )這三種方法可檢視 HTM文件中的任何元素，但是這三種方法都會忽略文件的結構，因此在HTML DOM中提供了一些節點屬性.這些屬性可遵循文件的結構，在文件的區域性進行‘短距離地查詢元素”。
節點屬性

在JavaScript中提供一組相容不同瀏覽器的element屬性，可以消除因空行，執行等出現的無法準確訪問到節點的情況。
element屬性

注意
在IE下支援firstChild、 lastChild、 previousSibling、 nextSibling, 但是在FireFox 下由於它會把標籤之間的空格、換行等當成文字節點，因此為了準確地找到相應的元素，使用 firstElementChild、lastElementChild、 previousElementSibling、 nextElementSibling 來相容瀏覽器。

1.3 節點資訊

節點是DOM層次結構中的任何型別的物件的通用名稱，每個節點都擁有包含著關於節點某些資訊的屬性，這些屬性如下：

• nodeName（節點名稱）。
• nodeValue（節點值）。
• nodeType（節點型別）。

nodeName屬性包含某個節點的名稱，元素節點的nodeName 是標籤名稱，屬性節點的nodeNane
是屬性名稱，文字節點的nodeName永遠是#text,文件節點的nodeName永遠是# document。
nodeValue節點值，對於文字節點，nodeValue 屬性包含文字;對於屬性節點，nodeValue 屬性包
含屬性值: nodeValue 屬性對於文件節點和元素節點是不可用的。
nodeType屬性可返回節點的型別，是一 一個只讀屬性， 如返回的是元素節點、文字節點、註釋節
點等。
節點型別

2 操作節點

在網頁開發中，如果想動態地改變網頁內容，如改變文件中一個圖片的路徑、動態增加一個圖片、刪除網頁中的一些內容、動態改變網頁內容樣式.這些都需要對網頁中的節點進行操作，主要是對節點屬性、節點、節點樣式進行操作。

2.1 操作節點的屬性

HTML DOM提供了獲取及改變節點屬性值的標準方法，如下所示。

• getAttribute(“屬性名” ):用來獲取屬性的值。

• setAttribute(”屬性名”，”屬性值”):用來設定屬性的值。

2.1.1 刪除和替換節點

刪除和替換節點的方法：

方法replaceChild（newNod，oldNode）中的兩個引數，newNode是替換的新節點，oldNode是要被替換的節點。

2.2操作節點樣式

其實我們可以使用gelElement 系列 方法訪問頁面的節點，通過改變節點的樣式屬性，就可以實現這樣的效果，在JavaScript中， 有兩種方式可以動態地改變樣式的屬性，一種是使用樣式的style屬性，另-種是使用樣式的className屬性，下面主要介紹這兩種屬性的用法。

2.2.1 style屬性

在HTML DOM中，style是一個物件，代表一個單獨的樣式宣告，可通過應用樣式的文件或元素訪問style物件，使用style屬性改變樣式的語法如下：

HTML 元素.style.樣式屬性="值";

style物件的常用屬性：

常用事件：

2.2.2 className屬性

在HTML DOM中，className 屬性可設定或返回元素的class樣式，語法如下：

HTML 元素.className="樣式名稱";

2.3 獲取元素的樣式

在JavaScript中可以使用style屬性獲取樣式的屬性值，語法如下：

HTML 元素.style.樣式屬性;

currentStyle物件與style物件的使用方式一樣，語法如下：

HTML 元素.currentStyle.樣式屬性;

2.4 獲取元素位置

使用currentStyle 或getComputedStyle( )可以獲得元素的屬性值，即可以獲取元素在網頁中的位置，大家在.上網時經常會看到有一些網頁左側、右側或右下底部的廣告圖片，無論滾動條如何滾動，這些內容一直在瀏覽器的固定位置，這樣的效果該如何實現呢?這就涉及獲取滾動條滾動的距離了。

2.4.1 元素屬性應用

HTML中元素的屬性：

語法：

document.documentElement.scrollTop;
//或者
document.body.scrollTop;