1、DOM簡(jiǎn)介。
當(dāng)頁(yè)面加載時(shí)，瀏覽器會(huì)創(chuàng)建頁(yè)面的文檔對(duì)象模型（Document Object Model）。文檔對(duì)象模型定義訪問(wèn)和處理HTML文檔的標(biāo)準(zhǔn)方法。DOM 將HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹結(jié)構(gòu)，即節(jié)點(diǎn)樹。通過(guò)DOM，JS可創(chuàng)建動(dòng)態(tài)的HTML，可以使網(wǎng)頁(yè)顯示動(dòng)態(tài)效果并實(shí)現(xiàn)與用戶的交互功能。JS能夠改變頁(yè)面中所有的HTML元素、屬性和CSS樣式，并對(duì)頁(yè)面中所有事件做出響應(yīng)。所以學(xué)習(xí)JS的起點(diǎn)就是處理網(wǎng)頁(yè)，處理網(wǎng)頁(yè)就需要使用DOM進(jìn)行操作。
2、DOM獲取元素。
JS要想操作HTML元素，那么首先就必須先找到該元素。通常使用以下幾種方法完成：
通過(guò)元素設(shè)置的id找到HTML元素。
通過(guò)標(biāo)簽名找到HTML元素。
通過(guò)元素設(shè)置的名稱(name)找到HTML元素。
所謂的DOM，實(shí)際上就是document，獲取元素就是操作document。
(1)、通過(guò)id找到元素
方法：document.getElementById('id');
網(wǎng)頁(yè)是由標(biāo)簽將信息組合起來(lái)的，id屬性值是唯一的，就像身份證一樣，通過(guò)一個(gè)身份證可以找到相對(duì)應(yīng)的人，所以通過(guò)該方法，可以獲取到與之相對(duì)應(yīng)的標(biāo)簽，而獲取的元素在JS中是一個(gè)對(duì)象，若想對(duì)元素進(jìn)行操作，則需要通過(guò)他的屬性或方法。
(2)、通過(guò)標(biāo)簽名找到元素
方法：document.getElementsByTagName('Tagname');
通過(guò)該方法，返回的是帶有指定標(biāo)簽名的對(duì)象的集合，也就是以數(shù)組的形式返回，返回的順序是他們?cè)谖臋n中的順序。
(3)、通過(guò)name找到元素
方法：document.getElementsByName('name');
該方法與getElementById()方法有點(diǎn)相似，都是通過(guò)設(shè)置的屬性值找到元素，只不過(guò)該方法是通過(guò)設(shè)置的name屬性值查找元素。name屬性在文檔中可能不唯一，所以該方法返回的也是元素的數(shù)組，而不是一個(gè)元素。
<body> <input name="txt" type="text" value=""> <input name="txt" type="text" value=""><br> <input name="txt" type="text" value=""> <input name="txt" type="text" value=""><br> <input name="txt" type="text" value=""> <input name="aaa" type="text" value=""> <script> //獲取所有name值為txt的元素 var oTxt=document.getElementsByName("txt"); //獲取元素的個(gè)數(shù) alert(oTxt.length); //返回： //獲取第二個(gè)元素的值 alert(oTxt[].value); //返回： </script> </body> 既然可以通過(guò)id找到元素，那么也就可以通過(guò)class找到元素。className屬性用于設(shè)置或者返回元素的class類名。
語(yǔ)法：object.className = 'className'
該方法可以控制class類名，返回元素的class屬性，作用是可以為網(wǎng)頁(yè)中某個(gè)元素指定一個(gè)className來(lái)更改該元素的外觀。
實(shí)例：簡(jiǎn)單的網(wǎng)頁(yè)換膚效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>網(wǎng)頁(yè)換膚</title> <style> body{ background:lightgreen; } .col{ background:lightgray; } .col{ background:lightblue; } .col{ background:violet; } .col{ background:pink; } .col{ background:#f; } </style> </head> <body id="boy"> 點(diǎn)擊切換：<input type="button" value="灰色" onclick="gr()"> <input type="button" value="藍(lán)色" onclick="bl()"> <input type="button" value="紫色" onclick="vi()"> <input type="button" value="粉色" onclick="pi()"> <input type="button" value="橘色" onclick="or()"> <script> var x = document.getElementById('boy'); function gr(){ x.className='col'; } function bl(){ x.className='col'; } function vi(){ x.className='col'; } function pi(){ x.className='col'; } function or(){ x.className='col'; } </script> </body> </html>這只是一個(gè)簡(jiǎn)單的切換背景色效果，如果想切換網(wǎng)頁(yè)的整體樣式，可以使用外部CSS文件，通過(guò)JS改變link標(biāo)簽的href屬性來(lái)完成。
如果想設(shè)置多個(gè)class類名相同的元素的樣式，就需要借助數(shù)組的方法來(lái)完成，其實(shí)現(xiàn)原理也很簡(jiǎn)單，首先通過(guò)id獲取其父元素，再獲取父元素下所有子元素的標(biāo)簽名，獲取標(biāo)簽名返回的是元素的數(shù)組，所以就可以和訪問(wèn)數(shù)組一樣的方法來(lái)訪問(wèn)元素的數(shù)組，那么先使用循環(huán)遍歷該元素?cái)?shù)組，再做判斷，如果這個(gè)元素的className等于我們?cè)O(shè)置的class屬性值，就說(shuō)明這是我們要找的元素。
實(shí)例：將有序列表中所有class屬性值為"col"的元素背景顏色設(shè)置為綠色。
<body> <ol id="o"> <li>熱點(diǎn)</li> <li class="col">美食</li> <li>數(shù)碼</li> <li class="col">科技</li> <li>社會(huì)</li> <li class="col">養(yǎng)生</li> </ol> <script> //通過(guò)id獲取父元素 var aOl = document.getElementById('o'); //通過(guò)標(biāo)簽名獲取父元素下所有子元素 var oLi = aOl.getElementsByTagName('li'); //循環(huán)遍歷返回的子元素?cái)?shù)組 for(var i=;i<oLi.length;i++){ //如果當(dāng)前子元素的className等于設(shè)置的class屬性值，則將其背景設(shè)置為綠色 if(oLi[i].className=='col') oLi[i].style.background='green'; } </script> </body>下面是一個(gè)通過(guò)class屬性值獲取元素的封裝函數(shù)，方便以后使用。
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>封裝getByClass函數(shù)</title> <script> //第一個(gè)參數(shù)為獲取的父元素，第二個(gè)參數(shù)為class屬性值。 function getByClass(oParent,aClass){ //空數(shù)組可以把找到的所有className都存放在里邊，最后返回。 var aResult=[]; //通過(guò)標(biāo)簽名獲取父元素下所有子元素。標(biāo)簽名不固定，所以設(shè)置為*，便于傳入。 var aEle=oParent.getElementsByTagName('*'); //循環(huán)遍歷返回的子元素?cái)?shù)組 for(var i=;i<aEle.length;i++){ //如果當(dāng)前子元素的className等于傳入的class屬性值，則將其添加到數(shù)值中。 if(aEle[i].className==aClass) aResult.push(aEle[i]); } //最后將這個(gè)數(shù)組返回 return aResult; } </script> </head> <body> <ol id="o"> <li>熱點(diǎn)</li> <li class="col">美食</li> <li>數(shù)碼</li> <li class="col">科技</li> <li>社會(huì)</li> <li class="col">養(yǎng)生</li> </ol> <script> //封裝函數(shù)的使用： //先通過(guò)id獲取父元素 var aOl=document.getElementById('o'); //再調(diào)用封裝好的函數(shù)傳入?yún)?shù)，獲取的父元素，子元素的class屬性值 var oCol=getByClass(aOl,'col'); //最后循環(huán)遍歷，設(shè)置樣式 for(var i=;i<oCol.length;i++){ oCol[i].style.background='green'; } </script> </body> </html>3、DOM操作。
獲取到HTML元素之后，就可以進(jìn)行相應(yīng)的操作。
(1)、改變HTML
修改HTML內(nèi)容的最簡(jiǎn)單的方法時(shí)使用 innerHTML 屬性。innerHTML顧名思義，inner就是內(nèi)部的，既然是HTML，那么就可以給里邊放HTML。該屬性可用于獲取和替換HTML元素的內(nèi)容。
語(yǔ)法：document.getElementById(id).innerHTML = new HTML
<body> <h id="tit">原標(biāo)題</h> <script> //改變?cè)袠?biāo)題 var aH=document.getElementById('tit'); aH.innerHTML='新標(biāo)題'; </script> <div id="div" style="width:px;height:px;border:px solid black;"></div> <script> //創(chuàng)建HTML內(nèi)容 var oDiv=document.getElementById('div'); oDiv.innerHTML='<h>我是h標(biāo)題</h><p>我是一個(gè)段落</p>'; </script> </body>(2)、操作元素屬性
修改元素屬性最簡(jiǎn)單的方法就是直接修改，語(yǔ)法：document.getElementById(id).屬性名 = new value 比如修改圖片src屬性的指向路徑。
此外還可以通過(guò)DOM方法獲取、添加、刪除元素的屬性。
①、getAttribute()
getAttribute()方法通過(guò)元素節(jié)點(diǎn)的屬性名獲取屬性的值。
語(yǔ)法：elementNode.getAttribute(name) name是想要獲取的元素節(jié)點(diǎn)的屬性名
②、setAttribute()
setAttribute()方法添加一個(gè)新屬性并指定值，或者把一個(gè)現(xiàn)有的屬性設(shè)定為指定的值。
語(yǔ)法：elementNode.setAttribute(name,value) name是屬性名，value是屬性值。
③、removeAttribute()
removeAttribute()方法可刪除元素的屬性。
語(yǔ)法：elementNode.removeAttribute(name) name是屬性名。
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>JavaScript實(shí)例</title> </head> <body> <input id="txt" type="text"> <input id="btn" type="button" value="按鈕"> <script> var oTxt=document.getElementById('txt'); var oBtn=document.getElementById('btn'); //獲取按鈕value屬性的值 var a=oBtn.getAttribute('value'); alert(a); //返回：按鈕 oBtn.onclick=function (){ //操作元素屬性有三種方法： //第一種方法 //oTxt.value='請(qǐng)輸入文字'; //第二種方法 //oTxt['value']='請(qǐng)輸入文字'; //第三種方法 //修改文本框value屬性的值 oTxt.setAttribute('value','請(qǐng)輸入文字'); //刪除按鈕type屬性 oBtn.removeAttribute('type'); //刪除后默認(rèn)為文本框 }; </script> </body> </html>(3)、改變CSS
改變HTML元素的CSS樣式可直接使用該語(yǔ)法：document.getElementById(id).style.樣式名 = new style
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>JavaScript實(shí)例</title> <style> #div{ height:px; width:px; border:px solid black; padding:px; } p{ line-height:px; text-indent:em; } </style> </head> <body> <h>HTML DOM</h> <div id="div"> <h>JS可以使網(wǎng)頁(yè)添加動(dòng)態(tài)效果并實(shí)現(xiàn)與用戶交互的功能。</h> <p>. JS能夠改變頁(yè)面中所有的 HTML 元素。</p> <p>. JS能夠改變頁(yè)面中所有的 HTML 屬性。</p> <p>. JS能夠改變頁(yè)面中所有的 HTML 元素的CSS樣式。</p> </div> <input type="button" value="改變顏色" onclick="color()"> <input type="button" value="改變寬高" onclick="hig()"> <input type="button" value="隱藏內(nèi)容" onclick="none()"> <input type="button" value="顯示內(nèi)容" onclick="block()"> <input type="button" value="取消設(shè)置" onclick="cancel()"> <script> var oDiv = document.getElementById('div'); function color(){ oDiv.style.color = 'white'; oDiv.style.fontFamily = 'Microsoft YaHei'; oDiv.style.backgroundColor = 'green'; } function hig(){ oDiv.style.width = 'px'; oDiv.style.height = 'px'; oDiv.style.border = 'px solid #ccc'; } function none(){ oDiv.style.display = 'none'; } function block(){ oDiv.style.display = 'block'; } //取消設(shè)置 function cancel(){ var clean = confirm('確定取消所有設(shè)置？'); if(clean == true){ oDiv.removeAttribute('style'); } } </script> </body> </html>上面的代碼，通過(guò)style設(shè)置的樣式，都是行間樣式，可以使用火狐的Firebug點(diǎn)擊相應(yīng)的按鈕，就能看到所有設(shè)置的CSS樣式都出現(xiàn)在了行間。
可以直接通過(guò)style獲取和設(shè)置CSS樣式，那么有沒(méi)有更簡(jiǎn)潔的方法呢？可以借助于函數(shù)使用JS的內(nèi)置對(duì)象arguments完成，所謂arguments，就是可變參，不定參，參數(shù)的個(gè)數(shù)可變，是一個(gè)參數(shù)數(shù)組，無(wú)需指出參數(shù)名，就可訪問(wèn)他們，但是為了增強(qiáng)可讀性，給參數(shù)取名，還是很有必要的。
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>JavaScript實(shí)例</title> </head> <body> <div id="div" style="width:px;height:px;background:red"></div> <script> //獲取行間樣式 function css(){ //如果傳入?yún)?shù)的個(gè)數(shù)等于 if(arguments.length==){ //則返回第二個(gè)參數(shù)樣式名的值 return arguments[].style[arguments[]]; } else{ //否則就是設(shè)置CSS樣式 //第二個(gè)參數(shù)樣式名的值就等于傳入的第三個(gè)參數(shù) arguments[].style[arguments[]]=arguments[]; } } var oDiv=document.getElementById('div'); alert(css(oDiv,'width')); //獲取對(duì)象的寬 返回：px css(oDiv,'background','green'); //將對(duì)象的背景顏色改為綠色 </script> </body> </html>下面是一個(gè)獲取和設(shè)置行間樣式的封裝函數(shù)，以便以后使用。
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>獲取行間樣式</title> <script> function css(obj, name, value){ if(arguments.length==){ return obj.style[name]; } else{ obj.style[name]=value; } } </script> </head> <body> <div id="div" style="width:px;height:px;background:red"></div> <script> var oDiv=document.getElementById('div'); alert(css(oDiv,'width')); //獲取div的寬 css(oDiv,'background','green'); //設(shè)置div的背景顏色 </script> </body> </html>我們都知道，在實(shí)際的WEB項(xiàng)目開(kāi)發(fā)中，要遵循結(jié)果、表現(xiàn)、行為相分離的原則，以增強(qiáng)可讀性，優(yōu)化代碼，便于后期維護(hù)。所以通常我們?cè)O(shè)置元素的樣式，并非都是在行間設(shè)置。使用style方法獲取的只是DOM元素style屬性里的樣式規(guī)則，對(duì)于通過(guò)class屬性設(shè)置的外部樣式表，style就顯得力不從心了。那要如何獲取元素的非行間樣式呢？DOM標(biāo)準(zhǔn)中有個(gè)全局方法getComputedStyle，通過(guò)該方法可以獲取當(dāng)前對(duì)象的樣式信息。比如：getComputedStyle(obj, false).paddingLeft，可以獲取到對(duì)象的左內(nèi)邊距。這里需要注意：在獲取元素的復(fù)合樣式時(shí)，一定要使用精確的值，復(fù)合樣式比如background、border，如果要獲取元素的背景顏色，只使用background會(huì)出錯(cuò)，一定要寫成backgroundColor。
JS只能修改元素的行間樣式，并不能修改獲取到的非行間樣式。那么很多人可能會(huì)產(chǎn)生疑問(wèn)，既然可以獲取到又不能修改，那還獲取有什么用。其實(shí)獲取非行間樣式是非常有必要的，如果是外部樣式表，樣式都是密密麻麻一片英文的存在，不可能一個(gè)個(gè)去找，到底該元素設(shè)置的什么樣子，再回頭修改，那豈不是太浪費(fèi)精力了，所以該方法就顯得尤為重要，而且返回的值都是精確值，通過(guò)獲取的非行間樣式信息，也有利于更精細(xì)的修改元素的當(dāng)前樣式，這是多么美妙的一件事，直接使用style設(shè)置元素的行間樣式，因?yàn)樾虚g樣式的優(yōu)先級(jí)最高，所以就覆蓋掉了非行間樣式，其實(shí)也就相當(dāng)于跟修改了非行間樣式一樣，只是顯示在了行間，我們目的反著是已經(jīng)達(dá)到了。
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>獲取非行間樣式</title> <style> #div{ width:px; height:px; background:red; margin-top:px; } </style> <script> window.onload=function (){ var oDiv=document.getElementById('div'); alert(getComputedStyle(oDiv,false).width); oDiv.style.width='px'; alert(getComputedStyle(oDiv,false).height); oDiv.style.height='px'; //注意這里修改復(fù)合樣式時(shí)，使用的background，可在FF下用Firebug查看具體的行間樣式。 alert(getComputedStyle(oDiv,false).backgroundColor); oDiv.style.background='green'; }; </script> </head> <body> <div id="div"></div> </body> </html>(4)、對(duì)事件做出響應(yīng)
實(shí)例：全選和反選，輸入對(duì)應(yīng)的序號(hào)選中
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>JavaScript實(shí)例</title> </head> <body> <form id="list"> 請(qǐng)選擇你的業(yè)余愛(ài)好:<br> . 音樂(lè)<input type="checkbox" name="love" id="like"> . 閱讀<input type="checkbox" name="love" id="like"> . 游泳<input type="checkbox" name="love" id="like"> . 籃球<input type="checkbox" name="love" id="like"> . 足球<input type="checkbox" name="love" id="like"> . 散步<input type="checkbox" name="love" id="like"> . 泡吧<input type="checkbox" name="love" id="like"> . 逛街<input type="checkbox" name="love" id="like"><br> <input type="button" value = "全選" onclick="optAll()"> <input type="button" value = "反選" onclick="noAll()"> <p>輸入-序號(hào)選擇，每次只可以選擇一項(xiàng)：</p> <input id="txt" type="text"> <input id="btn" type="button" value="確定"> </form> <script> function optAll(){ //通過(guò)獲取標(biāo)簽名設(shè)置全選 var oList = document.getElementById('list'); var aCheck = oList.getElementsByTagName('input'); for(var i=;i<aCheck.length;i++){ if(aCheck[i].type =='checkbox'){ aCheck[i].checked=true; } } } function noAll(){ //通過(guò)獲取設(shè)置的name屬性值設(shè)置反選 var aLove = document.getElementsByName('love'); for(var i=;i<aLove.length;i++){ if(aLove[i].type =='checkbox'){ aLove[i].checked=false; } } } var oBtn = document.getElementById('btn'); //給獲取的按鈕添加點(diǎn)擊事件 oBtn.onclick = function (){ //獲取文本框輸入的值 var oTxt = document.getElementById("txt").value; //定義的復(fù)選框id值為like-。括號(hào)中進(jìn)行的是字符串連接，id+輸入到文本框的值=該元素的id值 var oLike = document.getElementById('like' + oTxt); oLike.checked = true; } </script> </body> </html>3、DOM節(jié)點(diǎn)。
HTML文檔可以說(shuō)是由節(jié)點(diǎn)構(gòu)成的集合，常見(jiàn)的DOM節(jié)點(diǎn)有三種，即元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)。元素節(jié)點(diǎn)就是HTML標(biāo)簽，標(biāo)簽的屬性就是屬性節(jié)點(diǎn)，文本節(jié)點(diǎn)就是頁(yè)面可以瀏覽的內(nèi)容。
在文檔對(duì)象模型中，每一個(gè)節(jié)點(diǎn)都是一個(gè)對(duì)象，DOM節(jié)點(diǎn)有三個(gè)重要的屬性：節(jié)點(diǎn)的名稱，節(jié)點(diǎn)的值和節(jié)點(diǎn)的類型。
(1)、nodeName：節(jié)點(diǎn)的名稱
nodeName屬性返回節(jié)點(diǎn)的名稱。元素節(jié)點(diǎn)的名稱與標(biāo)簽名相同(大寫)，屬性節(jié)點(diǎn)的名稱是屬性的名稱，文本節(jié)點(diǎn)的名稱永遠(yuǎn)都是#text，文檔節(jié)點(diǎn)的名稱永遠(yuǎn)都是#document。
(2)、nodeValue：節(jié)點(diǎn)的值
nodeValue屬性返回節(jié)點(diǎn)的值。元素節(jié)點(diǎn)的值是undegined或null，屬性節(jié)點(diǎn)的值是屬性的值，文本節(jié)點(diǎn)的值是文本自身。
(3)、nodeType：節(jié)點(diǎn)的類型
nodeType屬性返回節(jié)點(diǎn)的類型。以下是常見(jiàn)的節(jié)點(diǎn)類型：
<body> <ul> <li>JS</li> <li>DOM</li> </ul> <script> var nodes=document.getElementsByTagName('li'); for(var i=;i<nodes.length;i++){ document.write('第'+(i+)+'個(gè)節(jié)點(diǎn)的名稱是'+nodes[i].nodeName+'<br>'); document.write('第'+(i+)+'個(gè)節(jié)點(diǎn)的值是'+nodes[i].nodeValue+'<br>'); document.write('第'+(i+)+'個(gè)節(jié)點(diǎn)的類型是'+nodes[i].nodeType+'<br>'); document.write('<br>'); } /* 返回： 第個(gè)節(jié)點(diǎn)的名稱是LI 第個(gè)節(jié)點(diǎn)的值是null 第個(gè)節(jié)點(diǎn)的類型是 第個(gè)節(jié)點(diǎn)的名稱是LI 第個(gè)節(jié)點(diǎn)的值是null 第個(gè)節(jié)點(diǎn)的類型是 */ </script> </body>JS中函數(shù)可以嵌套使用，有父函數(shù)有子函數(shù)，HTML標(biāo)簽也可以嵌套使用，那么就說(shuō)明存在著各種不同的節(jié)點(diǎn)關(guān)系，比如父節(jié)點(diǎn)、子節(jié)點(diǎn)和兄弟節(jié)點(diǎn)。為了方便操作，DOM定義了一些節(jié)點(diǎn)的公共屬性。
(1)、子節(jié)點(diǎn)
childNodes屬性返回節(jié)點(diǎn)的子節(jié)點(diǎn)集合，可使用length屬性返回子節(jié)點(diǎn)的數(shù)量，然后就可以和數(shù)組一樣獲取需要的信息。
<body> <ul id="u"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <script> var oUl=document.getElementById('u'); alert(oUl.childNodes.length); //返回： </script> </body>通過(guò)上面的代碼，可以看到返回的是11。ul下明明只有5個(gè)li元素，怎么會(huì)返回11呢？其實(shí)是這么回事：
<ul id="u"> 第個(gè)節(jié)點(diǎn)（文本節(jié)點(diǎn)） <li>第個(gè)節(jié)點(diǎn)（元素節(jié)點(diǎn)）</li> 第個(gè)節(jié)點(diǎn)（文本節(jié)點(diǎn)） <li>第個(gè)節(jié)點(diǎn)（元素節(jié)點(diǎn)）</li> 第個(gè)節(jié)點(diǎn)（文本節(jié)點(diǎn)） <li>第個(gè)節(jié)點(diǎn)（元素節(jié)點(diǎn)）</li> 第個(gè)節(jié)點(diǎn)（文本節(jié)點(diǎn)） <li>第個(gè)節(jié)點(diǎn)（元素節(jié)點(diǎn)）</li> 第個(gè)節(jié)點(diǎn)（文本節(jié)點(diǎn)） <li>第個(gè)節(jié)點(diǎn)（元素節(jié)點(diǎn)）</li> 第個(gè)節(jié)點(diǎn)（文本節(jié)點(diǎn)） </ul>
因?yàn)橥ㄟ^(guò)childNodes屬性返回的子節(jié)點(diǎn)集合，不僅包括元素節(jié)點(diǎn)，而且還包括文本節(jié)點(diǎn)，瀏覽會(huì)將標(biāo)簽之間的空白默認(rèn)為文本節(jié)點(diǎn)，在空白處輸入文字，會(huì)在瀏覽器顯示。所以建議使用children屬性，該屬性只返回元素節(jié)點(diǎn)，不包括文本節(jié)點(diǎn)，并且不包括注釋節(jié)點(diǎn)。
<body> <ul id="u"> <li> 我是個(gè)文本節(jié)點(diǎn) <span>我是span元素。</span> </li> <li></li> <!-- 注釋 --> <li></li> <li></li> <li></li> </ul> <script> var oUl=document.getElementById('u'); alert(oUl.children.length); //返回： </script> </body>上面的代碼，ul下5個(gè)li元素，返回子節(jié)點(diǎn)個(gè)數(shù)為5。children屬性要比childNodes屬性好用太多了，只返回元素的子節(jié)點(diǎn)，還不包括孫子輩節(jié)點(diǎn)。
(2)、首尾子節(jié)點(diǎn)
firstElementChild屬性返回children數(shù)組的第一個(gè)節(jié)點(diǎn)。
語(yǔ)法：node.firstElementChild 該方法相當(dāng)于：element.children[0]
lastElementChild屬性返回children數(shù)組的最后一個(gè)節(jié)點(diǎn)。
語(yǔ)法：node.lastElementChild 該方法相對(duì)于：element.children[element.children.length-1]
<body> <div style="border:px solid green" id="div"> 空白節(jié)點(diǎn) <p>JS</p> <div>DOM</div> <h>jQuery</h> </div> <script> var x=document.getElementById('div'); document.write('第一個(gè)節(jié)點(diǎn)的名稱：'+x.firstElementChild.nodeName+'<br>'); //返回：第一個(gè)子節(jié)點(diǎn)的名稱：P document.write('最后一個(gè)節(jié)點(diǎn)的名稱：'+x.lastElementChild.nodeName) //返回：最后一個(gè)子節(jié)點(diǎn)的名稱：H </script> </body>(3)、父節(jié)點(diǎn)
parentNode屬性用于獲取指定節(jié)點(diǎn)的父節(jié)點(diǎn)。注意：父節(jié)點(diǎn)只能有一個(gè)。通過(guò)使用兩個(gè)獲取父節(jié)點(diǎn)，可獲取祖節(jié)點(diǎn)。
實(shí)例：點(diǎn)擊子節(jié)點(diǎn)，隱藏父節(jié)點(diǎn)
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>JavaScript實(shí)例</title> </head> <body> <ul id="u"> <li>aaa <a href="javascript:;">點(diǎn)擊隱藏</a></li> <li>bbb <a href="javascript:;">點(diǎn)擊隱藏</a></li> <li>ccc <a href="javascript:;">點(diǎn)擊隱藏</a></li> <li>ddd <a href="javascript:;">點(diǎn)擊隱藏</a></li> <li>eee <a href="javascript:;">點(diǎn)擊隱藏</a></li> </ul> <script> var oUl=document.getElementById('u'); //查看ul元素的父節(jié)點(diǎn) alert(oUl.parentNode); //返回：[object HTMLBodyElement] //通過(guò)標(biāo)簽名獲取所有的a元素 var aA=document.getElementsByTagName('a'); for(var i=;i<aA.length;i++){ aA[i].onclick=function (){ //設(shè)置當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)為隱藏 this.parentNode.style.display='none'; }; } </script> </body> </html>offsetParent屬性可返回一個(gè)元素用于定位的父級(jí)。
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>JavaScript實(shí)例</title> <style> #div{ width:px; height:px; background:green; margin:px; /*position:relative;*/ } #div{ width:px; height:px; background:red; position:absolute; left:px; top:px; } </style> </head> <body> <div id="div"> <div id="div"></div> </div> <script> var oDiv=document.getElementById('div'); alert(oDiv.offsetParent); //返回：[object HTMLBodyElement] //div的父級(jí)是div,如果取消div相對(duì)定位的注釋。則返回：[object HTMLDivElement] </script> </body> </html>(3)、兄弟節(jié)點(diǎn)
nextElementSibling屬性返回同一樹層級(jí)中某個(gè)節(jié)點(diǎn)之后緊跟的節(jié)點(diǎn)。
語(yǔ)法：element.nextElementSibling
previousElementSibling屬性返回同一樹層級(jí)中某個(gè)節(jié)點(diǎn)之前緊跟的節(jié)點(diǎn)。
語(yǔ)法：element.previousElementSibling
| 節(jié)點(diǎn)類型 | 說(shuō)明 | 值 |
| 元素節(jié)點(diǎn) | 每一個(gè)HTML標(biāo)簽都是一個(gè)元素節(jié)點(diǎn)，如 <div> 、 <p>、<ul>等 | 1 |
| 屬性節(jié)點(diǎn) | 元素節(jié)點(diǎn)（HTML標(biāo)簽）的屬性，如 id 、class 、name 等。 | 2 |
| 文本節(jié)點(diǎn) | 元素節(jié)點(diǎn)或?qū)傩怨?jié)點(diǎn)中的文本內(nèi)容。 | 3 |
| 注釋節(jié)點(diǎn) | 表示文檔注釋，形式為<!-- text content -->。 | 8 |
| 文檔節(jié)點(diǎn) | 表示整個(gè)文檔（DOM 樹的根節(jié)點(diǎn)，即 document ）。 | 9 |
實(shí)例：獲取li元素節(jié)點(diǎn)的兄弟節(jié)點(diǎn)
<body>
<ul> <li>HTML</li> <li>CSS</li> <li>JS</li> </ul> <script> var aLi=document.getElementsByTagName('li'); //獲取第二個(gè)子節(jié)點(diǎn)之后緊跟的節(jié)點(diǎn) var x=aLi[].nextElementSibling; alert(x.innerHTML); //返回：JS //獲取第二個(gè)子節(jié)點(diǎn)之前緊跟的節(jié)點(diǎn) var x=aLi[].previousElementSibling; alert(x.innerHTML); //返回：HTML </script> </body>4、DOM應(yīng)用。
DOM最實(shí)際的應(yīng)用就是可以通過(guò)JS創(chuàng)建、插入和刪除節(jié)點(diǎn)。
(1)、創(chuàng)建節(jié)點(diǎn)
createElement()方法可創(chuàng)建元素節(jié)點(diǎn)。
語(yǔ)法：document.createElement(tagName)
appendChild()方法可在指定節(jié)點(diǎn)的末尾插入一個(gè)新的子節(jié)點(diǎn)，每次都向末尾添加。
語(yǔ)法：父級(jí).appendChild(new node)
實(shí)例：創(chuàng)建并添加li元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>JavaScript實(shí)例</title> <script> window.onload=function (){ var oBtn=document.getElementById('btn'); var oUl=document.getElementById('u'); var oTxt=document.getElementById('txt'); //文本框輸入提示 oTxt.placeholder='請(qǐng)輸入文字創(chuàng)建li元素'; oBtn.onclick=function (){ //創(chuàng)建li元素 var oLi=document.createElement('li'); //創(chuàng)建的li元素的HTML=文本框輸入的值 oLi.innerHTML=oTxt.value; //插入到oUl父級(jí)下，作為子節(jié)點(diǎn)，在每個(gè)創(chuàng)建的li末尾插入新創(chuàng)建的li元素 oUl.appendChild(oLi); //父級(jí).appendCild(子節(jié)點(diǎn)); }; }; </script> </head> <body> <input id="txt" type="text"value=""> <input id="btn" type="button"value="創(chuàng)建li"> <ul id="u"></ul> </body> </html>(2)、插入節(jié)點(diǎn)
insertBefore()方法可在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)。
語(yǔ)法：父級(jí).insertBefore(new node, node) 第一個(gè)參數(shù)為要插入的新子節(jié)點(diǎn)。第二個(gè)參數(shù)是原有節(jié)點(diǎn)，也就是在誰(shuí)之前插入。
實(shí)例：創(chuàng)建并添加li元素，每個(gè)新創(chuàng)建的li元素都插入到之前插入的li元素之前
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>JavaScript實(shí)例</title> <script> window.onload=function (){ var oBtn=document.getElementById('btn'); var oUl=document.getElementById('u'); var oTxt=document.getElementById('txt'); oBtn.onclick=function (){ //創(chuàng)建li元素 var oLi=document.createElement('li'); //獲取所有l(wèi)i元素 var aLi=oUl.getElementsByTagName('li'); oLi.innerHTML=oTxt.value; //這里需要注意：頁(yè)面中本沒(méi)有l(wèi)i元素，li元素是通過(guò)JS創(chuàng)建的 //所以第一個(gè)li元素應(yīng)該添加到父級(jí)下最后一個(gè)子節(jié)點(diǎn) //然后基于這個(gè)節(jié)點(diǎn)，將之后再插入的子節(jié)點(diǎn)插入到上一個(gè)節(jié)點(diǎn)之前 //如果li元素本來(lái)不存在，則執(zhí)行else，在父級(jí)插入一個(gè)子節(jié)點(diǎn)。 //如果li元素的個(gè)數(shù)>，說(shuō)明已經(jīng)創(chuàng)建了，則插入到這個(gè)子節(jié)點(diǎn)之前。 if(aLi.length>){ oUl.insertBefore(oLi,aLi[]); } else{ oUl.appendChild(oLi); } }; }; </script> </head> <body> <input id="txt" type="text" value=""> <input id="btn" type="button" value="創(chuàng)建li"> <ul id="u"></ul> </body> </html>(4)、刪除節(jié)點(diǎn)
removeChild()方法用于刪除一個(gè)節(jié)點(diǎn)
語(yǔ)法：父級(jí).removeChild(node) 參數(shù)為要?jiǎng)h除的子節(jié)點(diǎn)。
實(shí)例：簡(jiǎn)單的表格添加和刪除
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>JavaScript實(shí)例</title> <script> window.onload=function (){ var oTab=document.getElementById('tab'); var oName=document.getElementById('user'); var oAge=document.getElementById('age'); var oBtn=document.getElementById('btn'); //設(shè)置添加的ID項(xiàng)的值 var id=oTab.tBodies[].rows.length+; oBtn.onclick=function (){ //創(chuàng)建一個(gè)tr var oTr=document.createElement('tr'); //創(chuàng)建第一個(gè)td（ID項(xiàng)） var oTd=document.createElement('td'); //獲取ID，已經(jīng)刪除的ID號(hào)，不能再重用。 oTd.innerHTML=id++; //將創(chuàng)建的td放入創(chuàng)建的tr中 oTr.appendChild(oTd); //創(chuàng)建第二個(gè)td（姓名項(xiàng)） var oTd = document.createElement('td'); oTd.innerHTML=oName.value; oTr.appendChild(oTd); //創(chuàng)建第三個(gè)td（年齡項(xiàng)） var oTd = document.createElement('td'); oTd.innerHTML=oAge.value; oTr.appendChild(oTd); //創(chuàng)建第四個(gè)td（操作項(xiàng)） var oTd = document.createElement('td'); oTd.innerHTML='<a href="javascript:;">刪除</a>'; oTr.appendChild(oTd); oTd.getElementsByTagName('a')[].onclick=function (){ //刪除整行 oTab.tBodies[].removeChild(this.parentNode.parentNode); }; //將創(chuàng)建好的tr放入tbody中 oTab.tBodies[].appendChild(oTr); }; }; </script> </head> <body> 姓名：<input id="user"type="text"> 年齡：<input id="age"type="text"> <input id="btn" type="button" value="添加"> <table id="tab" border="" width="px"> <caption>員工表</caption> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年齡</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td></td> <td>小白</td> <td></td> <td></td> </tr> <tr> <td></td> <td>小明</td> <td></td> <td></td> </tr> <tr> <td></td> <td>小紅</td> <td></td> <td></td> </tr> <tr> <td></td> <td>張三</td> <td></td> <td></td> </tr> <tr> <td></td> <td>李四</td> <td></td> <td></td> </tr> </tbody> </table> </body> </html>這個(gè)實(shí)例只能很簡(jiǎn)單的完成添加和刪除，并不對(duì)輸入進(jìn)行判斷，如果想要做的完美，還需要做很多工作，可以對(duì)表格進(jìn)行美化，設(shè)置背景色，鼠標(biāo)移入高亮顯示，鼠標(biāo)移出恢復(fù)背景色，最關(guān)鍵的就是要對(duì)表單輸入內(nèi)容進(jìn)行判斷，以確保每次提交的信息都是有效信息，如果表格信息量大，還可以添加支持模糊搜素，多關(guān)鍵字搜索，以提高用戶體驗(yàn)度，當(dāng)然在實(shí)際的項(xiàng)目中，這樣的情況幾乎不會(huì)出現(xiàn)，但可以作為自己的實(shí)踐，檢驗(yàn)學(xué)習(xí)成果。
(5)、替換節(jié)點(diǎn)和創(chuàng)建文本節(jié)點(diǎn)
replaceChild()方法可用于替換元素節(jié)點(diǎn)。
語(yǔ)法：node.replaceChild (new node, node) 第一個(gè)參數(shù)為用于替換的節(jié)點(diǎn)。第二個(gè)參數(shù)為原有節(jié)點(diǎn)。
createTextNode()方法可創(chuàng)建新的文本節(jié)點(diǎn)，返回新創(chuàng)建的Text節(jié)點(diǎn)。
語(yǔ)法：document.createTextNode(txt)
這兩種方法平時(shí)幾乎用不到，但還是需要了解。
實(shí)例：點(diǎn)擊按鈕將span標(biāo)簽替換為b標(biāo)簽。再創(chuàng)建一個(gè)文本節(jié)點(diǎn)插入到創(chuàng)建的p元素下，并設(shè)置className。
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>JavaScript實(shí)例</title> <style> .p{ width:px; height:px; background-color:#ccc; } </style> </head> <body> <p>創(chuàng)建一個(gè)P標(biāo)簽，設(shè)置<span id="s">className</span>屬性，創(chuàng)建文本節(jié)點(diǎn)。</p> <input type="button" value="點(diǎn)擊替換" onclick="change()"> <script> function change(){ //獲取span元素 var oS=document.getElementById('s'); //創(chuàng)建一個(gè)b元素 var newnode=document.createElement('b'); //要替換的文本節(jié)點(diǎn) var txt = document.createTextNode('className'); //將文本節(jié)點(diǎn)插入到創(chuàng)建的b元素下 newnode.appendChild(txt); //在span元素的父級(jí)下將span元素替換成新創(chuàng)建的b元素 oS.parentNode.replaceChild(newnode,oS); } //創(chuàng)建一個(gè)p元素 var oP=document.createElement('p'); //設(shè)置className oP.className='p'; //創(chuàng)建文本節(jié)點(diǎn) var txtNode=document.createTextNode('createTextNode用于創(chuàng)建文本節(jié)點(diǎn)!'); //將創(chuàng)建的文本節(jié)點(diǎn)插入到p元素下 oP.appendChild(txtNode); //再將p元素插入到父級(jí)body下 document.body.appendChild(oP); </script> </body> </html>以上所述是武林網(wǎng)小編給大家分享的關(guān)于JavaScript DOM 學(xué)習(xí)總結(jié)(五)的全部敘述，希望大家喜歡。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
