JavaScript中對DOM節點的存取、建立、修改、刪除

首頁

web前端

js教程

JavaScript中對DOM節點的存取、建立、修改、刪除_基礎知識

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:32 PM

domjavascriptjs

DOM
DOM就是Document object Model的縮寫。文檔物件模型是把XML或HTML以樹節點為表現形式的文檔。用DOM方法和屬性，你可以訪問，修改，刪除頁面上任意一個元素，也是可以新增一個元素。 DOM是獨立於語言的API，可以被任意語言實現，當然也包括了Javascript
看看下面的一個文字。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
 <head> 
  <title>My page</title> 
 </head> 
 <body> 
  <p class="opener">first paragraph</p> 
  <p><em>second</em> paragraph</p> 
  <p id="closer">final</p> 
 </body> 
</html>

我們來看看第二段

<p><em>second</em> paragraph</p>

可以看到這是p標籤。它被包含在body標籤中。所以說body是p的父節點，p是子節點。第一段和第三段也是body的子節點。它們都是第二段的兄弟節點。這個em標籤是第二段p的子節點。因此p就是它的父節點。父子節點關係能描繪出像樹一樣的關係。所以叫做DOM結構樹(DOM tree).

Core DOM 和 HTML DOM
我們已經知道DOM可以描繪出HTML和XML文件。事實上HTML文檔就是XML文檔，只不過更規範些。因此作為DOM Level 1的一部分，Core DOM規範適用於所有XML文檔以及HTML DOM規範擴展了Core DOM.當然HTML DOM不能適用於所有的XML文檔，僅適用於HTML文檔。讓我們來看看Core DOM和HTML DOM的構造器。

構造器關係

20151116142938841.png (639×572)

訪問DOM節點
當要驗證表單或更換圖片之前，我們要知道怎麼樣存取元素(element.)。有很多方法獲取元素。

Document節點
透過document我們可以存取目前的文件。我們可以透過firebugs（火狐插件），來查看document的屬性和方法。

所有的節點都有nodeType,nodeName,nodeValue的屬性。我們來看看document的nodeType是什麼

document.nodeType;//9

一共有12節點類型。 document是9。常用的是元素(element:1),屬性(attribute:2),文本(text:3)。
節點還有名稱。對於HTML標籤。節點名稱就是標籤名稱。文字節點(text)的名字是#text.文檔節點(document)的名字是#document.

節點也有值。對於文字節點，值就是文字。 document的值為null

documentElement
XML都會有個ROOT節點來包裝文件包含起來。對於HTML文件。 ROOT節點就是html標籤。訪問root節點。可以用documentElement的屬性。

document.documentElement;//<html> 
document.documentElement.nodeType;//1 
document.documentElement.nodeName;//HTML 
document.documentElement.tagName;//对于element，nodeName和tagName相同

Child Nodes
為了確定是否包含子節點我們可以用以下方法

document.documentElement.hasChildNodes();//true

HTML有兩個子節點。

document.documentElement.childNodes.length;//2 
 
document.documentElement.childNodes[0];//<head> 
 
document.documentElement.childNodes[1];//<body>

也可以透過子節點存取父節點

document.documentElement.childNodes[1].parentNode;//<html>

我們把body的引用賦值變數

var bd = document.documentElement.childNodes[1]; 
bd.childNodes.length;//9

讓我們來看看body的結構

<body> 
 <p class="opener">first paragraph</p> 
 <p><em>second</em> paragraph</p> 
 <p id="closer">final</p> 
 <!-- and that's about it --> 
</body>

為什麼子節點個數為9個呢。
首先是4個P還有一個註釋一共4個。
4個節點包含了3個空白的節點。這就7個。
第8個在body和第一個p之間的空白節點。
第9個就是在註解與

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。