Javascript & DHTML DOM基礎(chǔ)和基本API第1/5頁_javascript技巧
May 16, 2016 pm 07:03 PM
一、什么是DOM？
什么叫DOM，DOM是文檔對(duì)象模型(Document?Object?Model，是基于瀏覽器編程（在本教程中，可以說就是DHTML編程）的一套API接口，W3C出臺(tái)的推薦標(biāo)準(zhǔn)，每個(gè)瀏覽器都有一些細(xì)微的差別，其中以Mozilla的瀏覽器最與標(biāo)準(zhǔn)接近。單純的Javascript要結(jié)合DOM才能做DHTML編程，才能做出漂亮的效果、應(yīng)用于WEB。這點(diǎn)幾乎與其它的語言無異，正如C/C++需要庫支持是一樣的道理。否則就是單純的在語法上做研究了。因此，必須要對(duì)DOM有一定的認(rèn)識(shí)，才能把Javascript應(yīng)用于WEB，或你的RIA應(yīng)用當(dāng)中，因?yàn)镈HTML本質(zhì)上就是操作DOM樹。
以后的編程當(dāng)中，希望你能夠把DHTML.chm這本手冊(cè)也拿上，如果你需要兼容gecko，把gecko的DOM手冊(cè)也帶上。因?yàn)锳PI太多，想不起來的接口還可以查這本手冊(cè)。
如果你要測(cè)試瀏覽器是否是支持DOM的，簡(jiǎn)單的一句就可以判斷
<script>
var isSupportDOM = !!document.getElementById; //兩個(gè)取反，這已經(jīng)在上節(jié)中說過了，意思是強(qiáng)制轉(zhuǎn)型
alert("你的瀏覽器 " +(isSupportDOM?"":"不")+ "支持 DOM！");
</script> 二、DOM樹
要注意：DOM樹的根統(tǒng)一為文檔根—document，DOM既然是樹狀結(jié)構(gòu)，那么他們自然有如下的幾種關(guān)系:
根結(jié)點(diǎn)(document)
父結(jié)點(diǎn)(parentNode)
子結(jié)點(diǎn)(childNodes)
兄弟結(jié)點(diǎn) 兄弟結(jié)點(diǎn)
(sibling) (sibling)
例子：
假設(shè)網(wǎng)頁的HTML如下
程序代碼
我們參照樹的概念，畫出該HTML文檔結(jié)構(gòu)的DOM樹：
html
body head
div title
文本 文本
從上面的圖示可以看出
html有兩個(gè)子結(jié)點(diǎn)，而html就是這兩個(gè)子節(jié)點(diǎn)的父結(jié)點(diǎn)
head有節(jié)點(diǎn)title，title下有一個(gè)文本節(jié)點(diǎn)
doby下有節(jié)點(diǎn)div，div下有一個(gè)文本節(jié)點(diǎn)
三、操作DOM樹
開篇已經(jīng)說過，DHTML本質(zhì)就是操作DOM樹。如何操作它呢？
假設(shè)我要改變上面HTML文檔中div結(jié)點(diǎn)的文本，如何做?
程序代碼
<script> <br/> function changedivText (strText) { <br/> var nodeRoot = document; //這個(gè)是根結(jié)點(diǎn) <br/> var nodeHTML = nodeRoot.childNodes[0]; //這個(gè)是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這個(gè)屬性，因此我們可以改變這個(gè)屬性，也就成功的操作了DOM樹中的一個(gè)結(jié)點(diǎn)了 <br/> } <br/> </script>
從上面的示例可以看出，我們可以用上面的這種方法操作DOM樹上的任一節(jié)點(diǎn)。（注：1. 跨域除外，跨域通常是在操作frame上，簡(jiǎn)單的說，就是兩個(gè)frame不屬于同一域名。2.上面的操作為了演示，采用的方法是從根結(jié)點(diǎn)一直到文本結(jié)點(diǎn)的遍歷，在DOM方法上，有更簡(jiǎn)潔的方法，這些以后會(huì)有更多示例加以說明，下文中也會(huì)有介紹）
三、DOM節(jié)點(diǎn)。
細(xì)心些的朋友也許發(fā)現(xiàn)了，在上面寫的HTML代碼時(shí)用<>與包函起來的就是一個(gè)結(jié)點(diǎn)，事實(shí)上是這樣的嗎？答案是否定的。下面就是說說節(jié)點(diǎn)類型，否則在有的時(shí)候是會(huì)犯錯(cuò)誤的。比如，你把上面的代碼放到Mozilla firefox的瀏覽器里運(yùn)行一下，就會(huì)知道了。
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就是屬于該類型。
（注：一個(gè)空格也就可能是一個(gè)文本結(jié)點(diǎn)）
通常更需要注意的是文本結(jié)點(diǎn)，有可能一個(gè)回車，一個(gè)空格都是文本結(jié)點(diǎn)。這一點(diǎn)以后會(huì)碰到，當(dāng)然，我們也有辦法處理，這里先不要急，以后也會(huì)說到的。
四、DOM常用的API
這些常用的API是要記下來的，當(dāng)然在非IE的瀏覽器里也會(huì)有效，是符合w3c的。這些API在以后的編程中會(huì)常常用到。正如每個(gè)編程平臺(tái)所提供的API一樣，常用必須記下來，節(jié)省時(shí)間從而提高編程效率。只寫幾個(gè)最常用的，其它的API會(huì)在以后的示例中寫出。由淺而深，從易到難嘛。
1、獲取ELEMENT_NODE，元素節(jié)點(diǎn)
1)、方法：document.getElementById(元素的Id)，返回值為元素的節(jié)點(diǎn)引用?？梢约傧胍幌逻@個(gè)API的原理：象我們上面所做的是遍歷每個(gè)節(jié)點(diǎn)（從根到我們所需結(jié)點(diǎn)），這個(gè)API，也可以想成是從根遍歷，查詢每個(gè)結(jié)點(diǎn)（空白結(jié)點(diǎn)和空結(jié)點(diǎn)除外），并獲取該結(jié)點(diǎn)的id是否為指定的ID，如果是的話，就返回這個(gè)結(jié)點(diǎn)（注：在JS中，數(shù)組和對(duì)象是引用類型），如果沒有就返回空。我們可以寫寫這個(gè)代碼，幫助我們理解document.getElementById。下面是一個(gè)簡(jiǎn)單遍歷BODY中元素的示例。
<html>
<head>
<title>never-online's website</title>
<script>
function myGetElementById (id) {
var nodeRoot = document; //這個(gè)是根結(jié)點(diǎn)
var nodeHTML = nodeRoot.childNodes[0]; //這個(gè)是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++) { //簡(jiǎn)單的遍歷（指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，返回值：一個(gè)節(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這兩個(gè)API為例，我們就可以把上面所寫的代碼簡(jiǎn)化一下了，示例如下：
<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)簽的名字)，返回一個(gè)集合，該集合的把有元素都是有指定標(biāo)簽的元素。訪問集合里的元素，可以用下標(biāo)來訪問。語法里的object，是指document（根）或者是一個(gè)ELEMENT_NODE。這個(gè)的原理示例我就不寫了，可以作為一個(gè)作業(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>再取一個(gè)例子，注意，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>二、動(dòng)態(tài)創(chuàng)建與插入結(jié)點(diǎn)
1)、創(chuàng)建結(jié)點(diǎn)對(duì)象。document.createElement(tagname)，tagname指的是一個(gè)標(biāo)簽，比如一個(gè)DIV，就是document.createElement("DIV")，它返回的是這個(gè)結(jié)點(diǎn)的引用。
2)、在body的尾部插入結(jié)點(diǎn)用document.body.appendChild(object)，為了容易理解，下面這個(gè)示例，我用了IE專有的屬性object.outerHTML，得到一個(gè)該元素的HTML標(biāo)簽內(nèi)容（包括自身），這樣會(huì)更容易看到效果。
<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為一個(gè)我們創(chuàng)建的結(jié)點(diǎn)，oChildNode是可選的，為object下的一個(gè)子節(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)，這個(gè)就是語法，下面看示例。
<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é)我們就可以用這幾個(gè)簡(jiǎn)單的API做許多事情了，幾個(gè)API就可以寫出很多效果
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!
Article chaud
Outils chauds
Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Guide d'utilisation de l'API Oracle?: exploration de la technologie d'interface de données
Mar 07, 2024 am 11:12 AM
Oracle est un fournisseur de systèmes de gestion de bases de données de renommée mondiale et son API (Application Programming Interface) est un outil puissant qui aide les développeurs à interagir et à s'intégrer facilement aux bases de données Oracle. Dans cet article, nous approfondirons le guide d'utilisation de l'API Oracle, montrerons aux lecteurs comment utiliser la technologie d'interface de données pendant le processus de développement et fournirons des exemples de code spécifiques. 1.Oracle
Tutoriel JavaScript simple?:?Comment obtenir le code d'état HTTP
Jan 05, 2024 pm 06:08 PM
Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest
Analyse de la stratégie d'intégration des API Oracle?: parvenir à une communication transparente entre les systèmes
Mar 07, 2024 pm 10:09 PM
Analyse de la stratégie d'intégration de l'API Oracle?: pour parvenir à une communication transparente entre les systèmes, des exemples de code spécifiques sont nécessaires. à l'ère numérique d'aujourd'hui, les systèmes internes de l'entreprise doivent communiquer entre eux et partager des données, et l'API Oracle est l'un des outils importants pour contribuer à une communication transparente. communication entre les systèmes. Cet article commencera par les concepts et principes de base d'OracleAPI, explorera les stratégies d'intégration d'API et enfin donnera des exemples de code spécifiques pour aider les lecteurs à mieux comprendre et appliquer OracleAPI. 1. API Oracle de base
Comment obtenir facilement le code d'état HTTP en JavaScript
Jan 05, 2024 pm 01:37 PM
Introduction à la méthode d'obtention du code d'état HTTP en JavaScript : Dans le développement front-end, nous devons souvent gérer l'interaction avec l'interface back-end, et le code d'état HTTP en est une partie très importante. Comprendre et obtenir les codes d'état HTTP nous aide à mieux gérer les données renvoyées par l'interface. Cet article explique comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournit des exemples de code spécifiques. 1. Qu'est-ce que le code d'état HTTP ? Le code d'état HTTP signifie que lorsque le navigateur lance une requête au serveur, le service
Comment gérer les problèmes d'erreur de l'API Laravel
Mar 06, 2024 pm 05:18 PM
Titre?: Comment gérer les problèmes d'erreur de l'API Laravel, des exemples de code spécifiques sont nécessaires lors du développement de Laravel, des erreurs d'API sont souvent rencontrées. Ces erreurs peuvent provenir de diverses raisons telles que des erreurs logiques du code du programme, des problèmes de requête de base de données ou des échecs de requête d'API externe. La fa?on de gérer ces rapports d'erreurs est un problème clé. Cet article utilisera des exemples de code spécifiques pour démontrer comment gérer efficacement les rapports d'erreurs de l'API Laravel. 1. Gestion des erreurs dans Laravel
Tutoriel Insomnia?: Comment utiliser l'interface API PHP
Jan 22, 2024 am 11:21 AM
Interface API PHP : Comment utiliser Insomnia Insomnia est un puissant outil de test et de débogage d'API. Il peut aider les développeurs à tester et vérifier rapidement et facilement les interfaces API. Il prend en charge plusieurs langages de programmation et protocoles, y compris PHP. Cet article explique comment utiliser Insomnia pour tester l'interface PHPAPI. étape 1 : Installer InsomniaInsomnia est une application multiplateforme prenant en charge Windows, MacOS et Linux.
Services Web en PHP
Mar 27, 2024 am 08:06 AM
Avec la popularité d’Internet et des appareils mobiles, le WebService (service réseau) est devenu une technologie incontournable. Désormais, WebService est devenu un protocole de communication standardisé, il peut donc être complété par différents systèmes. Dans le développement PHP, WebService est également une technologie très importante et courante. Cet article explorera les services Web en PHP, y compris les bases et comment les utiliser. 1. Qu'est-ce qu'un service Web ? La notion de services Web fait référence à la fourniture de services sur le Web
Comment mettre en ?uvre un système de signature électronique en ligne à l'aide de WebSocket et JavaScript
Dec 18, 2023 pm 03:09 PM
Présentation de l'utilisation de WebSocket et de JavaScript pour mettre en ?uvre un système de signature électronique en ligne : Avec l'avènement de l'ère numérique, les signatures électroniques sont largement utilisées dans divers secteurs pour remplacer les signatures papier traditionnelles. En tant que protocole de communication full-duplex, WebSocket peut effectuer une transmission de données bidirectionnelle en temps réel avec le serveur. En combinaison avec JavaScript, un système de signature électronique en ligne peut être mis en ?uvre. Cet article expliquera comment utiliser WebSocket et JavaScript pour développer un outil en ligne simple.
