DOM常用的訪問方法

⑴ 常見的DOM操作有哪些

前言

DOM（Document Object Model）即文檔對象模型，針對 HTML 和 XML 文檔的 API（應用程序介面）。DOM 描繪了一個層次化的節點樹，運行開發人員添加、移除和修改頁面的某一部分。DOM 脫胎於 Netscape 及微軟公司創始的 DHTML（動態 HTML），但現在它已經成為表現和操作頁面標記的真正跨平台、語言中立的方式。

閱讀目錄

基本概念
節點創建型api
頁面修改型API
節點查詢型API
節點關系型api
元素屬性型api
元素樣式型api

總結

文本整理了javascript操作DOM的一些常用的api，根據其作用整理成為創建，修改，查詢等多種類型的api，主要用於復習基礎知識，加深對原生js的認識。

基本概念

在講解操作DOM的api之前，首先我們來復習一下一些基本概念，這些概念是掌握api的關鍵，必須理解它們。

Node類型

DOM1級定義了一個Node介面，該介面由DOM中所有節點類型實現。這個Node介面在JS中是作為Node類型實現的。在IE9以下版本無法訪問到這個類型，JS中所有節點都繼承自Node類型，都共享著相同的基本屬性和方法。

Node有一個屬性nodeType表示Node的類型，它是一個整數，其數值分別表示相應的Node類型，具體如下：

Node.ELEMENT_NODE:1
Node.ATTRIBUTE_NODE:2
Node.TEXT_NODE:3
Node.CDATA_SECTION_NODE:4
Node.ENTITY_REFERENCE_NODE:5
Node.ENTITY_NODE:6
Node.PROCESSING_INSTRUCTION_NODE:7
Node.COMMENT_NODE:8
Node.DOCUMENT_NODE:9
Node.DOCUMENT_TYPE_NODE:10
Node.DOCUMENT_FRAGMENT_NODE:11
Node.NOTATION_NODE:12

假設我們要判斷一個Node是不是元素，我們可以這樣判斷
if(someNode.nodeType == ){ console.log("Node is a element"); }
這些Node類型中，我們最常用的就是element，text，attribute，comment，document，document_fragment這幾種類型。
我們簡單來介紹一下這幾種類型：

Element類型

Element提供了對元素標簽名，子節點和特性的訪問，我們常用HTML元素比如div，span，a等標簽就是element中的一種。Element有下面幾條特性：

（1）nodeType為1
（2）nodeName為元素標簽名，tagName也是返回標簽名
（3）nodeValue為null
（4）parentNode可能是Document或Element
（5）子節點可能是Element，Text，Comment，Processing_Instruction，CDATASection或EntityReference

⑵ 常用的 HTML DOM 屬性是什麼

常用的屬性有，innerHTML屬性、nodeName屬性、nodeValue屬性、nodeType屬性等。

1、innerHTML屬性，是獲取元素內容的最簡單方法。innerHTML 屬性對於獲取或替換 HTML 元素的內容很有用。

2、nodeName屬性，規定節點的名稱。nodeName 是只讀的。

3、nodeValue屬性，規定節點的值。對於元素類型的節點，其nodeValue 是 undefined 或 null；對於文本類型的節點，其nodeValue 是文本本身；對於屬性類型的節點，其nodeValue是屬性值。

4、nodeType屬性，返回節點的類型。nodeType 是只讀的。比較重要的節點類型有，元素（類型值為1），屬性（類型值為2），文本（類型值為3），注釋（類型值為8），文檔（類型值為9）。

(2)DOM常用的訪問方法擴展閱讀

1、DOM屬性訪問方式

可通過 JavaScript （以及其他編程語言）對 HTML DOM 進行訪問。所有 HTML 元素被定義為對象，而編程介面則是對象方法和對象屬性。方法是您能夠執行的動作（比如添加或修改元素）。屬性是您能夠獲取或設置的值（比如節點的名稱或內容）。

2、DOM其他屬性

innerText屬性設置或獲取位於對象起始和結束標簽內的文本，disabled屬性獲取表明用戶是否可與該對象交互的值，nextSibling屬性獲取對此對象的下一個兄弟對象的引用，tagName屬性獲取對象的標簽名稱。

參考資料

網路-DOM

⑶ DOM的訪問節點

你可通過若干種方法來查找您希望操作的元素：
通過使用 getElementById() 和 getElementsByTagName() 方法
通過使用一個元素節點的 parentNode、firstChild 以及 lastChild 屬性
getElementById() 和 getElementsByTagName() 這兩種方法，可查找整個 HTML 文檔中的任何 HTML 元素。
這兩種方法會忽略文檔的結構。假如您希望查找文檔中所有的 <p> 元素，getElementsByTagName() 會把它們全部找到，不管 <p> 元素處於文檔中的哪個層次。同時，getElementById() 方法也會返回正確的元素，不論它被隱藏在文檔結構中的什麼位置。
這兩種方法會向您提供任何你所需要的 HTML 元素，不論它們在文檔中所處的位置！
getElementById() 可通過指定的 ID 來返回元素：
getElementById() 語法
document.getElementById("ID");注釋：getElementById() 無法工作在 XML 中。在 XML 文檔中，您必須通過擁有類型 id 的屬性來進行搜索，而此類型必須在 XML DTD 中進行聲明。
getElementsByTagName() 方法會使用指定的標簽名返回所有的元素（作為一個節點列表），這些元素是您在使用此方法時所處的元素的後代。
getElementsByTagName() 可被用於任何的 HTML 元素：
getElementsByTagName() 語法
document.getElementsByTagName("標簽名稱");或者：
document.getElementById('ID').getElementsByTagName("標簽名稱"); 下面這個例子會返迴文檔中所有 <p> 元素的一個節點列表：
document.getElementsByTagName("p"); 下面這個例子會返回所有 <p> 元素的一個節點列表，且這些 <p> 元素必須是 id 為 "maindiv" 的元素的後代：
document.getElementById('maindiv').getElementsByTagName("p"); 當我們使用節點列表時，通常要把此列表保存在一個變數中，就像這樣：
var x=document.getElementsByTagName("p");現在，變數 x 包含著頁面中所有 <p> 元素的一個列表，並且我們可以通過它們的索引號來訪問這些 <p> 元素。
注釋：索引號從 0 開始。
您可以通過使用 length 屬性來循環遍歷節點列表：
var x=document.getElementsByTagName("p"); for (var i=0;i<x.length;i++) { // do something with each paragraph }您也可以通過索引號來訪問某個具體的元素。
要訪問第三個 <p> 元素，您可以這么寫：
var y=x[2];
parentNode、firstChild以及lastChild
這三個屬性 parentNode、firstChild 以及 lastChild 可遵循文檔的結構，在文檔中進行「短距離的旅行」。
請看下面這個 HTML 片段：
<table>
<tr>
<td>John</td>
<td>Doe</td>
<td>Alaska</td>
</tr>
</table>
在上面的HTML代碼中，第一個 <td> 是 <tr> 元素的首個子元素（firstChild），而最後一個 <td> 是 <tr>元素的最後一個子元素（lastChild）。
此外，<tr> 是每個 <td>元 素的父節點（parentNode）。
對 firstChild 最普遍的用法是訪問某個元素的文本：
var x=[a paragraph]; var text=x.firstChild.nodeValue;parentNode 屬性常被用來改變文檔的結構。假設您希望從文檔中刪除帶有 id 為 "maindiv" 的節點：
var x=document.getElementById("maindiv"); x.parentNode.removeChild(x);首先，您需要找到帶有指定 id 的節點，然後移至其父節點並執行 removeChild() 方法。

⑷ js 如何減少dom訪問

減少訪問DOM的次數提升javascript性能。
1.批量讀寫
當我們需要獲取某一屬性，這一屬性需要計算才能得到，並且隊列中存在尚未提交的DOM修改操作，則此時，DOM修改操作的隊列將會被提交。
為了提高效率，減少更新render tree的次數，可以先統一讀取屬性，然後統一修改DOM，這樣，就可以減少更新render tree的次數。
2.虛擬結點
當我們需要對DOM做出大量修改時，可以先創建一個虛擬結點，將所有修改附加在該節點，最後將該虛擬節點一次性提交給在render tree上存在的結點，則相當於只提交了一次修改操作。
3.查找元素的優化

因為ID是唯一的，也有原始的方法，因此使用ID查找元素是最快的，其次的是根據類和類型查找元素，通過屬性查找元素是最慢的，因此應該盡可能的通過ID或者類來查找元素，避免通過類來查找元素。
4.改變DOM，包括添加，修改，刪除DOM
改變DOM就會引起瀏覽器渲染，而渲染是相當慢的，因此應該避免不必要的渲染。
5.改變DOM的樣式類等

改變DOM元素的樣式，類也會導致瀏覽器渲染，因此也應該減少不必要的操作。
6.減少iframe

iframe需要消耗大量的時間，並阻塞下載，應該少用。
7.樣式放在head中，腳本放在關閉標簽</body>之前

樣式放在head中，可以加快渲染，腳本放在關閉標簽</body>之前可以加快下載速度，不免阻塞下載。

⑸ JS操作DOM的幾個屬性與方法

W3C DOM和JavaScript很容易混淆不清。DOM是面向HTML和XML文檔的API，為文檔提供了結構化表示，並定義了如何通過腳本來訪問文檔結構。JavaScript則是用於訪問和處理DOM的語言。如果沒有DOM，JavaScript根本沒有Web頁面和構成頁面元素的概念。文檔中的每個元素都是DOM的一部分，這就使得JavaScript可以訪問元素的屬性和方法。

DOM獨立於具體的編程語言，通常通過JavaScript訪問DOM，不過並不嚴格要求這樣。可以使用任何腳本語言來訪問DOM，這要歸功於其一致的API。表3-1列出了DOM元素的一些有用的屬性，表3-2列出了一些有用的方法。

⑹ 簡述文檔對象模型中常用的查找訪問元素節點的方法。

1. 通過ID,使用 getElementById() 獲得標簽節點
2. 通過標簽的名稱,使用getElementsByTagName() 獲得元素節點或標簽節點
注意：以上的查找方式都會忽略文檔的結構
3. 通過使用一個元素節點的 parentNode、firstChild 以及 lastChild 屬性
4. 節點名稱nodeName
a) 如果節點是標簽，nodeName是標簽名稱
b) 如果節點是屬性，nodeName是屬性名稱
c) 如果節點是文本節點，nodeName是#text
d) 如果節點是文檔，nodeName是#document
5. 節點值nodeValue
6. 節點類型nodeType

⑺ 怎麼樣用asp技術訪問dom介面的方法

<%
'初始化變數
dim xmld
'建立XML對象
set xmld=Server.CreateObject("Microsoft.XMLDOM")
'創建屬性是否獨立使用的
xmld.async=false
'載入在伺服器上的XML文件
xmld.load(server.mappath("skin.xml"))

%>

⑻ DOM訪問元素節點有幾種方法分別是哪些

1. 通過頂層document節點獲取：
（1） document.getElementById(elementId) ：該方法通過節點的ID，可以准確獲得需要的元素，是比較簡單快捷的方法。如果頁面上含有多個相同id的節點，那麼只返回第一個節點。
如今，已經出現了如prototype、Mootools等多個JavaScript庫，它們提供了更簡便的方法：$(id)，參數仍然是節點的id。這個方法可以看作是document.getElementById()的另外一種寫法，不過$()的功能更為強大，具體用法可以參考它們各自的API文檔。
（2）document.getElementsByName(elementName) ：該方法是通過節點的name獲取節點，從名字可以看出，這個方法返回的不是一個節點元素，而是具有同樣名稱的節點數組。然後，我們可以通過要獲取節點的某個屬性來循環判斷是否為需要的節點。
例如：在HTML中checkbox和radio都是通過相同的name屬性值，來標識一個組內的元素。如果我們現在要獲取被選中的元素，首先獲取改組元素，然後循環判斷是節點的checked屬性值是否為true即可。
（3）document.getElementsByTagName(tagName) ：該方法是通過節點的Tag獲取節點，同樣該方法也是返回一個數組，例如：document.getElementsByTagName('A')將會返回頁面上所有超鏈接節點。在獲取節點之前，一般都是知道節點的類型的，所以使用該方法比較簡單。但是缺點也是顯而易見，那就是返回的數組可能十分龐大，這樣就會浪費很多時間。那麼，這個方法是不是就沒有用處了呢？當然不是，這個方法和上面的兩個不同，它不是document節點的專有方法，還可以應用其他的節點，下面將會提到。
2、通過父節點獲取：
（1）parentObj.firstChild ：如果節點為已知節點（parentObj）的第一個子節點就可以使用這個方法。這個屬性是可以遞歸使用的，也就是支持parentObj.firstChild.firstChild.firstChild...的形式，如此就可以獲得更深層次的節點。
（2）parentObj.lastChild ：很顯然，這個屬性是獲取已知節點（parentObj）的最後一個子節點。與firstChild一樣，它也可以遞歸使用。
在使用中，如果我們把二者結合起來，那麼將會達到更加令人興奮的效果，即：parentObj.firstChild.lastChild.lastChild...
（3）parentObj.childNodes ：獲取已知節點的子節點數組，然後可以通過循環或者索引找到需要的節點。
注意 ：經測試發現，在IE7上獲取的是直接子節點的數組，而在Firefox2.0.0.11上獲取的是所有子節點即包括子節點的子節點。
（4）parentObj.children ：獲取已知節點的直接子節點數組。
注意 ：經測試，在IE7上，和childNodes效果一樣，而Firefox2.0.0.11不支持。這也是為什麼我要使用和其他方法不同樣式的原因。因此不建議使用。
（5）parentObj.getElementsByTagName(tagName) ：使用方法不再贅述，它返回已知節點的所有子節點中類型為指定值的子節點數組。例如：parentObj.getElementsByTagName('A')返回已知的子節點中的所有超鏈接。
3、通過臨近節點獲取：
（1）neighbourNode.previousSibling ：獲取已知節點（neighbourNode）的前一個節點，這個屬性和前面的firstChild、lastChild一樣都似乎可以遞歸使用的。
（2）neighbourNode.nextSibling ：獲取已知節點（neighbourNode）的下一個節點，同樣支持遞歸。
4、通過子節點獲取：
（1）childNode.parentNode ：獲取已知節點的父節點。
上面提到的方法，只是一些基本的方法，如果使用了Prototype等JavaScript庫，可能還獲得其他不同的方法，例如通過節點的class獲取等等。不過，如果能夠靈活運用上面的各種方法，相信應該可以應付大部分的程序。
【注意】這是轉載的文檔：其中通過firstChild和lastChild獲得HTML Node是不可取的。因為，根據瀏覽器的不同，firstChild有可能返回parentObj的屬性對象。

⑼ JS怎樣訪問DOM對象的指定節點

方法很多：
1、document.getElementById通過id訪問節點
2、document.querySelector通過節點的屬性選擇器選擇節點，結果是一個，這個用的比較多
3、document.querySelectorAll通過節點的屬性選擇器選擇節點，結果一個列表，可能是多個元素
4、document.getElementByTagName, document.getElementByClass這兩個比較少用，後一個兼容性好像不是很好

⑽ 常用的 HTML DOM 方法有哪些

常用的 HTML DOM 方法：

• getElementById(id) - 獲取帶有指定 id 的節點（元素）

• appendChild(node) - 插入新的子節點（元素）

• removeChild(node) - 刪除子節點（元素）