JavaScript利用HTML DOM進(jìn)行文檔操作的方法
HTML DOM 樹
一、DOM簡介
DOM是W3C制定的用于訪問諸如XML和XHTML等結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)。
W3C文檔對象模型(DOM)是一個使程序和腳本有能力動態(tài)地訪問和更新文檔的內(nèi)容、結(jié)構(gòu)以及樣式的平臺和語言中立的接口
核心DOM：用于任何結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)模型
XML DOM：用于XML文檔的標(biāo)準(zhǔn)模型。是用于獲取、更改、添加或刪除XML元素的標(biāo)準(zhǔn)。
HTML DOM： 用于HTML文檔的標(biāo)準(zhǔn)模型。定義了所有HTML元素的對象和屬性，以及訪問它們的方法（接口）。
二、DOM節(jié)點(diǎn)
根據(jù)DOM規(guī)范，文檔中的每個成分都是一個節(jié)點(diǎn)。DOM的規(guī)定：
整個文檔是一個文檔節(jié)點(diǎn)，又稱為根節(jié)點(diǎn)
每個標(biāo)簽是一個元素節(jié)點(diǎn)
包含在標(biāo)簽中的文本是文本節(jié)點(diǎn)
標(biāo)簽的每一個屬性是一個屬性節(jié)點(diǎn)
注釋屬于注釋節(jié)點(diǎn)
2.1DOM接口及其屬性和方法
DOM把文檔模擬為一系列節(jié)點(diǎn)接口?？赏ㄟ^JavaScript或其他編程語言來訪問節(jié)點(diǎn)。對
DOM的編程接口是通過一套標(biāo)準(zhǔn)的屬性和方法來定義的。
2.1.1DOM屬性
一些典型的DOM屬性：
x.nodeName:x的名稱
x.nodeValue:x的值
x.parentNode:x的父節(jié)點(diǎn)，，除了根節(jié)點(diǎn)外，只有唯一一個父節(jié)點(diǎn)
x.childNodes:x的子節(jié)點(diǎn)，可以有多個子節(jié)點(diǎn)
x.attributes:x的屬性節(jié)點(diǎn)集合，可以有多個屬性
其中，x是一個節(jié)點(diǎn)對象
2.1.2DOM方法
一些典型的DOM方法：
x.getElementsByTagName(name) :獲取帶有指定標(biāo)簽名稱的所有元素
x.appendChild(node) :向x插入子節(jié)點(diǎn)
x.removeChild(node) :從x刪除子節(jié)點(diǎn)
實(shí)例：
//獲得文檔標(biāo)題的文本內(nèi)容
document.getElementsByTagName("title")[0].childNode[0].nodeValue
2.1.3訪問節(jié)點(diǎn)
方法一：通過使用getElementsByTagName()方法
方法二：通過循環(huán)遍歷節(jié)點(diǎn)樹
方法三：通過利用節(jié)點(diǎn)的關(guān)系在節(jié)點(diǎn)樹中導(dǎo)航
2.1.4節(jié)點(diǎn)信息：
nodeName : 獲取節(jié)點(diǎn)的名稱，是只讀的。
nodeValue： 獲取或設(shè)置節(jié)點(diǎn)的值
nodeType：節(jié)點(diǎn)的類型，是只讀的。1，表示元素，2表示屬性，3表示文本，8
表示注釋，9表示文檔
三、節(jié)點(diǎn)操作
3.1創(chuàng)建節(jié)點(diǎn)
createElement(tagName):創(chuàng)建元素節(jié)點(diǎn)
createTextNode(text)：創(chuàng)建文本節(jié)點(diǎn)
createAttribute(attrName)：創(chuàng)建屬性節(jié)點(diǎn)
3.2添加節(jié)點(diǎn)
新創(chuàng)建的節(jié)點(diǎn)需要與其他已經(jīng)存在的節(jié)點(diǎn)組織關(guān)系，才能讓它真正屬于文檔樹。
appendChild(node) 在當(dāng)前節(jié)點(diǎn)內(nèi)部最后一個子節(jié)點(diǎn)后面添加新的子節(jié)點(diǎn)，參數(shù)為新的子節(jié)點(diǎn)
insertBefore(newNode,node) 在當(dāng)前節(jié)點(diǎn)內(nèi)部指定的子節(jié)點(diǎn)之前添加新的子節(jié)點(diǎn)，第一個參數(shù)為新的子節(jié)點(diǎn)，第二個參數(shù)為當(dāng)前節(jié)點(diǎn)內(nèi)部指定的子節(jié)點(diǎn)
insertAfter()在當(dāng)前節(jié)點(diǎn)內(nèi)部指定的子節(jié)點(diǎn)之后添加新的子節(jié)點(diǎn)，第一個參數(shù)為新的子節(jié)點(diǎn)，第二個參數(shù)為當(dāng)前節(jié)點(diǎn)內(nèi)部指定的子節(jié)點(diǎn)
setAttributeNode()在當(dāng)前元素節(jié)點(diǎn)設(shè)置屬性節(jié)點(diǎn)，邀請調(diào)用此方法的節(jié)點(diǎn)的類型為元素類型，參數(shù)要設(shè)置的屬性節(jié)點(diǎn)
示例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用DOM創(chuàng)建并添加節(jié)點(diǎn)</title>
<script type="text/javascript">
function createAndAddNode(){
//div標(biāo)簽元素節(jié)點(diǎn)
var container = document.body.getElementsByTagName("div")[0];
//創(chuàng)建元素節(jié)點(diǎn)對象，元素名即標(biāo)簽名 <p>
var pEle = document.createElement("p");
//創(chuàng)建文本節(jié)點(diǎn)對象，文本內(nèi)容就是參數(shù)值
var txtOfP = document.createTextNode("這是段落的文字");
//在元素節(jié)點(diǎn)內(nèi)部添加一個文本節(jié)點(diǎn)<p>這是段落的文字
pEle.appendChild(txtOfP);
//在div元素節(jié)點(diǎn)后面添加新的子節(jié)點(diǎn)。<div><p>這是段落的文字</div>
container.appendChild(pEle);
//創(chuàng)建一個超鏈接標(biāo)簽節(jié)點(diǎn)
var aEle = document.createElement("a");
//創(chuàng)建文本節(jié)點(diǎn)
var txtOfA = document.createTextNode("博客園");
//在元素節(jié)點(diǎn)中添加文本節(jié)點(diǎn)，<a>博客園</a>
aEle.appendChild(txtOfA);
//創(chuàng)建一個href屬性節(jié)點(diǎn)
var attrOfA = document.createAttribute("href");
//將href屬性節(jié)點(diǎn)設(shè)置其屬性值
attrOfA.nodeValue = "http:www.cnblogs.com";
//將屬性節(jié)點(diǎn)添加到超鏈接元素節(jié)點(diǎn)中,即設(shè)置a元素標(biāo)簽的屬性節(jié)點(diǎn)
aEle.setAttributeNode(attrOfA);
//將元素節(jié)點(diǎn)a添加到div中
container.appendChild(aEle);
}
//瀏覽器窗口加載時調(diào)用該方法
window.onload = createAndAddNode;
</script>
</head>
<body>
<div></div>
</body>
</html>
3.3修改節(jié)點(diǎn)
改變節(jié)點(diǎn)一般指改變元素內(nèi)部的文本，或改變元素的屬性值。這兩種情況都可以在訪問到文本節(jié)點(diǎn)或?qū)傩怨?jié)點(diǎn)后，為其nodeValue賦值來實(shí)現(xiàn)更改。對于后者，還可以
在元素節(jié)點(diǎn)上調(diào)用setAttribute方法來實(shí)現(xiàn)屬性值的改變。
示例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用DOM改變節(jié)點(diǎn)</title>
<script type="text/javascript">
function changeSize(){
var target = document.getElementById("txt_1");
//設(shè)置列的屬性值為50
target.setAttribute("cols", "50");
//設(shè)置行的屬性值為6 先訪問屬性節(jié)點(diǎn)集合，然后通過getNamedItem定位屬性名，
target.attributes.getNamedItem("rows").nodeValue = "6";
}
function changeText() {
var target = document.getElementById("lbl_1");
//先訪問該元素節(jié)點(diǎn)的子節(jié)點(diǎn)，子節(jié)點(diǎn)個數(shù)可以是多個，因此用了數(shù)組下標(biāo)訪問指定元素。然后通過nodeValue修改其值
target.childNodes[0].nodeValue = "您的個人簡歷：";
}
</script>
</head>
<body>
<form action="">
<label id="lbl_1" for="txt_1">多行文本框的標(biāo)簽文字</label>
<textarea id="txt_1" ></textarea>
<input type="button" name="btn" value="改變多行文本域的尺寸" onclick="changeSize();" />
<input type="button" name="btn" value="改變標(biāo)簽的文字" onclick="changeText();" />
</form>
</body>
</html>
3.3刪除節(jié)點(diǎn)
刪除節(jié)點(diǎn)一般指從元素節(jié)點(diǎn)內(nèi)部刪除子元素或元素包含的文本，也可實(shí)現(xiàn)對元素節(jié)點(diǎn)包含的屬性節(jié)點(diǎn)的刪除
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用DOM刪除節(jié)點(diǎn)</title>
<script type="text/javascript">
function doRemoveNode() {
//label標(biāo)簽元素節(jié)點(diǎn)
var targetLbl = document.getElementById("lbl_1");
//從label元素節(jié)點(diǎn)中刪除第一個子節(jié)點(diǎn)
targetLbl.removeChild(targetLbl.firstChild);
//文檔元素，通過訪問文檔元素集合，指定位置元素獲得多行文本域
var tagetArea = document.documentElement.getElementsByTagName("textarea")[0];
//文檔中第一個form標(biāo)簽元素節(jié)點(diǎn)
var tagetForm = document.documentElement.getElementsByTagName("form")[0];
//刪除文檔中第一個form標(biāo)簽中的textarea
tagetForm.removeChild(tagetArea);
}
</script>
</head>
<body>
<form>
<label id="lbl_1" for="txt_1">多行文本框的標(biāo)簽文字</label>
<textarea id="txt_1" rows="" cols=""></textarea>
<input type="button" name="btn" value="刪除節(jié)點(diǎn)" onclick="doRemoveNode();"/>
</form>
</body>
</html>
四、小結(jié)
DOM是文檔在內(nèi)存中表現(xiàn)的樹形結(jié)構(gòu)，稱為DOM樹；DOM是W3C制定的訪問文檔的標(biāo)準(zhǔn)方法和屬性，稱為DOM接口
文檔中的每個數(shù)據(jù)在樹形結(jié)構(gòu)上表示為一個節(jié)點(diǎn)，由所有節(jié)點(diǎn)組成的樹形結(jié)構(gòu)稱為節(jié)點(diǎn)樹或DOM樹
節(jié)點(diǎn)有多種類型，常見的有元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)、文本節(jié)點(diǎn)、根節(jié)點(diǎn)、等。節(jié)點(diǎn)有名稱和值，但不同類型的節(jié)點(diǎn)其名稱和值含義不同
createElement()方法用于創(chuàng)建元素節(jié)點(diǎn)，createAttribute()方法用于創(chuàng)建屬性節(jié)點(diǎn)，createTextNode()方法用于創(chuàng)建文本節(jié)點(diǎn)，向元素節(jié)點(diǎn)內(nèi)添加子元素節(jié)點(diǎn)或文本節(jié)點(diǎn)，可使用appendChild()方法。還有insertAfter()和insertBefore()方法用于在特定的節(jié)點(diǎn)前后插入新的節(jié)點(diǎn)。需要注意的是為元素節(jié)點(diǎn)添加屬性節(jié)點(diǎn)的方法卻是setAttributeNode()方法。
要修改文本節(jié)點(diǎn)的值或更改屬性節(jié)點(diǎn)的值，應(yīng)使用節(jié)點(diǎn)的nodeValue屬性
刪除節(jié)點(diǎn)使用removeChild()方法。
關(guān)于JavaScript利用HTML DOM進(jìn)行文檔操作的方法，小編就給大家介紹這么多，希望對大家有所幫助！
相關(guān)文章
鼠標(biāo)滑過出現(xiàn)預(yù)覽的大圖提示效果
這篇文章主要介紹了如何實(shí)現(xiàn)鼠標(biāo)滑過出現(xiàn)預(yù)覽的大圖提示效果,需要的朋友可以參考下2014-02-02
循環(huán)輸入每組兩個數(shù)hex和n(0<=n<31)，hex是一個16進(jìn)制的數(shù)字，我們要做的是將hex的第n位取反，然后以16進(jìn)制的形式輸出對應(yīng)的結(jié)果2014-06-06
JS獲取鍵盤按鍵的鍵碼event.keyCode，記錄-方便查找。需要的朋友參考下本教程吧2017-01-01
uniapp原生tabbar設(shè)置并添加數(shù)字角標(biāo)或小紅點(diǎn)提示功能
這篇文章主要給大家介紹了關(guān)于uniapp原生tabbar設(shè)置并添加數(shù)字角標(biāo)或小紅點(diǎn)提示功能的相關(guān)資料,在相應(yīng)的頁面中完成對消息的處理,如果有新消息,則在tabBar頁面中顯示紅點(diǎn)提醒用戶,需要的朋友可以參考下2023-08-08
TypeScript中定義變量方式以及數(shù)據(jù)類型詳解
TypeScript支持 JavaScript的所有語法和語義,同時通過作為ECMAScript的超集來提供一些額外的功能,如類型檢測和更豐富的語法,這篇文章主要給大家介紹了關(guān)于TypeScript中定義變量方式以及數(shù)據(jù)類型詳解的相關(guān)資料,需要的朋友可以參考下2022-08-08
JavaScript監(jiān)聽觸摸事件代碼實(shí)例
這篇文章主要介紹了JavaScript監(jiān)聽觸摸事件代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12
做一個功能需要彈窗，因?yàn)間et方式對url的長度有限制,所以必須用post，本文有兩個不錯的方法，大家可以參考下2014-01-01
讓背景如此暗淡（一種彈出提示信息時頁面背景色調(diào)改變的方法）
讓背景如此暗淡（一種彈出提示信息時頁面背景色調(diào)改變的方法）...2006-10-10
原生javascript實(shí)現(xiàn)圖片無縫滾動效果
這篇文章主要介紹了原生javascript實(shí)現(xiàn)圖片無縫滾動效果的相關(guān)資料,需要的朋友可以參考下2016-02-02
為你封裝的javascript庫加上命名空間以提高代碼重用性2008-11-11