HTMLDOM入門級知識有哪些

本篇文章給大家分享的是有關(guān)HTML DOM入門級知識有哪些，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、思禮ssl等。為超過千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的思禮網(wǎng)站制作公司

HTML DOM定義了訪問和操作HTML文檔的標(biāo)準(zhǔn)方法。HTML DOM 把HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹結(jié)構(gòu)（節(jié)點(diǎn)樹）。

51CTO推薦閱讀：大話HTML DOM與XML DOM的區(qū)別與聯(lián)系

HTML DOM簡介

HTML文檔對象模型（HTML Document Object Model）定義了訪問和處理HTML文檔的標(biāo)準(zhǔn)方法。

您應(yīng)當(dāng)具備的基礎(chǔ)知識

在繼續(xù)學(xué)習(xí)之前，您需要對下面的知識有基本的了解：

◆HTML / XHTML

◆JavaScript

什么是DOM？

通過JavaScript，您可以重構(gòu)整個HTML文檔。您可以添加、移除、改變或重排頁面上的項目。要改變頁面的某個東西，JavaScript就需要對HTML文檔中所有元素進(jìn)行訪問的入口。這個入口，連同對HTML元素進(jìn)行添加、移動、改變或移除的方法和屬性，都是通過文檔對象模型來獲得的（DOM）。

在1998年，W3C發(fā)布了***級的DOM規(guī)范。這個規(guī)范允許訪問和操作HTML頁面中的每一個單獨(dú)的元素。所有的瀏覽器都執(zhí)行了這個標(biāo)準(zhǔn)，因此，DOM的兼容性問題也幾乎難覓蹤影了。DOM可被JavaScript用來讀取、改變HTML、XHTML以及XML文檔。DOM被分為不同的部分（核心、XML及HTML）和級別（DOM Level 1/2/3）：

◆Core DOM：定義了一套標(biāo)準(zhǔn)的針對任何結(jié)構(gòu)化文檔的對象。

◆XML DOM：定義了一套標(biāo)準(zhǔn)的針對XML文檔的對象。

◆HTML DOM：定義了一套標(biāo)準(zhǔn)的針對HTML文檔的對象。

HTML DOM 節(jié)點(diǎn)

HTML文檔中的每個成分都是一個節(jié)點(diǎn)。

節(jié)點(diǎn)

根據(jù)DOM，HTML文檔中的每個成分都是一個節(jié)點(diǎn)。DOM是這樣規(guī)定的：

◆整個文檔是一個文檔節(jié)點(diǎn)

◆每個HTML標(biāo)簽是一個元素節(jié)點(diǎn)

◆包含在HTML元素中的文本是文本節(jié)點(diǎn)

◆每一個HTML屬性是一個屬性節(jié)點(diǎn)

◆注釋屬于注釋節(jié)點(diǎn)

Node層次

節(jié)點(diǎn)彼此都有等級關(guān)系。HTML文檔中的所有節(jié)點(diǎn)組成了一個文檔樹（或節(jié)點(diǎn)樹）。HTML文檔中的每個元素、屬性、文本等都代表著樹中的一個節(jié)點(diǎn)。樹起始于文檔節(jié)點(diǎn)，并由此繼續(xù)伸出枝條，直到處于這棵樹***級別的所有文本節(jié)點(diǎn)為止。下面這個圖片表示一個文檔樹（節(jié)點(diǎn)樹）：

HTML DOM 節(jié)點(diǎn)樹

一棵節(jié)點(diǎn)樹中的所有節(jié)點(diǎn)彼此都是有關(guān)系的。

文檔樹（節(jié)點(diǎn)數(shù)）

請看下面這個HTML文檔：  <html>   <head>     <title>DOM Tutorial</title>     </head>     <body>       <h2>DOM Lesson one</h2>       <p>Hello world!</p>     </body>   </html>

上面所有的節(jié)點(diǎn)彼此間都存在關(guān)系。除文檔節(jié)點(diǎn)之外的每個節(jié)點(diǎn)都有父節(jié)點(diǎn)。舉例，<head> 和 <body>的父節(jié)點(diǎn)是<html>節(jié)點(diǎn)，文本節(jié)點(diǎn)"Hello world!"的父節(jié)點(diǎn)是節(jié)點(diǎn)。

大部分元素節(jié)點(diǎn)都有子節(jié)點(diǎn)。比方說，<head>節(jié)點(diǎn)有一個子節(jié)點(diǎn)：<title>節(jié)點(diǎn)。<title>節(jié)點(diǎn)也有一個子節(jié)點(diǎn)：文本節(jié)點(diǎn)"DOM Tutorial"。當(dāng)節(jié)點(diǎn)分享同一個父節(jié)點(diǎn)時，它們就是同輩（同級節(jié)點(diǎn)）。比方說，<h2>和 是同輩，因為它們的父節(jié)點(diǎn)均是<body>節(jié)點(diǎn)。

節(jié)點(diǎn)也可以擁有后代，后代指某個節(jié)點(diǎn)的所有子節(jié)點(diǎn)，或者這些子節(jié)點(diǎn)的子節(jié)點(diǎn)，以此類推。比方說，所有的文本節(jié)點(diǎn)都是<html>節(jié)點(diǎn)的后代，而***個文本節(jié)點(diǎn)是<head>節(jié)點(diǎn)的后代。節(jié)點(diǎn)也可以擁有先輩。先輩是某個節(jié)點(diǎn)的父節(jié)點(diǎn)，或者父節(jié)點(diǎn)的父節(jié)點(diǎn)，以此類推。比方說，所有的文本節(jié)點(diǎn)都可把<html>節(jié)點(diǎn)作為先輩節(jié)點(diǎn)。

HTML DOM訪問節(jié)點(diǎn)

通過DOM，您可訪問HTML文檔中的每個節(jié)點(diǎn)。

查找并訪問節(jié)點(diǎn)

你可通過若干種方法來查找您希望操作的元素：

◆通過使用 getElementById() 和 getElementsByTagName() 方法。

◆通過使用一個元素節(jié)點(diǎn)的parentNode、firstChild以及l(fā)astChild屬性。

getElementById() 和 getElementsByTagName()

getElementById() 和 getElementsByTagName()這兩種方法，可查找整個HTML文檔中的任何HTML元素。

這兩種方法會忽略文檔的結(jié)構(gòu)。假如您希望查找文檔中所有的元素，getElementsByTagName()會把它們?nèi)空业?，不?lt;p>元素處于文檔中的哪個層次。同時，getElementById()方法也會返回正確的元素，不論它被隱藏在文檔結(jié)構(gòu)中的什么位置。這兩種方法會像您提供任何你所需要的HTML元素，不論它們在文檔中所處的位置！getElementById()可通過指定的ID來返回元素：

document.getElementById("ID");

注釋：getElementById() 無法工作在XML中。在XML文檔中，您必須通過擁有類型id的屬性來進(jìn)行搜索，而此類型必須在XML DTD中進(jìn)行聲明。

getElementsByTagName() 方法會使用指定的標(biāo)簽名返回所有的元素（作為一個節(jié)點(diǎn)列表），這些元素是您在使用此方法時所處的元素的后代。getElementsByTagName() 可被用于任何的HTML元素：

getElementsByTagName() 語法

document.getElementsByTagName("標(biāo)簽名稱");

或者：

document.getElementById('ID').getElementsByTagName("標(biāo)簽名稱");

實例 1

下面這個例子會返回文檔中所有元素的一個節(jié)點(diǎn)列表：

document.getElementsByTagName("p");

實例 2

下面這個例子會返回所有元素的一個節(jié)點(diǎn)列表，且這些元素必須是id為"maindiv"的元素的后代：

document.getElementById('maindiv').getElementsByTagName("p");

節(jié)點(diǎn)列表（nodeList）

當(dāng)我們使用節(jié)點(diǎn)列表時，通常要把此列表保存在一個變量中，就像這樣：

var x=document.getElementsByTagName("p");

現(xiàn)在，變量x包含著頁面中所有元素的一個列表，并且我們可以通過它們的索引號來訪問這些元素。注釋：索引號從0開始。您可以通過使用length屬性來循環(huán)遍歷節(jié)點(diǎn)列表：

var x=document.getElementsByTagName("p");  for (var i=0;i<x.length;i++)    {     // do something with each paragraph    }

您也可以通過索引號來訪問某個具體的元素。要訪問第三個元素，您可以這么寫：

var y=x[2];

parentNode、firstChild以及l(fā)astChild

這三個屬性 parentNode、firstChild 以及 lastChild 可遵循文檔的結(jié)構(gòu)，在文檔中進(jìn)行“短距離的旅行”。請看下面這個HTML片段：

<table>   <tr>     <td>John</td>     <td>Doe</td>     <td>Alaska</td>   </tr> </table>

在上面的HTML代碼中，***個<td>是<tr>元素的***子元素（firstChild），而***一個<td>是<tr>元素的***一個子元素（lastChild）。此外，<tr>是每個<td>元素的父節(jié)點(diǎn)（parentNode）。對firstChild最普遍的用法是訪問某個元素的文本：

var x=[a paragraph];  var text=x.firstChild.nodeValue;

parentNode屬性常被用來改變文檔的結(jié)構(gòu)。假設(shè)您希望從文檔中刪除帶有id為"maindiv"的節(jié)點(diǎn)：

var x=document.getElementById("maindiv");  x.parentNode.removeChild(x);

首先，您需要找到帶有指定id的節(jié)點(diǎn)，然后移至其父節(jié)點(diǎn)并執(zhí)行removeChild()方法。

根節(jié)點(diǎn)

有兩種特殊的文檔屬性可用來訪問根節(jié)點(diǎn)：

document.documentElement   document.body

***個屬性可返回存在于XML以及HTML文檔中的文檔根節(jié)點(diǎn)。第二個屬性是對HTML頁面的特殊擴(kuò)展，提供了對<body>標(biāo)簽的直接訪問。

HTML DOM 節(jié)點(diǎn)信息

nodeName、nodeValue以及nodeType包含有關(guān)于節(jié)點(diǎn)的信息。

節(jié)點(diǎn)信息

每個節(jié)點(diǎn)都擁有包含著關(guān)于節(jié)點(diǎn)某些信息的屬性。這些屬性是：

◆nodeName（節(jié)點(diǎn)名稱）

◆nodeValue（節(jié)點(diǎn)值）

◆nodeType（節(jié)點(diǎn)類型）

nodeName

nodeName屬性含有某個節(jié)點(diǎn)的名稱。

◆元素節(jié)點(diǎn)的nodeName是標(biāo)簽名稱

◆屬性節(jié)點(diǎn)的nodeName是屬性名稱

◆文本節(jié)點(diǎn)的nodeName永遠(yuǎn)是#text

◆文檔節(jié)點(diǎn)的nodeName永遠(yuǎn)是#document

注釋：nodeName所包含的XML元素的標(biāo)簽名稱永遠(yuǎn)是大寫的

nodeValue

◆對于文本節(jié)點(diǎn)，nodeValue屬性包含文本。

◆對于屬性節(jié)點(diǎn)，nodeValue屬性包含屬性值。

◆nodeValue屬性對于文檔節(jié)點(diǎn)和元素節(jié)點(diǎn)是不可用的。

nodeType

nodeType屬性可返回節(jié)點(diǎn)的類型。最重要的節(jié)點(diǎn)類型是：

一個 HTML DOM 實例

下面這個例子向我們展示了當(dāng)一個用戶在文檔中點(diǎn)擊時，HTML文檔的背景顏色如何被改變。

<html> <head> <script type="text/javascript"> function ChangeColor()  {  document.body.bgColor="yellow" }  </script> </head> <body onclick="ChangeColor()"> Click on this document!  </body> </html>

以上就是HTML DOM入門級知識有哪些，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文標(biāo)題：HTMLDOM入門級知識有哪些
網(wǎng)頁URL：http://chinadenli.net/article14/jggsge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、響應(yīng)式網(wǎng)站、虛擬主機(jī)、定制網(wǎng)站、全網(wǎng)營銷推廣、App設(shè)計

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

HTMLDOM入門級知識有哪些