tutorial of DHTML and javascript programming<\/div> \r\n
<\/body>
<\/html>
我們參照樹的概念，畫出該HTML文檔結(jié)構(gòu)的DOM樹： \r\n
html
body head \r\n
div title
文本 文本
從上面的圖示可以看出 \r\n
html有兩個子結(jié)點(diǎn)，而html就是這兩個子節(jié)點(diǎn)的父結(jié)點(diǎn)
head有節(jié)點(diǎn)title，title下有一個文本節(jié)點(diǎn) \r\n
doby下有節(jié)點(diǎn)div，div下有一個文本節(jié)點(diǎn)
三、操作DOM樹 \r\n
開篇已經(jīng)說過，DHTML本質(zhì)就是操作DOM樹。如何操作它呢？
假設(shè)我要改變上面HTML文檔中div結(jié)點(diǎn)的文本，如何做? \r\n
程序代碼
\r\n
never-online's website<\/title> <br\/>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>
<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
<h1><a href="http://m.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>
<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
<div id="377j5v51b" class="head">
<div id="377j5v51b" class="haed_left">
<div id="377j5v51b" class="haed_logo">
<a href="http://m.miracleart.cn/zh/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="377j5v51b" class="head_nav">
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="社區(qū)" class="head_nava head_nava-template1">社區(qū)</a>
<div class="377j5v51b" id="dropdown-template1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/zh/article.html" title="文章" class="languagechoosea on">文章</a>
<a href="http://m.miracleart.cn/zh/faq/zt" title="合集" class="languagechoosea">合集</a>
<a href="http://m.miracleart.cn/zh/wenda.html" title="問答" class="languagechoosea">問答</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="學(xué)習(xí)" class="head_nava head_nava-template1_1">學(xué)習(xí)</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/zh/course.html" title="課程" class="languagechoosea on">課程</a>
<a href="http://m.miracleart.cn/zh/dic/" title="編程詞典" class="languagechoosea">編程詞典</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="工具庫" class="head_nava head_nava-template1_2">工具庫</a>
<div class="377j5v51b" id="dropdown-template1_2" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/zh/toolset/development-tools" title="開發(fā)工具" class="languagechoosea on">開發(fā)工具</a>
<a href="http://m.miracleart.cn/zh/toolset/website-source-code" title="網(wǎng)站源碼" class="languagechoosea">網(wǎng)站源碼</a>
<a href="http://m.miracleart.cn/zh/toolset/php-libraries" title="PHP 庫" class="languagechoosea">PHP 庫</a>
<a href="http://m.miracleart.cn/zh/toolset/js-special-effects" title="JS特效" class="languagechoosea on">JS特效</a>
<a href="http://m.miracleart.cn/zh/toolset/website-materials" title="網(wǎng)站素材" class="languagechoosea on">網(wǎng)站素材</a>
<a href="http://m.miracleart.cn/zh/toolset/extension-plug-ins" title="擴(kuò)展插件" class="languagechoosea on">擴(kuò)展插件</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://m.miracleart.cn/zh/ai" title="AI工具" class="head_nava head_nava-template1_3">AI工具</a>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="休閑" class="head_nava head_nava-template1_3">休閑</a>
<div class="377j5v51b" id="dropdown-template1_3" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/zh/game" title="游戲下載" class="languagechoosea on">游戲下載</a>
<a href="http://m.miracleart.cn/zh/mobile-game-tutorial/" title="游戲教程" class="languagechoosea">游戲教程</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('zh')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="搜索" onclick="searchs('zh')"><img src="/static/imghw/find.png" alt="搜索"></a>
</div>
<div id="377j5v51b" class="head_right">
<div id="377j5v51b" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">簡體中文<i class="layui-icon layui-icon-triangle-d"></i></a>
<div class="377j5v51b" id="dropdown-template" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="javascript:;" title="簡體中文" class="languagechoosea">簡體中文</a>
<a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a>
<a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
<a href="javascript:setlang('ja');" title="日本語" class="languagechoosea">日本語</a>
<a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
<a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a>
<a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
<a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
</div>
</div>
</div>
<span id="377j5v51b" class="head_right_line"></span>
<div style="display: block;" id="login" class="haed_login ">
<a href="javascript:;" title="Login" class="haed_logina ">Login</a>
</div>
<div style="display: block;" id="reg" class="head_signup login">
<a href="javascript:;" title="singup" class="head_signupa">singup</a>
</div>
</div>
</div>
</header>
<main>
<div id="377j5v51b" class="Article_Details_main">
<div id="377j5v51b" class="Article_Details_main1">
<div id="377j5v51b" class="Article_Details_main1M">
<div id="377j5v51b" class="phpgenera_Details_mainL1">
<a href="http://m.miracleart.cn/zh/" title="首頁"
class="phpgenera_Details_mainL1a">首頁</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://m.miracleart.cn/zh/web-designer.html"
class="phpgenera_Details_mainL1a">web前端</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://m.miracleart.cn/zh/js-tutorial.html"
class="phpgenera_Details_mainL1a">js教程</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>Javascript & DHTML DOM基礎(chǔ)和基本API第1/5頁_javascript技巧</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">Javascript & DHTML DOM基礎(chǔ)和基本API第1/5頁_javascript技巧</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://m.miracleart.cn/zh/member/1.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/000/000/001/6251028808086368.png" src="/static/imghw/default1.png" alt="PHP中文網(wǎng)">
</a>
<div id="377j5v51b" class="author_detail">
<a href="http://m.miracleart.cn/zh/member/1.html" class="author_name">PHP中文網(wǎng)</a>
</div>
</div>
</div>
<span id="377j5v51b" class="Articlelist_txts_time">May 16, 2016 pm 07:03 PM</span>
<div id="377j5v51b" class="Articlelist_txts_infos">
<span id="377j5v51b" class="Articlelist_txts_infoss on">api</span>
<span id="377j5v51b" class="Articlelist_txts_infoss ">dhtml</span>
<span id="377j5v51b" class="Articlelist_txts_infoss ">dom</span>
<span id="377j5v51b" class="Articlelist_txts_infoss ">javascript</span>
</div>
</div>
</div>
<hr />
<div id="377j5v51b" class="article_main php-article">
<div id="377j5v51b" class="article-list-left detail-content-wrap content">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3461856641">
</ins>
<p>一、什么是DOM？
<br>什么叫DOM，DOM是文檔對象模型(Document?Object?Model，是基于瀏覽器編程（在本教程中，可以說就是DHTML編程）的一套API接口，W3C出臺的推薦標(biāo)準(zhǔn)，每個瀏覽器都有一些細(xì)微的差別，其中以Mozilla的瀏覽器最與標(biāo)準(zhǔn)接近。單純的Javascript要結(jié)合DOM才能做DHTML編程，才能做出漂亮的效果、應(yīng)用于WEB。這點(diǎn)幾乎與其它的語言無異，正如C/C++需要庫支持是一樣的道理。否則就是單純的在語法上做研究了。因此，必須要對DOM有一定的認(rèn)識，才能把Javascript應(yīng)用于WEB，或你的RIA應(yīng)用當(dāng)中，因?yàn)镈HTML本質(zhì)上就是操作DOM樹。
<br>以后的編程當(dāng)中，希望你能夠把DHTML.chm這本手冊也拿上，如果你需要兼容gecko，把gecko的DOM手冊也帶上。因?yàn)锳PI太多，想不起來的接口還可以查這本手冊。
<br><br>如果你要測試瀏覽器是否是支持DOM的，簡單的一句就可以判斷</p><pre class='brush:php;toolbar:false;'><script>
var isSupportDOM = !!document.getElementById; //兩個取反，這已經(jīng)在上節(jié)中說過了，意思是強(qiáng)制轉(zhuǎn)型
alert("你的瀏覽器 " +(isSupportDOM?"":"不")+ "支持 DOM！");
</script></pre><p> 二、DOM樹 <br/>要注意：DOM樹的根統(tǒng)一為文檔根—document，DOM既然是樹狀結(jié)構(gòu)，那么他們自然有如下的幾種關(guān)系:
<br/><br/>根結(jié)點(diǎn)(document) <br/><br/> 父結(jié)點(diǎn)(parentNode) <br/><br/> 子結(jié)點(diǎn)(childNodes)
<br/><br/> 兄弟結(jié)點(diǎn) 兄弟結(jié)點(diǎn) <br/> (sibling) (sibling) <br/><br/>例子：
<br/><br/>假設(shè)網(wǎng)頁的HTML如下 <br/><br/> 程序代碼 <br/><br/><html> <br/> <head>
<br/> <title>never-online's website
tutorial of DHTML and javascript programming
我們參照樹的概念，畫出該HTML文檔結(jié)構(gòu)的DOM樹：
html
body head
div title
文本 文本
從上面的圖示可以看出
html有兩個子結(jié)點(diǎn)，而html就是這兩個子節(jié)點(diǎn)的父結(jié)點(diǎn)
head有節(jié)點(diǎn)title，title下有一個文本節(jié)點(diǎn)
doby下有節(jié)點(diǎn)div，div下有一個文本節(jié)點(diǎn)
三、操作DOM樹
開篇已經(jīng)說過，DHTML本質(zhì)就是操作DOM樹。如何操作它呢？
假設(shè)我要改變上面HTML文檔中div結(jié)點(diǎn)的文本，如何做?
程序代碼
never-online's website <script>
<br/> function changedivText (strText) {
<br/> var nodeRoot = document; //這個是根結(jié)點(diǎn)
<br/> var nodeHTML = nodeRoot.childNodes[0]; //這個是html結(jié)點(diǎn)
<br/> var nodeBody = nodeHTML.childNodes[1]; //body結(jié)點(diǎn)
<br/> var nodeDiv = nodeBody.childNodes[0]; //DIV結(jié)點(diǎn)
<br/> var nodeText = nodeDiv.childNodes[0];//文本結(jié)點(diǎn)'
<br/> nodeText.data = strText; //文本節(jié)點(diǎn)有data這個屬性，因此我們可以改變這個屬性，也就成功的操作了DOM樹中的一個結(jié)點(diǎn)了
<br/> } <br/> </script>
tutorial of DHTML and javascript programming
從上面的示例可以看出，我們可以用上面的這種方法操作DOM樹上的任一節(jié)點(diǎn)。（注：1. 跨域除外，跨域通常是在操作frame上，簡單的說，就是兩個frame不屬于同一域名。2.上面的操作為了演示，采用的方法是從根結(jié)點(diǎn)一直到文本結(jié)點(diǎn)的遍歷，在DOM方法上，有更簡潔的方法，這些以后會有更多示例加以說明，下文中也會有介紹）
三、DOM節(jié)點(diǎn)。
細(xì)心些的朋友也許發(fā)現(xiàn)了，在上面寫的HTML代碼時用<>與包函起來的就是一個結(jié)點(diǎn)，事實(shí)上是這樣的嗎？答案是否定的。下面就是說說節(jié)點(diǎn)類型，否則在有的時候是會犯錯誤的。比如，你把上面的代碼放到Mozilla firefox的瀏覽器里運(yùn)行一下，就會知道了。
DOM中的結(jié)點(diǎn)類型比較多，這里寫一些在HTML文檔中（注：XML也是DOM樹結(jié)構(gòu)）常見的幾種結(jié)點(diǎn)類型。
1、DOCUMENT_NODE
（document）文檔根結(jié)點(diǎn)類型，該枚舉型的值是9.
2、ELEMENT_NODE
（element）元素結(jié)點(diǎn)類型，該枚舉型的值是1。上文中的html, body, div這些結(jié)點(diǎn)都是屬于該類型。
3、TEXT_NODE
（text）文本結(jié)點(diǎn)類型，該枚舉型的值是3。上文中的文本，如：tutorial of DHTML and javascript programming就是屬于該類型。
（注：一個空格也就可能是一個文本結(jié)點(diǎn)）
通常更需要注意的是文本結(jié)點(diǎn)，有可能一個回車，一個空格都是文本結(jié)點(diǎn)。這一點(diǎn)以后會碰到，當(dāng)然，我們也有辦法處理，這里先不要急，以后也會說到的。
四、DOM常用的API
這些常用的API是要記下來的，當(dāng)然在非IE的瀏覽器里也會有效，是符合w3c的。這些API在以后的編程中會常常用到。正如每個編程平臺所提供的API一樣，常用必須記下來，節(jié)省時間從而提高編程效率。只寫幾個最常用的，其它的API會在以后的示例中寫出。由淺而深，從易到難嘛。
1、獲取ELEMENT_NODE，元素節(jié)點(diǎn)
1)、方法：document.getElementById(元素的Id)，返回值為元素的節(jié)點(diǎn)引用。可以假想一下這個API的原理：象我們上面所做的是遍歷每個節(jié)點(diǎn)（從根到我們所需結(jié)點(diǎn)），這個API，也可以想成是從根遍歷，查詢每個結(jié)點(diǎn)（空白結(jié)點(diǎn)和空結(jié)點(diǎn)除外），并獲取該結(jié)點(diǎn)的id是否為指定的ID，如果是的話，就返回這個結(jié)點(diǎn)（注：在JS中，數(shù)組和對象是引用類型），如果沒有就返回空。我們可以寫寫這個代碼，幫助我們理解document.getElementById。下面是一個簡單遍歷BODY中元素的示例。
<html>
<head>
<title>never-online's website</title>
<script>
function myGetElementById (id) {
var nodeRoot = document; //這個是根結(jié)點(diǎn)
var nodeHTML = nodeRoot.childNodes[0]; //這個是html結(jié)點(diǎn)
var nodeBody = nodeHTML.childNodes[1]; //body結(jié)點(diǎn)
var bodyChild = nodeBody.childNodes; //body的孩子
for (var i=0; i<bodyChild.length; i++) { //簡單的遍歷（指body的孩子下的深度為1)
if (bodyChild[i].id==id) return bodyChild[i];
};
return null;
}
function TestGetElementById (id) {
var node = myGetElementById(id);
if (node!=null) {
alert("找到結(jié)點(diǎn) "+id+"!");
alert(node.childNodes[0].data);
} else {
alert("沒有找到結(jié)點(diǎn) "+id+".");
}
}
</script>
</head>
<body>
<div id="aTestNode"></div>
<div id="textNode">tutorial of DHTML and javascript programming</div>
<input onclick="TestGetElementById('textNode')" type="button" value="change"/>
</body>
</html>2)、屬性：object.innerHTML，返回值：一個節(jié)點(diǎn)內(nèi)的HTML值。該屬性為可寫屬性。它雖然不是獲取結(jié)點(diǎn)，但經(jīng)常與獲取結(jié)點(diǎn)相結(jié)合，所以我把它放在獲取結(jié)點(diǎn)這一類，它的屬性就類似于是純文本節(jié)點(diǎn)屬性中的data。以document.getElementById和object.innerHTML這兩個API為例，我們就可以把上面所寫的代碼簡化一下了，示例如下：
<html>
<head>
<title>never-online's website</title>
<script>
function changedivText (strText) {
var node = document.getElementById("textNode");
node.innerHTML = strText;
}
</script>
</head>
<body>
<div id="textNode">tutorial of DHTML and javascript programming</div>
<input onclick="changedivText('change?')" type="button" value="change"/>
</body>
</html>3)、方法：object.getElementsByTagName(標(biāo)簽的名字)，返回一個集合，該集合的把有元素都是有指定標(biāo)簽的元素。訪問集合里的元素，可以用下標(biāo)來訪問。語法里的object，是指document（根）或者是一個ELEMENT_NODE。這個的原理示例我就不寫了，可以作為一個作業(yè)，大家可以寫寫。這里寫一些具體應(yīng)用。如上例，我們還可以這樣寫。
<html>
<head>
<title>never-online's website</title>
<script>
function changedivText (strText) {
var node = document.getElementsByTagName("DIV");
node[0].innerHTML = strText;
}
</script>
</head>
<body>
<div>tutorial of DHTML and javascript programming</div>
<input onclick="changedivText('change?')" type="button" value="change"/>
</body>
</html>再取一個例子，注意，BODY下的結(jié)點(diǎn)深度為2。
<html>
<head>
<title>never-online's website</title>
<script>
function changedivText (strText) {
var node = document.getElementById("nodeTest");
var myNode = node.getElementsByTagName("DIV");
myNode[0].innerHTML = strText;
}
</script>
</head>
<body>
<div id="nodeTest">
<div>tutorial of DHTML and javascript programming</div>
<input onclick="changedivText('change?')" type="button" value="change"/>
</div>
</body>
</html>二、動態(tài)創(chuàng)建與插入結(jié)點(diǎn)
1)、創(chuàng)建結(jié)點(diǎn)對象。document.createElement(tagname)，tagname指的是一個標(biāo)簽，比如一個DIV，就是document.createElement("DIV")，它返回的是這個結(jié)點(diǎn)的引用。
2)、在body的尾部插入結(jié)點(diǎn)用document.body.appendChild(object)，為了容易理解，下面這個示例，我用了IE專有的屬性object.outerHTML，得到一個該元素的HTML標(biāo)簽內(nèi)容（包括自身），這樣會更容易看到效果。
<html>
<head>
<title>never-online's website</title>
<script>
function insertNode (strText) {
alert("插入元素前的body HTML：\n" +document.body.outerHTML);
var node = document.createElement("DIV");
node.innerHTML = strText;
document.body.appendChild(node);
alert("插入元素后的body HTML：\n" +document.body.outerHTML);
}
</script>
</head>
<body>
<div>tutorial of DHTML and javascript programming</div>
<input onclick="insertNode('change?')" type="button" value="change"/>
</body>
</html>
[/htm]
3)、在元素處插入結(jié)點(diǎn)。object.insertBefore(oNewNode [, oChildNode])，oNewNode為一個我們創(chuàng)建的結(jié)點(diǎn)，oChildNode是可選的，為object下的一個子節(jié)點(diǎn)。同樣的，為了看到效果，我也用了outerHTML。示例
[html]
<html>
<head>
<title>never-online's website</title>
<script>
function insertNode (strText) {
alert("插入元素前的body HTML：\n" +document.body.outerHTML);
var node = document.createElement("DIV");
var myNode = document.getElementById("textNode");
node.innerHTML = strText;
document.body.insertBefore(node,myNode);
alert("插入元素后的body HTML：\n" +document.body.outerHTML);
}
</script>
</head>
<body>
<div id="textNode">tutorial of DHTML and javascript programming</div>
<input onclick="insertNode('change?')" type="button" value="change"/>
</body>
</html>三、移除結(jié)點(diǎn)。
1) object.parentNode.removeChild(oChildNode)，這個就是語法，下面看示例。
<html>
<head>
<title>never-online's website</title>
<script>
function insertNode (strText) {
alert("插入元素前的body HTML：\n" +document.body.outerHTML);
var node = document.createElement("DIV");
var myNode = document.getElementById("textNode");
node.innerHTML = strText;
document.body.insertBefore(node,myNode);
alert("插入元素后的body HTML：\n" +document.body.outerHTML);
}
function removeCreateNode() {
alert("移除元素前的body HTML：\n" +document.body.outerHTML);
var node = document.getElementById("textNode");
node.parentNode.removeChild(node);
alert("移除元素前的body HTML：\n" +document.body.outerHTML);
}
</script>
</head>
<body>
<div id="textNode">tutorial of DHTML and javascript programming</div>
<input onclick="insertNode('change?')" type="button" value="insert"/>
<input onclick="removeCreateNode()" type="button" value="remove"/>
</body>
</html>這一節(jié)就先寫到這里，下一節(jié)我們就可以用這幾個簡單的API做許多事情了，幾個API就可以寫出很多效果
