HTMLDOM入門級(jí)知識(shí)有哪些
本篇文章給大家分享的是有關(guān)HTML DOM入門級(jí)知識(shí)有哪些，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。
我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、思禮ssl等。為超過(guò)千家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的思禮網(wǎng)站制作公司
HTML DOM定義了訪問(wèn)和操作HTML文檔的標(biāo)準(zhǔn)方法。HTML DOM 把HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹(shù)結(jié)構(gòu)（節(jié)點(diǎn)樹(shù)）。
51CTO推薦閱讀：大話HTML DOM與XML DOM的區(qū)別與聯(lián)系
HTML DOM簡(jiǎn)介
HTML文檔對(duì)象模型（HTML Document Object Model）定義了訪問(wèn)和處理HTML文檔的標(biāo)準(zhǔn)方法。
您應(yīng)當(dāng)具備的基礎(chǔ)知識(shí)
在繼續(xù)學(xué)習(xí)之前，您需要對(duì)下面的知識(shí)有基本的了解：
◆HTML / XHTML
◆JavaScript
什么是DOM？
通過(guò)JavaScript，您可以重構(gòu)整個(gè)HTML文檔。您可以添加、移除、改變或重排頁(yè)面上的項(xiàng)目。要改變頁(yè)面的某個(gè)東西，JavaScript就需要對(duì)HTML文檔中所有元素進(jìn)行訪問(wèn)的入口。這個(gè)入口，連同對(duì)HTML元素進(jìn)行添加、移動(dòng)、改變或移除的方法和屬性，都是通過(guò)文檔對(duì)象模型來(lái)獲得的（DOM）。
在1998年，W3C發(fā)布了***級(jí)的DOM規(guī)范。這個(gè)規(guī)范允許訪問(wèn)和操作HTML頁(yè)面中的每一個(gè)單獨(dú)的元素。所有的瀏覽器都執(zhí)行了這個(gè)標(biāo)準(zhǔn)，因此，DOM的兼容性問(wèn)題也幾乎難覓蹤影了。DOM可被JavaScript用來(lái)讀取、改變HTML、XHTML以及XML文檔。DOM被分為不同的部分（核心、XML及HTML）和級(jí)別（DOM Level 1/2/3）：
◆Core DOM：定義了一套標(biāo)準(zhǔn)的針對(duì)任何結(jié)構(gòu)化文檔的對(duì)象。
◆XML DOM：定義了一套標(biāo)準(zhǔn)的針對(duì)XML文檔的對(duì)象。
◆HTML DOM：定義了一套標(biāo)準(zhǔn)的針對(duì)HTML文檔的對(duì)象。
HTML DOM 節(jié)點(diǎn)
HTML文檔中的每個(gè)成分都是一個(gè)節(jié)點(diǎn)。
節(jié)點(diǎn)
根據(jù)DOM，HTML文檔中的每個(gè)成分都是一個(gè)節(jié)點(diǎn)。DOM是這樣規(guī)定的：
◆整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)
◆每個(gè)HTML標(biāo)簽是一個(gè)元素節(jié)點(diǎn)
◆包含在HTML元素中的文本是文本節(jié)點(diǎn)
◆每一個(gè)HTML屬性是一個(gè)屬性節(jié)點(diǎn)
◆注釋屬于注釋節(jié)點(diǎn)
Node層次
節(jié)點(diǎn)彼此都有等級(jí)關(guān)系。HTML文檔中的所有節(jié)點(diǎn)組成了一個(gè)文檔樹(shù)（或節(jié)點(diǎn)樹(shù)）。HTML文檔中的每個(gè)元素、屬性、文本等都代表著樹(shù)中的一個(gè)節(jié)點(diǎn)。樹(shù)起始于文檔節(jié)點(diǎn)，并由此繼續(xù)伸出枝條，直到處于這棵樹(shù)***級(jí)別的所有文本節(jié)點(diǎn)為止。下面這個(gè)圖片表示一個(gè)文檔樹(shù)（節(jié)點(diǎn)樹(shù)）：
HTML DOM 節(jié)點(diǎn)樹(shù)
一棵節(jié)點(diǎn)樹(shù)中的所有節(jié)點(diǎn)彼此都是有關(guān)系的。
文檔樹(shù)（節(jié)點(diǎn)數(shù)）
請(qǐng)看下面這個(gè)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)之外的每個(gè)節(jié)點(diǎn)都有父節(jié)點(diǎn)。舉例，<head> 和 <body>的父節(jié)點(diǎn)是<html>節(jié)點(diǎn)，文本節(jié)點(diǎn)"Hello world!"的父節(jié)點(diǎn)是<p>節(jié)點(diǎn)。
大部分元素節(jié)點(diǎn)都有子節(jié)點(diǎn)。比方說(shuō)，<head>節(jié)點(diǎn)有一個(gè)子節(jié)點(diǎn)：<title>節(jié)點(diǎn)。<title>節(jié)點(diǎn)也有一個(gè)子節(jié)點(diǎn)：文本節(jié)點(diǎn)"DOM Tutorial"。當(dāng)節(jié)點(diǎn)分享同一個(gè)父節(jié)點(diǎn)時(shí)，它們就是同輩（同級(jí)節(jié)點(diǎn)）。比方說(shuō)，<h2>和 <p>是同輩，因?yàn)樗鼈兊母腹?jié)點(diǎn)均是<body>節(jié)點(diǎn)。
節(jié)點(diǎn)也可以擁有后代，后代指某個(gè)節(jié)點(diǎn)的所有子節(jié)點(diǎn)，或者這些子節(jié)點(diǎn)的子節(jié)點(diǎn)，以此類推。比方說(shuō)，所有的文本節(jié)點(diǎn)都是<html>節(jié)點(diǎn)的后代，而***個(gè)文本節(jié)點(diǎn)是<head>節(jié)點(diǎn)的后代。節(jié)點(diǎn)也可以擁有先輩。先輩是某個(gè)節(jié)點(diǎn)的父節(jié)點(diǎn)，或者父節(jié)點(diǎn)的父節(jié)點(diǎn)，以此類推。比方說(shuō)，所有的文本節(jié)點(diǎn)都可把<html>節(jié)點(diǎn)作為先輩節(jié)點(diǎn)。
HTML DOM訪問(wèn)節(jié)點(diǎn)
通過(guò)DOM，您可訪問(wèn)HTML文檔中的每個(gè)節(jié)點(diǎn)。
查找并訪問(wèn)節(jié)點(diǎn)
你可通過(guò)若干種方法來(lái)查找您希望操作的元素：
◆通過(guò)使用 getElementById() 和 getElementsByTagName() 方法。
◆通過(guò)使用一個(gè)元素節(jié)點(diǎn)的parentNode、firstChild以及l(fā)astChild屬性。
getElementById() 和 getElementsByTagName()
getElementById() 和 getElementsByTagName()這兩種方法，可查找整個(gè)HTML文檔中的任何HTML元素。
這兩種方法會(huì)忽略文檔的結(jié)構(gòu)。假如您希望查找文檔中所有的<p>元素，getElementsByTagName()會(huì)把它們?nèi)空业剑还?lt;p>元素處于文檔中的哪個(gè)層次。同時(shí)，getElementById()方法也會(huì)返回正確的元素，不論它被隱藏在文檔結(jié)構(gòu)中的什么位置。這兩種方法會(huì)像您提供任何你所需要的HTML元素，不論它們?cè)谖臋n中所處的位置！getElementById()可通過(guò)指定的ID來(lái)返回元素：
document.getElementById("ID");注釋：getElementById() 無(wú)法工作在XML中。在XML文檔中，您必須通過(guò)擁有類型id的屬性來(lái)進(jìn)行搜索，而此類型必須在XML DTD中進(jìn)行聲明。
getElementsByTagName() 方法會(huì)使用指定的標(biāo)簽名返回所有的元素（作為一個(gè)節(jié)點(diǎn)列表），這些元素是您在使用此方法時(shí)所處的元素的后代。getElementsByTagName() 可被用于任何的HTML元素：
getElementsByTagName() 語(yǔ)法
document.getElementsByTagName("標(biāo)簽名稱");或者：
document.getElementById('ID').getElementsByTagName("標(biāo)簽名稱");實(shí)例 1
下面這個(gè)例子會(huì)返回文檔中所有<p>元素的一個(gè)節(jié)點(diǎn)列表：
document.getElementsByTagName("p");實(shí)例 2
下面這個(gè)例子會(huì)返回所有<p>元素的一個(gè)節(jié)點(diǎn)列表，且這些<p>元素必須是id為"maindiv"的元素的后代：
document.getElementById('maindiv').getElementsByTagName("p");節(jié)點(diǎn)列表（nodeList）
當(dāng)我們使用節(jié)點(diǎn)列表時(shí)，通常要把此列表保存在一個(gè)變量中，就像這樣：
var x=document.getElementsByTagName("p");現(xiàn)在，變量x包含著頁(yè)面中所有<p>元素的一個(gè)列表，并且我們可以通過(guò)它們的索引號(hào)來(lái)訪問(wèn)這些<p>元素。注釋：索引號(hào)從0開(kāi)始。您可以通過(guò)使用length屬性來(lái)循環(huán)遍歷節(jié)點(diǎn)列表：
var x=document.getElementsByTagName("p"); for (var i=0;i<x.length;i++) { // do something with each paragraph }您也可以通過(guò)索引號(hào)來(lái)訪問(wèn)某個(gè)具體的元素。要訪問(wèn)第三個(gè)<p>元素，您可以這么寫：
var y=x[2];
parentNode、firstChild以及l(fā)astChild
這三個(gè)屬性 parentNode、firstChild 以及 lastChild 可遵循文檔的結(jié)構(gòu)，在文檔中進(jìn)行“短距離的旅行”。請(qǐng)看下面這個(gè)HTML片段：
<table> <tr> <td>John</td> <td>Doe</td> <td>Alaska</td> </tr> </table>
在上面的HTML代碼中，***個(gè)<td>是<tr>元素的***子元素（firstChild），而***一個(gè)<td>是<tr>元素的***一個(gè)子元素（lastChild）。此外，<tr>是每個(gè)<td>元素的父節(jié)點(diǎn)（parentNode）。對(duì)firstChild最普遍的用法是訪問(wèn)某個(gè)元素的文本：
var x=[a paragraph]; var text=x.firstChild.nodeValue;
parentNode屬性常被用來(lái)改變文檔的結(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)
有兩種特殊的文檔屬性可用來(lái)訪問(wèn)根節(jié)點(diǎn)：
document.documentElement document.body
***個(gè)屬性可返回存在于XML以及HTML文檔中的文檔根節(jié)點(diǎn)。第二個(gè)屬性是對(duì)HTML頁(yè)面的特殊擴(kuò)展，提供了對(duì)<body>標(biāo)簽的直接訪問(wèn)。
HTML DOM 節(jié)點(diǎn)信息
nodeName、nodeValue以及nodeType包含有關(guān)于節(jié)點(diǎn)的信息。
節(jié)點(diǎn)信息
每個(gè)節(jié)點(diǎn)都擁有包含著關(guān)于節(jié)點(diǎn)某些信息的屬性。這些屬性是：
◆nodeName（節(jié)點(diǎn)名稱）
◆nodeValue（節(jié)點(diǎn)值）
◆nodeType（節(jié)點(diǎn)類型）
nodeName
nodeName屬性含有某個(gè)節(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
◆對(duì)于文本節(jié)點(diǎn)，nodeValue屬性包含文本。
◆對(duì)于屬性節(jié)點(diǎn)，nodeValue屬性包含屬性值。
◆nodeValue屬性對(duì)于文檔節(jié)點(diǎn)和元素節(jié)點(diǎn)是不可用的。
nodeType
nodeType屬性可返回節(jié)點(diǎn)的類型。最重要的節(jié)點(diǎn)類型是：
一個(gè) HTML DOM 實(shí)例
下面這個(gè)例子向我們展示了當(dāng)一個(gè)用戶在文檔中點(diǎn)擊時(shí)，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入門級(jí)知識(shí)有哪些，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
本文標(biāo)題：HTMLDOM入門級(jí)知識(shí)有哪些
網(wǎng)頁(yè)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)營(yíng)銷推廣、App設(shè)計(jì)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 外貿(mào)建站的推廣方式有哪些 2016-04-18
- 外貿(mào)建站租用香港云服務(wù)器還是美國(guó)云服務(wù)器好？ 2022-10-02
- 外貿(mào)建站9大注意要點(diǎn) 2015-10-03
- 外貿(mào)建站需要哪些東西 2021-11-15
- 做外貿(mào)建站好不好?這幾個(gè)誤區(qū)要注意了 2015-04-27
- 詮釋網(wǎng)站排名的高低與流量多少之間的關(guān)系 2022-06-24
- 國(guó)內(nèi)如何選擇專業(yè)外貿(mào)建站服務(wù)公司，創(chuàng)新互聯(lián)科技告訴你！ 2015-05-01
- 成都網(wǎng)站建設(shè)過(guò)程中關(guān)于外貿(mào)建站 2018-06-13
- 為什么要選擇外貿(mào)建站？ 2015-04-27
- 外貿(mào)建站過(guò)程中一些問(wèn)題以及應(yīng)該注意什么 2015-07-07
- 外貿(mào)建站和普通網(wǎng)站建設(shè)的區(qū)別 2022-10-22
- 談?wù)勍赓Q(mào)建站為什么要選擇香港服務(wù)器？ 2022-10-03