DOM基礎(chǔ)教程之使用DOM
更新時(shí)間：2015年01月19日 15:13:40 投稿：hebedich
這篇文章主要介紹了DOM基礎(chǔ)教程之使用DOM的相關(guān)資料,需要的朋友可以參考下
在了解DOM(文本對(duì)象模型)的框架和節(jié)點(diǎn)后，最重要的是使用這些節(jié)點(diǎn)處理html網(wǎng)頁(yè)
對(duì)于一個(gè)DOM節(jié)點(diǎn)node，都有一系列的屬性和方法可以使用。常用的有下表。
完善：http://www.w3school.com.cn/xmldom/dom_element.asp
1.訪問(wèn)節(jié)點(diǎn)
BOM提供了一些邊界的方法訪問(wèn)節(jié)點(diǎn)，常用的就是getElementsByTagName()，和getElementById()
復(fù)制代碼 代碼如下:
<script type="text/javascript">
function searchDOM(){
var oLi = document.getElementsByTagName("li");
var j =oLi.length;
var j2 =oLi[5].tagName;
var j3 =oLi[0].childNodes[0].nodeValue;
document.write(j+"<br>"+j2+"<br>"+j3+"<br>");
}
</script>
<body>
<body onload="searchDOM()">
<div id-"in"></div>
<ul>客戶端語(yǔ)言
<li>HTML</li>
<li>JavaScript</li>
<li>CSS</li>
</ul>
<ul>服務(wù)器端語(yǔ)言
<li>ASP.NET</li>
<li>JSP</li>
<li>PHP</li>
</ul>
</body>
document.getElementById()
復(fù)制代碼 代碼如下:
<script type="text/javascript">
window.onload = function(){
function findid(){
var j4 =oli2.tagName;
document.write(j4);
}
var oli2 = document.getElementById("inn");
oli2.onclick = findid;
}
</script>
<li id="inn">PHP</li>
復(fù)制代碼 代碼如下:
<html>
<body id="myid" class="mystyle">
<div class="myid2"></div>
<script type="text/javascript">
x=document.getElementsByTagName('div')[0];
document.write("div CSS class: " + x.className);
document.write("<br />");
document.write("An alternate way: ");
document.write(document.getElementById('myid').className);
</script>
</body>
</html>
//id獲得className
2.檢測(cè)節(jié)點(diǎn)類(lèi)型
通過(guò)節(jié)點(diǎn)的nodeType可以檢測(cè)到節(jié)點(diǎn)的類(lèi)型，該參數(shù)一個(gè)返回12個(gè)整數(shù)值。
表達(dá)格式如 document.nodeType
正真有用的，還是DOM（一）模型中的模型節(jié)點(diǎn) 提到的三種類(lèi)型
元素節(jié)點(diǎn)，文本節(jié)點(diǎn)和屬性節(jié)點(diǎn)
1.元素節(jié)點(diǎn) element node 返回值為 1
2.屬性節(jié)點(diǎn) attribute node 返回值為 2
3.文本節(jié)點(diǎn) text node 返回值為 3
復(fù)制代碼 代碼如下:
<script type="text/javascript">
window.onload = function(){
function findid(){
var j5 =oli2.nodeType;
document.write("nodeType:"+ j5 +"<br>");
}
var oli2 = document.getElementById("inn");
oli2.onclick = findid;
}
</script>
<li id="inn">CSS</li>
返回：nodeType：1
這意味著可以對(duì)某種節(jié)點(diǎn)做單獨(dú)處理，在搜索節(jié)點(diǎn)時(shí)非常實(shí)用。后面會(huì)講到。
3.利用父子兄關(guān)系查找節(jié)點(diǎn)
在第一小節(jié)訪問(wèn)節(jié)點(diǎn)上，利用節(jié)點(diǎn)的childNodes屬性來(lái)訪問(wèn)元素節(jié)點(diǎn)包含的文本節(jié)點(diǎn)。
本小節(jié)利用節(jié)點(diǎn)的父子兄關(guān)系來(lái)查找節(jié)點(diǎn)
*利用hasChildNodes和childNodes屬性獲取該節(jié)點(diǎn)包含的所有節(jié)點(diǎn)
復(fù)制代碼 代碼如下:
<head>
<title>childNodes</title>
<script language="javascript">
window.onload = function myDOMInspector(){
var oUl = document.getElementById("myList"); //獲取<ul>標(biāo)記
var DOMString = "";
if(oUl.hasChildNodes()){ //判斷是否有子節(jié)點(diǎn)
var oCh = oUl.childNodes;
for(var i=0;i<oCh.length;i++) //逐一查找
DOMString += oCh[i].nodeName + "<br>";
}
document.write(DOMString);
}
</script>
</head>
<body>
<ul id="myList">
<li>糖醋排骨</li>
<li>圓籠粉蒸肉</li>
<li>泡菜魚(yú)</li>
<li>板栗燒雞</li>
<li>麻婆豆腐</li>
</ul>
</body>
4.DOM獲取節(jié)點(diǎn)的父節(jié)點(diǎn)
復(fù)制代碼 代碼如下:
<script language="javascript">
window.onload = function(){
var food = document.getElementById("mydearfood");
document.write(food.parentNode.tagName)
}
</script>
</head>
<body>
<ul>
<li>糖醋排骨</li>
<li>圓籠粉蒸肉</li>
<li>泡菜魚(yú)</li>
<li id="mydearfood">板栗燒雞</li>
<li>麻婆豆腐</li>
</ul>
//返回 ul
使用父節(jié)點(diǎn)，成功的獲得了指定節(jié)點(diǎn)的父節(jié)點(diǎn)
5.使用parentNode屬性
復(fù)制代碼 代碼如下:
<head>
<title>childNodes</title>
<script language="javascript">
window.onload = function(){
var food = document.getElementById("mydearfood");
var parentElm = food.parentNode;
while(parentElm.className != "colorful" && parentElm != document.body)
parentElm = parentElm.parentNode; //一路往上找
document.write("tageName:"+parentElm.tagName+"<br>");
document.write("claaName:"+parentElm.className+"<br>");
document.write("typeOf:"+typeof(food)+"<br>");
}
</script>
</head>
<body>
<div class="colorful">
<ul>
<span>
<li>糖醋排骨</li>
<li>圓籠粉蒸肉</li>
<li>泡菜魚(yú)</li>
<li id="mydearfood">板栗燒雞</li>
<li>麻婆豆腐</li>
</span>
</ul>
</div>
</body><br>//輸出<br>//tageName:DIV<br>claaName:colorful<br>typeOf:object
從某個(gè)子節(jié)點(diǎn)開(kāi)始，一直向上搜索父節(jié)點(diǎn)，直到節(jié)點(diǎn)的類(lèi)名為“colorful”
6.dom的兄弟關(guān)系
復(fù)制代碼 代碼如下:
<head>
<title>childNodes</title>
<script language="javascript">
window.onload = function(){
var foods = document.getElementById("mydearfood");
var nextF = foods.nextSibling;
alert("nextSibling:"+nextF.tagName +"<br>");
}
</script>
</head>
<body>
<div class="colorful">
<ul>
<span>
<li>糖醋排骨</li>
<li>圓籠粉蒸肉</li>
<li>泡菜魚(yú)</li>
<li id="mydearfood">板栗燒雞</li>
<li>麻婆豆腐</li>
<li>麻婆豆腐</li>
<li>麻婆豆腐</li>
</span>
</ul>
</div>
</body>
利用nextsibling和previousSibling屬性訪問(wèn)兄弟節(jié)點(diǎn)看上去很好。
但僅僅適用于ie瀏覽器
為了使用代碼有良好的兼容性，就必須使nodeType進(jìn)行判斷
以下做兼容性處理：
復(fù)制代碼 代碼如下:
<head>
<title>Siblings</title>
<script language="javascript">
function nextSib(node){
var tempLast = node.parentNode.lastChild;
//判斷是否是最后一個(gè)節(jié)點(diǎn)，如果是則返回null
if(node == tempLast)
return null;
var tempObj = node.nextSibling;
//逐一搜索后面的兄弟節(jié)點(diǎn)，直到發(fā)現(xiàn)元素節(jié)點(diǎn)為止
while(tempObj.nodeType!=1 && tempObj.nextSibling!=null)
tempObj = tempObj.nextSibling;
//三目運(yùn)算符，如果是元素節(jié)點(diǎn)則返回節(jié)點(diǎn)本身，否則返回null
return (tempObj.nodeType==1)?tempObj:null;
}
function prevSib(node){
var tempFirst = node.parentNode.firstChild;
//判斷是否是第一個(gè)節(jié)點(diǎn)，如果是則返回null
if(node == tempFirst)
return null;
var tempObj = node.previousSibling;
//逐一搜索前面的兄弟節(jié)點(diǎn)，直到發(fā)現(xiàn)元素節(jié)點(diǎn)為止
while(tempObj.nodeType!=1 && tempObj.previousSibling!=null)
tempObj = tempObj.previousSibling;
return (tempObj.nodeType==1)?tempObj:null;
}
function myDOMInspector(){
var myItem = document.getElementById("myDearFood");
//獲取后一個(gè)元素兄弟節(jié)點(diǎn)
var nextListItem = nextSib(myItem);
//獲取前一個(gè)元素兄弟節(jié)點(diǎn)
var preListItem = prevSib(myItem);
alert("后一項(xiàng):" + ((nextListItem!=null)?nextListItem.firstChild.nodeValue:null) + " 前一項(xiàng):" + ((preListItem!=null)?preListItem.firstChild.nodeValue:null) );
}
</script>
</head>
<body onload="myDOMInspector()">
<ul>
<li>糖醋排骨</li>
<li>圓籠粉蒸肉</li>
<li>泡菜魚(yú)</li>
<li id="myDearFood">板栗燒雞</li>
<li>麻婆豆腐</li>
</ul>
</body>
7.設(shè)置節(jié)點(diǎn)屬性
復(fù)制代碼 代碼如下:
<head>
<title>childNodes</title>
<script language="javascript">
window.onload = function(){
//獲取圖片
var imgDataBe = document.getElementsByTagName("img")[0];
//取得圖片的title屬性
imgDataBe.setAttribute("src","02.gif");
imgDataBe.setAttribute("title","人情坡");
document.write(imgDataBe.getAttribute("title"));
document.write(imgDataBe.getAttribute("alt"));
document.write(imgDataBe.getAttribute("node-data"));
document.write(imgDataBe.getAttribute("node_data"));
}
</script>
</head>
<body>
<div class="colorful">
<img src="01.jpg" title="情人坡" alt="111" node-data="222" node_data="3333">
<img src="01.jpg" title="情人坡22">
</body>
用setAttribute()方法設(shè)置節(jié)點(diǎn)屬性
復(fù)制代碼 代碼如下:
<head>
<title>childNodes</title>
<meta charset="utf-8" />
<script language="javascript">
window.onload = function() {
var bkk = document.getElementById("new5");
var clickbk = document.getElementById("qiehuan");
clickbk.onclick = dsqiehuan;
function dsqiehuan() {
bkk.setAttribute("class", "xxx")
}
}
</script>
<style>
.xxx{color:#ddd}
</style>
</head>
<body>
<div id="new5">
555
</div>
<em id="qiehuan">切換</em>
</body>
8.createElement() 創(chuàng)建節(jié)點(diǎn)
復(fù)制代碼 代碼如下:
<head>
<title>childNodes</title>
<meta charset="utf-8" />
<script language="javascript">
window.onload = function() {
var oP = document.createElement("p");
var oText = document.createTextNode("使用dom創(chuàng)建節(jié)點(diǎn)");
var oText1 = document.createTextNode("使用dom創(chuàng)建節(jié)點(diǎn)123");
oP.appendChild(oText);
oP.appendChild(oText1);
document.body.appendChild(oP);
}
</script>
</head>
<body>
<p>這里本來(lái)有個(gè)P，測(cè)試createElement()</p>
</body>
9.removeChild移除節(jié)點(diǎn)
復(fù)制代碼 代碼如下:
<head>
<title>childNodes</title>
<meta charset="utf-8" />
<script language="javascript">
window.onload = function() {
var oP = document.getElementsByTagName("p")[0];
oP.parentNode.removeChild(oP);//結(jié)尾為 .removeChild(oP)，不是.removeChild("oP")
}
</script>
</head>
<body>
<p>這里本來(lái)有個(gè)P，測(cè)試createElement()</p>
</body>
10.insertBefore() 在特定節(jié)點(diǎn)前插入節(jié)點(diǎn)
復(fù)制代碼 代碼如下:
<head>
<title>childNodes</title>
<meta charset="utf-8" />
<script language="javascript">
window.onload = function() {
var oPold = document.getElementsByTagName("p")[0];
var oPnew = document.createElement("p");
var oText = document.createTextNode("新節(jié)點(diǎn)")
oPnew.appendChild(oText) ;
oPold.parentNode.insertBefore(oPnew,oPold);//接收兩個(gè)參數(shù)，一個(gè)是新參數(shù)，一個(gè)是舊節(jié)點(diǎn)參數(shù)
}
</script>
</head>
<body>
<p>這里本來(lái)有個(gè)P</p>
</body>
11.在特定的節(jié)點(diǎn)之后插入新元素（2015年1月9日補(bǔ)充）
DOM提供的方法只能用insertBefore()在目標(biāo)元素前加入新的元素，或者利用appendchild()方法在父元素的childNodes末尾加入新的元素（示例：地址）。
而實(shí)際中常常用到在某個(gè)特定的元素末尾加入新的元素。而DOM方法并沒(méi)有insertBefore()方法，但是利用現(xiàn)有的知識(shí)，完全可以利用現(xiàn)有知識(shí)進(jìn)行編寫(xiě)。
代碼思路如下
復(fù)制代碼 代碼如下:
function insertAfter(newElement, targetElement) {
var oparent = targetElement.parentNode; //找到目標(biāo)元素的父元素
if (oparent.lastChild == targetElement) //如果目標(biāo)是最后一個(gè)元素了
oparent.appendChild(newElement); //直接添加到最后一個(gè)元素的后面
else //插入到下一個(gè)元素的父元素節(jié)點(diǎn)之前
oparent.insertBefore(newElement, targetElement.nextSibling)
實(shí)例：（元素外追加）原來(lái)實(shí)例：地址
復(fù)制代碼 代碼如下:
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onload="interP()">
<p>第一個(gè)</p>
<p id="target">第二個(gè)</p>
<script type="text/javascript">
function insertAfter(newElement, targetElement) {
var oparent = targetElement.parentNode; //找到目標(biāo)元素的父元素
if (oparent.lastChild == targetElement) //如果目標(biāo)是最后一個(gè)元素了
oparent.appendChild(newElement); //直接添加到最后一個(gè)元素的后面
else //插入到下一個(gè)元素的父元素節(jié)點(diǎn)之前
oparent.insertBefore(newElement, targetElement.nextSibling)
}
function interP() {
var ooParent = document.getElementById("target");
var oonewP = document.createElement("a");
oonewP.setAttribute("href"," var ootextP = document.createTextNode("鏈接");
oonewP.appendChild(ootextP);
insertAfter(oonewP, ooParent);
}
</script>
</body>
實(shí)例：元素內(nèi)添加
12.添加文檔碎片提高執(zhí)行效率
復(fù)制代碼 代碼如下:
<head>
<title>childNodes</title>
<meta charset="utf-8" />
<script language="javascript">
window.onload = function() {
var oPold = document.getElementsByTagName("p")[0];
var aColors = ["red","green","blue","magenta","yellow","chocolate","black","aquamarine","lime","fuchsia","brass","azure","brown","bronze","deeppink","aliceblue","gray","copper","coral","feldspar","orange","orchid","pink","plum","quartz","purple"];
var oFragment = document.createDocumentFragment(); //創(chuàng)建文檔碎片
for(var i=0;i<aColors.length;i++){
var oP = document.createElement("p");
var oText = document.createTextNode(aColors[i]);
oP.appendChild(oText);
oFragment.appendChild(oP); //將節(jié)點(diǎn)先添加到碎片中
}
//document.body.appendChild(oFragment); //最后一次性添加到頁(yè)面
oPold.parentNode.insertBefore(oFragment,oPold);//結(jié)合insertBefore使文檔碎片添加到節(jié)點(diǎn)之前
}
</script>
</head>
<body>
<p>這里本來(lái)有個(gè)P</p>
</body>
相關(guān)文章
JavaScript中各數(shù)制轉(zhuǎn)換全面總結(jié)
這篇文章主要介紹了JavaScript中各數(shù)制轉(zhuǎn)換,利用toString的基模式來(lái)進(jìn)行轉(zhuǎn)換,對(duì)數(shù)字調(diào)用 toString(10) 與調(diào)用 toString() 它們返回的區(qū)別和相同之處等等都在本文中提及，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-08
JavaScript開(kāi)發(fā)規(guī)范要求(規(guī)范化代碼)
作為一名開(kāi)發(fā)人員（WEB前端JavaScript開(kāi)發(fā)），不規(guī)范的開(kāi)發(fā)不僅使日后代碼維護(hù)變的困難，同時(shí)也不利于團(tuán)隊(duì)的合作，通常還會(huì)帶來(lái)代碼安全以及執(zhí)行效率上的問(wèn)題。2010-08-08
JavaScript設(shè)計(jì)模式開(kāi)發(fā)中組合模式的使用教程
組合模式可以理解為樹(shù)狀結(jié)構(gòu),因此組合模式適合對(duì)大批對(duì)象的操作,特別是層次結(jié)構(gòu)分明的,下面我們就來(lái)看看號(hào)稱面向?qū)ο蟮腏avaScript設(shè)計(jì)模式開(kāi)發(fā)中組合模式的使用教程2016-05-05
js 實(shí)現(xiàn)復(fù)制到粘貼板的功能代碼
主要是用到了 window.clipboardData.setData("Text",copyText);2010-05-05
原生js實(shí)現(xiàn)獲取form表單數(shù)據(jù)代碼實(shí)例
這篇文章主要介紹了原生js實(shí)現(xiàn)獲取form表單數(shù)據(jù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
詳解JavaScript中g(shù)etFullYear()方法的使用
這篇文章主要介紹了詳解JavaScript中g(shù)etFullYear()方法的使用,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
JavaScript高級(jí)程序設(shè)計(jì)（第3版）學(xué)習(xí)筆記8 js函數(shù)（中）
接著看函數(shù)——這個(gè)具有魔幻色彩的對(duì)象。在上篇文章中說(shuō)函數(shù)內(nèi)部屬性時(shí)，還遺留了一個(gè)this內(nèi)部屬性沒(méi)有解釋，不過(guò)在說(shuō)this之前，我想先說(shuō)一說(shuō)執(zhí)行環(huán)境和作用域的概念2012-10-10
NodeJS的url截取模塊url-extract的使用實(shí)例
本文主要介紹了NodeJS的url信息截取模塊url-extract的使用方法，最后提供了實(shí)例代碼供大家參考2013-11-11
在JavaScript中處理時(shí)間之setMinutes()方法的使用
這篇文章主要介紹了在JavaScript中處理時(shí)間之setMinutes()方法的使用,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
2008-01-01