JavaScript DOM 學習總結(五)
1、DOM簡介。
當頁面加載時，瀏覽器會創(chuàng)建頁面的文檔對象模型（Document Object Model）。文檔對象模型定義訪問和處理HTML文檔的標準方法。DOM 將HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹結構，即節(jié)點樹。通過DOM，JS可創(chuàng)建動態(tài)的HTML，可以使網(wǎng)頁顯示動態(tài)效果并實現(xiàn)與用戶的交互功能。JS能夠改變頁面中所有的HTML元素、屬性和CSS樣式，并對頁面中所有事件做出響應。所以學習JS的起點就是處理網(wǎng)頁，處理網(wǎng)頁就需要使用DOM進行操作。
2、DOM獲取元素。
JS要想操作HTML元素，那么首先就必須先找到該元素。通常使用以下幾種方法完成：
通過元素設置的id找到HTML元素。
通過標簽名找到HTML元素。
通過元素設置的名稱(name)找到HTML元素。
所謂的DOM，實際上就是document，獲取元素就是操作document。
(1)、通過id找到元素
方法：document.getElementById('id');
網(wǎng)頁是由標簽將信息組合起來的，id屬性值是唯一的，就像身份證一樣，通過一個身份證可以找到相對應的人，所以通過該方法，可以獲取到與之相對應的標簽，而獲取的元素在JS中是一個對象，若想對元素進行操作，則需要通過他的屬性或方法。
(2)、通過標簽名找到元素
方法：document.getElementsByTagName('Tagname');
通過該方法，返回的是帶有指定標簽名的對象的集合，也就是以數(shù)組的形式返回，返回的順序是他們在文檔中的順序。
(3)、通過name找到元素
方法：document.getElementsByName('name');
該方法與getElementById()方法有點相似，都是通過設置的屬性值找到元素，只不過該方法是通過設置的name屬性值查找元素。name屬性在文檔中可能不唯一，所以該方法返回的也是元素的數(shù)組，而不是一個元素。
<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");
//獲取元素的個數(shù)
alert(oTxt.length); //返回：
//獲取第二個元素的值
alert(oTxt[].value); //返回：
</script>
</body>
既然可以通過id找到元素，那么也就可以通過class找到元素。className屬性用于設置或者返回元素的class類名。
語法：object.className = 'className'
該方法可以控制class類名，返回元素的class屬性，作用是可以為網(wǎng)頁中某個元素指定一個className來更改該元素的外觀。
實例：簡單的網(wǎng)頁換膚效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>網(wǎng)頁換膚</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">
點擊切換：<input type="button" value="灰色" onclick="gr()">
<input type="button" value="藍色" 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>
這只是一個簡單的切換背景色效果，如果想切換網(wǎng)頁的整體樣式，可以使用外部CSS文件，通過JS改變link標簽的href屬性來完成。
如果想設置多個class類名相同的元素的樣式，就需要借助數(shù)組的方法來完成，其實現(xiàn)原理也很簡單，首先通過id獲取其父元素，再獲取父元素下所有子元素的標簽名，獲取標簽名返回的是元素的數(shù)組，所以就可以和訪問數(shù)組一樣的方法來訪問元素的數(shù)組，那么先使用循環(huán)遍歷該元素數(shù)組，再做判斷，如果這個元素的className等于我們設置的class屬性值，就說明這是我們要找的元素。
實例：將有序列表中所有class屬性值為"col"的元素背景顏色設置為綠色。
<body>
<ol id="o">
<li>熱點</li>
<li class="col">美食</li>
<li>數(shù)碼</li>
<li class="col">科技</li>
<li>社會</li>
<li class="col">養(yǎng)生</li>
</ol>
<script>
//通過id獲取父元素
var aOl = document.getElementById('o');
//通過標簽名獲取父元素下所有子元素
var oLi = aOl.getElementsByTagName('li');
//循環(huán)遍歷返回的子元素數(shù)組
for(var i=;i<oLi.length;i++){
//如果當前子元素的className等于設置的class屬性值，則將其背景設置為綠色
if(oLi[i].className=='col') oLi[i].style.background='green';
}
</script>
</body>
下面是一個通過class屬性值獲取元素的封裝函數(shù)，方便以后使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>封裝getByClass函數(shù)</title>
<script>
//第一個參數(shù)為獲取的父元素，第二個參數(shù)為class屬性值。
function getByClass(oParent,aClass){
//空數(shù)組可以把找到的所有className都存放在里邊，最后返回。
var aResult=[];
//通過標簽名獲取父元素下所有子元素。標簽名不固定，所以設置為*，便于傳入。
var aEle=oParent.getElementsByTagName('*');
//循環(huán)遍歷返回的子元素數(shù)組
for(var i=;i<aEle.length;i++){
//如果當前子元素的className等于傳入的class屬性值，則將其添加到數(shù)值中。
if(aEle[i].className==aClass) aResult.push(aEle[i]);
}
//最后將這個數(shù)組返回
return aResult;
}
</script>
</head>
<body>
<ol id="o">
<li>熱點</li>
<li class="col">美食</li>
<li>數(shù)碼</li>
<li class="col">科技</li>
<li>社會</li>
<li class="col">養(yǎng)生</li>
</ol>
<script>
//封裝函數(shù)的使用：
//先通過id獲取父元素
var aOl=document.getElementById('o');
//再調用封裝好的函數(shù)傳入?yún)?shù)，獲取的父元素，子元素的class屬性值
var oCol=getByClass(aOl,'col');
//最后循環(huán)遍歷，設置樣式
for(var i=;i<oCol.length;i++){
oCol[i].style.background='green';
}
</script>
</body>
</html>
3、DOM操作。
獲取到HTML元素之后，就可以進行相應的操作。
(1)、改變HTML
修改HTML內容的最簡單的方法時使用 innerHTML 屬性。innerHTML顧名思義，inner就是內部的，既然是HTML，那么就可以給里邊放HTML。該屬性可用于獲取和替換HTML元素的內容。
語法：document.getElementById(id).innerHTML = new HTML
<body>
<h id="tit">原標題</h>
<script>
//改變原有標題
var aH=document.getElementById('tit');
aH.innerHTML='新標題';
</script>
<div id="div" style="width:px;height:px;border:px solid black;"></div>
<script>
//創(chuàng)建HTML內容
var oDiv=document.getElementById('div');
oDiv.innerHTML='<h>我是h標題</h><p>我是一個段落</p>';
</script>
</body>
(2)、操作元素屬性
修改元素屬性最簡單的方法就是直接修改，語法：document.getElementById(id).屬性名 = new value 比如修改圖片src屬性的指向路徑。
此外還可以通過DOM方法獲取、添加、刪除元素的屬性。
?、佟etAttribute()
getAttribute()方法通過元素節(jié)點的屬性名獲取屬性的值。
語法：elementNode.getAttribute(name) name是想要獲取的元素節(jié)點的屬性名
②、setAttribute()
setAttribute()方法添加一個新屬性并指定值，或者把一個現(xiàn)有的屬性設定為指定的值。
語法：elementNode.setAttribute(name,value) name是屬性名，value是屬性值。
③、removeAttribute()
removeAttribute()方法可刪除元素的屬性。
語法：elementNode.removeAttribute(name) name是屬性名。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>JavaScript實例</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='請輸入文字';
//第二種方法
//oTxt['value']='請輸入文字';
//第三種方法
//修改文本框value屬性的值
oTxt.setAttribute('value','請輸入文字');
//刪除按鈕type屬性
oBtn.removeAttribute('type');
//刪除后默認為文本框
};
</script>
</body>
</html>
(3)、改變CSS
改變HTML元素的CSS樣式可直接使用該語法：document.getElementById(id).style.樣式名 = new style
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>JavaScript實例</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)頁添加動態(tài)效果并實現(xiàn)與用戶交互的功能。</h>
<p>. JS能夠改變頁面中所有的 HTML 元素。</p>
<p>. JS能夠改變頁面中所有的 HTML 屬性。</p>
<p>. JS能夠改變頁面中所有的 HTML 元素的CSS樣式。</p>
</div>
<input type="button" value="改變顏色" onclick="color()">
<input type="button" value="改變寬高" onclick="hig()">
<input type="button" value="隱藏內容" onclick="none()">
<input type="button" value="顯示內容" onclick="block()">
<input type="button" value="取消設置" 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';
}
//取消設置
function cancel(){
var clean = confirm('確定取消所有設置？');
if(clean == true){
oDiv.removeAttribute('style');
}
}
</script>
</body>
</html>
上面的代碼，通過style設置的樣式，都是行間樣式，可以使用火狐的Firebug點擊相應的按鈕，就能看到所有設置的CSS樣式都出現(xiàn)在了行間。
可以直接通過style獲取和設置CSS樣式，那么有沒有更簡潔的方法呢？可以借助于函數(shù)使用JS的內置對象arguments完成，所謂arguments，就是可變參，不定參，參數(shù)的個數(shù)可變，是一個參數(shù)數(shù)組，無需指出參數(shù)名，就可訪問他們，但是為了增強可讀性，給參數(shù)取名，還是很有必要的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>JavaScript實例</title>
</head>
<body>
<div id="div" style="width:px;height:px;background:red"></div>
<script>
//獲取行間樣式
function css(){
//如果傳入?yún)?shù)的個數(shù)等于
if(arguments.length==){
//則返回第二個參數(shù)樣式名的值
return arguments[].style[arguments[]];
}
else{
//否則就是設置CSS樣式
//第二個參數(shù)樣式名的值就等于傳入的第三個參數(shù)
arguments[].style[arguments[]]=arguments[];
}
}
var oDiv=document.getElementById('div');
alert(css(oDiv,'width')); //獲取對象的寬 返回：px
css(oDiv,'background','green'); //將對象的背景顏色改為綠色
</script>
</body>
</html>
下面是一個獲取和設置行間樣式的封裝函數(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'); //設置div的背景顏色
</script>
</body>
</html>
我們都知道，在實際的WEB項目開發(fā)中，要遵循結果、表現(xiàn)、行為相分離的原則，以增強可讀性，優(yōu)化代碼，便于后期維護。所以通常我們設置元素的樣式，并非都是在行間設置。使用style方法獲取的只是DOM元素style屬性里的樣式規(guī)則，對于通過class屬性設置的外部樣式表，style就顯得力不從心了。那要如何獲取元素的非行間樣式呢？DOM標準中有個全局方法getComputedStyle，通過該方法可以獲取當前對象的樣式信息。比如：getComputedStyle(obj, false).paddingLeft，可以獲取到對象的左內邊距。這里需要注意：在獲取元素的復合樣式時，一定要使用精確的值，復合樣式比如background、border，如果要獲取元素的背景顏色，只使用background會出錯，一定要寫成backgroundColor。
JS只能修改元素的行間樣式，并不能修改獲取到的非行間樣式。那么很多人可能會產生疑問，既然可以獲取到又不能修改，那還獲取有什么用。其實獲取非行間樣式是非常有必要的，如果是外部樣式表，樣式都是密密麻麻一片英文的存在，不可能一個個去找，到底該元素設置的什么樣子，再回頭修改，那豈不是太浪費精力了，所以該方法就顯得尤為重要，而且返回的值都是精確值，通過獲取的非行間樣式信息，也有利于更精細的修改元素的當前樣式，這是多么美妙的一件事，直接使用style設置元素的行間樣式，因為行間樣式的優(yōu)先級最高，所以就覆蓋掉了非行間樣式，其實也就相當于跟修改了非行間樣式一樣，只是顯示在了行間，我們目的反著是已經(jīng)達到了。
<!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';
//注意這里修改復合樣式時，使用的background，可在FF下用Firebug查看具體的行間樣式。
alert(getComputedStyle(oDiv,false).backgroundColor);
oDiv.style.background='green';
};
</script>
</head>
<body>
<div id="div"></div>
</body>
</html>
(4)、對事件做出響應
實例：全選和反選，輸入對應的序號選中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>JavaScript實例</title>
</head>
<body>
<form id="list">
請選擇你的業(yè)余愛好:<br>
. 音樂<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>輸入-序號選擇，每次只可以選擇一項：</p>
<input id="txt" type="text">
<input id="btn" type="button" value="確定">
</form>
<script>
function optAll(){
//通過獲取標簽名設置全選
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(){
//通過獲取設置的name屬性值設置反選
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');
//給獲取的按鈕添加點擊事件
oBtn.onclick = function (){
//獲取文本框輸入的值
var oTxt = document.getElementById("txt").value;
//定義的復選框id值為like-。括號中進行的是字符串連接，id+輸入到文本框的值=該元素的id值
var oLike = document.getElementById('like' + oTxt);
oLike.checked = true;
}
</script>
</body>
</html>
3、DOM節(jié)點。
HTML文檔可以說是由節(jié)點構成的集合，常見的DOM節(jié)點有三種，即元素節(jié)點、屬性節(jié)點和文本節(jié)點。元素節(jié)點就是HTML標簽，標簽的屬性就是屬性節(jié)點，文本節(jié)點就是頁面可以瀏覽的內容。
在文檔對象模型中，每一個節(jié)點都是一個對象，DOM節(jié)點有三個重要的屬性：節(jié)點的名稱，節(jié)點的值和節(jié)點的類型。
(1)、nodeName：節(jié)點的名稱
nodeName屬性返回節(jié)點的名稱。元素節(jié)點的名稱與標簽名相同(大寫)，屬性節(jié)點的名稱是屬性的名稱，文本節(jié)點的名稱永遠都是#text，文檔節(jié)點的名稱永遠都是#document。
(2)、nodeValue：節(jié)點的值
nodeValue屬性返回節(jié)點的值。元素節(jié)點的值是undegined或null，屬性節(jié)點的值是屬性的值，文本節(jié)點的值是文本自身。
(3)、nodeType：節(jié)點的類型
nodeType屬性返回節(jié)點的類型。以下是常見的節(jié)點類型：
<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+)+'個節(jié)點的名稱是'+nodes[i].nodeName+'<br>');
document.write('第'+(i+)+'個節(jié)點的值是'+nodes[i].nodeValue+'<br>');
document.write('第'+(i+)+'個節(jié)點的類型是'+nodes[i].nodeType+'<br>');
document.write('<br>');
}
/*
返回：
第個節(jié)點的名稱是LI
第個節(jié)點的值是null
第個節(jié)點的類型是
第個節(jié)點的名稱是LI
第個節(jié)點的值是null
第個節(jié)點的類型是
*/
</script>
</body>
JS中函數(shù)可以嵌套使用，有父函數(shù)有子函數(shù)，HTML標簽也可以嵌套使用，那么就說明存在著各種不同的節(jié)點關系，比如父節(jié)點、子節(jié)點和兄弟節(jié)點。為了方便操作，DOM定義了一些節(jié)點的公共屬性。
(1)、子節(jié)點
childNodes屬性返回節(jié)點的子節(jié)點集合，可使用length屬性返回子節(jié)點的數(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>
通過上面的代碼，可以看到返回的是11。ul下明明只有5個li元素，怎么會返回11呢？其實是這么回事：
<ul id="u"> 第個節(jié)點（文本節(jié)點） <li>第個節(jié)點（元素節(jié)點）</li> 第個節(jié)點（文本節(jié)點） <li>第個節(jié)點（元素節(jié)點）</li> 第個節(jié)點（文本節(jié)點） <li>第個節(jié)點（元素節(jié)點）</li> 第個節(jié)點（文本節(jié)點） <li>第個節(jié)點（元素節(jié)點）</li> 第個節(jié)點（文本節(jié)點） <li>第個節(jié)點（元素節(jié)點）</li> 第個節(jié)點（文本節(jié)點） </ul>
因為通過childNodes屬性返回的子節(jié)點集合，不僅包括元素節(jié)點，而且還包括文本節(jié)點，瀏覽會將標簽之間的空白默認為文本節(jié)點，在空白處輸入文字，會在瀏覽器顯示。所以建議使用children屬性，該屬性只返回元素節(jié)點，不包括文本節(jié)點，并且不包括注釋節(jié)點。
<body>
<ul id="u">
<li>
我是個文本節(jié)點
<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個li元素，返回子節(jié)點個數(shù)為5。children屬性要比childNodes屬性好用太多了，只返回元素的子節(jié)點，還不包括孫子輩節(jié)點。
(2)、首尾子節(jié)點
firstElementChild屬性返回children數(shù)組的第一個節(jié)點。
語法：node.firstElementChild 該方法相當于：element.children[0]
lastElementChild屬性返回children數(shù)組的最后一個節(jié)點。
語法：node.lastElementChild 該方法相對于：element.children[element.children.length-1]
<body>
<div style="border:px solid green" id="div">
空白節(jié)點
<p>JS</p>
<div>DOM</div>
<h>jQuery</h>
</div>
<script>
var x=document.getElementById('div');
document.write('第一個節(jié)點的名稱：'+x.firstElementChild.nodeName+'<br>');
//返回：第一個子節(jié)點的名稱：P
document.write('最后一個節(jié)點的名稱：'+x.lastElementChild.nodeName)
//返回：最后一個子節(jié)點的名稱：H
</script>
</body>
(3)、父節(jié)點
parentNode屬性用于獲取指定節(jié)點的父節(jié)點。注意：父節(jié)點只能有一個。通過使用兩個獲取父節(jié)點，可獲取祖節(jié)點。
實例：點擊子節(jié)點，隱藏父節(jié)點
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>JavaScript實例</title>
</head>
<body>
<ul id="u">
<li>aaa <a href="javascript:;">點擊隱藏</a></li>
<li>bbb <a href="javascript:;">點擊隱藏</a></li>
<li>ccc <a href="javascript:;">點擊隱藏</a></li>
<li>ddd <a href="javascript:;">點擊隱藏</a></li>
<li>eee <a href="javascript:;">點擊隱藏</a></li>
</ul>
<script>
var oUl=document.getElementById('u');
//查看ul元素的父節(jié)點
alert(oUl.parentNode); //返回：[object HTMLBodyElement]
//通過標簽名獲取所有的a元素
var aA=document.getElementsByTagName('a');
for(var i=;i<aA.length;i++){
aA[i].onclick=function (){
//設置當前節(jié)點的父節(jié)點為隱藏
this.parentNode.style.display='none';
};
}
</script>
</body>
</html>
offsetParent屬性可返回一個元素用于定位的父級。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>JavaScript實例</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的父級是div,如果取消div相對定位的注釋。則返回：[object HTMLDivElement]
</script>
</body>
</html>
(3)、兄弟節(jié)點
nextElementSibling屬性返回同一樹層級中某個節(jié)點之后緊跟的節(jié)點。
語法：element.nextElementSibling
previousElementSibling屬性返回同一樹層級中某個節(jié)點之前緊跟的節(jié)點。
語法：element.previousElementSibling
| 節(jié)點類型 | 說明 | 值 |
| 元素節(jié)點 | 每一個HTML標簽都是一個元素節(jié)點，如 <div> 、 <p>、<ul>等 | 1 |
| 屬性節(jié)點 | 元素節(jié)點（HTML標簽）的屬性，如 id 、class 、name 等。 | 2 |
| 文本節(jié)點 | 元素節(jié)點或屬性節(jié)點中的文本內容。 | 3 |
| 注釋節(jié)點 | 表示文檔注釋，形式為<!-- text content -->。 | 8 |
| 文檔節(jié)點 | 表示整個文檔（DOM 樹的根節(jié)點，即 document ）。 | 9 |
實例：獲取li元素節(jié)點的兄弟節(jié)點
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<script>
var aLi=document.getElementsByTagName('li');
//獲取第二個子節(jié)點之后緊跟的節(jié)點
var x=aLi[].nextElementSibling;
alert(x.innerHTML); //返回：JS
//獲取第二個子節(jié)點之前緊跟的節(jié)點
var x=aLi[].previousElementSibling;
alert(x.innerHTML); //返回：HTML
</script>
</body>
4、DOM應用。
DOM最實際的應用就是可以通過JS創(chuàng)建、插入和刪除節(jié)點。
(1)、創(chuàng)建節(jié)點
createElement()方法可創(chuàng)建元素節(jié)點。
語法：document.createElement(tagName)
appendChild()方法可在指定節(jié)點的末尾插入一個新的子節(jié)點，每次都向末尾添加。
語法：父級.appendChild(new node)
實例：創(chuàng)建并添加li元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>JavaScript實例</title>
<script>
window.onload=function (){
var oBtn=document.getElementById('btn');
var oUl=document.getElementById('u');
var oTxt=document.getElementById('txt');
//文本框輸入提示
oTxt.placeholder='請輸入文字創(chuàng)建li元素';
oBtn.onclick=function (){
//創(chuàng)建li元素
var oLi=document.createElement('li');
//創(chuàng)建的li元素的HTML=文本框輸入的值
oLi.innerHTML=oTxt.value;
//插入到oUl父級下，作為子節(jié)點，在每個創(chuàng)建的li末尾插入新創(chuàng)建的li元素
oUl.appendChild(oLi);
//父級.appendCild(子節(jié)點);
};
};
</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é)點
insertBefore()方法可在已有的子節(jié)點前插入一個新的子節(jié)點。
語法：父級.insertBefore(new node, node) 第一個參數(shù)為要插入的新子節(jié)點。第二個參數(shù)是原有節(jié)點，也就是在誰之前插入。
實例：創(chuàng)建并添加li元素，每個新創(chuàng)建的li元素都插入到之前插入的li元素之前
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>JavaScript實例</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;
//這里需要注意：頁面中本沒有l(wèi)i元素，li元素是通過JS創(chuàng)建的
//所以第一個li元素應該添加到父級下最后一個子節(jié)點
//然后基于這個節(jié)點，將之后再插入的子節(jié)點插入到上一個節(jié)點之前
//如果li元素本來不存在，則執(zhí)行else，在父級插入一個子節(jié)點。
//如果li元素的個數(shù)>，說明已經(jīng)創(chuàng)建了，則插入到這個子節(jié)點之前。
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é)點
removeChild()方法用于刪除一個節(jié)點
語法：父級.removeChild(node) 參數(shù)為要刪除的子節(jié)點。
實例：簡單的表格添加和刪除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>JavaScript實例</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');
//設置添加的ID項的值
var id=oTab.tBodies[].rows.length+;
oBtn.onclick=function (){
//創(chuàng)建一個tr
var oTr=document.createElement('tr');
//創(chuàng)建第一個td（ID項）
var oTd=document.createElement('td');
//獲取ID，已經(jīng)刪除的ID號，不能再重用。
oTd.innerHTML=id++;
//將創(chuàng)建的td放入創(chuàng)建的tr中
oTr.appendChild(oTd);
//創(chuàng)建第二個td（姓名項）
var oTd = document.createElement('td');
oTd.innerHTML=oName.value;
oTr.appendChild(oTd);
//創(chuàng)建第三個td（年齡項）
var oTd = document.createElement('td');
oTd.innerHTML=oAge.value;
oTr.appendChild(oTd);
//創(chuàng)建第四個td（操作項）
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>
這個實例只能很簡單的完成添加和刪除，并不對輸入進行判斷，如果想要做的完美，還需要做很多工作，可以對表格進行美化，設置背景色，鼠標移入高亮顯示，鼠標移出恢復背景色，最關鍵的就是要對表單輸入內容進行判斷，以確保每次提交的信息都是有效信息，如果表格信息量大，還可以添加支持模糊搜素，多關鍵字搜索，以提高用戶體驗度，當然在實際的項目中，這樣的情況幾乎不會出現(xiàn)，但可以作為自己的實踐，檢驗學習成果。
(5)、替換節(jié)點和創(chuàng)建文本節(jié)點
replaceChild()方法可用于替換元素節(jié)點。
語法：node.replaceChild (new node, node) 第一個參數(shù)為用于替換的節(jié)點。第二個參數(shù)為原有節(jié)點。
createTextNode()方法可創(chuàng)建新的文本節(jié)點，返回新創(chuàng)建的Text節(jié)點。
語法：document.createTextNode(txt)
這兩種方法平時幾乎用不到，但還是需要了解。
實例：點擊按鈕將span標簽替換為b標簽。再創(chuàng)建一個文本節(jié)點插入到創(chuàng)建的p元素下，并設置className。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>JavaScript實例</title>
<style>
.p{
width:px;
height:px;
background-color:#ccc;
}
</style>
</head>
<body>
<p>創(chuàng)建一個P標簽，設置<span id="s">className</span>屬性，創(chuàng)建文本節(jié)點。</p>
<input type="button" value="點擊替換" onclick="change()">
<script>
function change(){
//獲取span元素
var oS=document.getElementById('s');
//創(chuàng)建一個b元素
var newnode=document.createElement('b');
//要替換的文本節(jié)點
var txt = document.createTextNode('className');
//將文本節(jié)點插入到創(chuàng)建的b元素下
newnode.appendChild(txt);
//在span元素的父級下將span元素替換成新創(chuàng)建的b元素
oS.parentNode.replaceChild(newnode,oS);
}
//創(chuàng)建一個p元素
var oP=document.createElement('p');
//設置className
oP.className='p';
//創(chuàng)建文本節(jié)點
var txtNode=document.createTextNode('createTextNode用于創(chuàng)建文本節(jié)點!');
//將創(chuàng)建的文本節(jié)點插入到p元素下
oP.appendChild(txtNode);
//再將p元素插入到父級body下
document.body.appendChild(oP);
</script>
</body>
</html>
以上所述是腳本之家小編給大家分享的關于JavaScript DOM 學習總結(五)的全部敘述，希望大家喜歡。
相關文章
在JavaScript中處理CSV文件時,需要特別注意一些特殊字符,例如逗號、雙引號、換行符等,這些字符可能會影響CSV文件的解析,導致數(shù)據(jù)錯亂,所以本文給大家介紹了如何解決JavaScript導出CSV文件不完整的問題,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了JS獲得圖片alt信息的方法,涉及javascript獲取圖片元素及對應alt屬性的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
eslint+prettier統(tǒng)一代碼風格的實現(xiàn)方法
這篇文章主要介紹了eslint+prettier 統(tǒng)一代碼風格的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
JS基于開關思想實現(xiàn)的數(shù)組去重功能【案例】
這篇文章主要介紹了JS基于開關思想實現(xiàn)的數(shù)組去重功能,簡單分析了開關思想的原理,并結合具體實例形式分析了javascript基于開關思想實現(xiàn)數(shù)組去重相關操作技巧,需要的朋友可以參考下2019-02-02
利用H5api實現(xiàn)時鐘的繪制(javascript)
這篇文章主要為大家詳細介紹了利用H5api實現(xiàn)時鐘的繪制，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
JavaScript中使用Substring刪除字符串最后一個字符
刪除字符串最后一個字符的方法有很多，在本文將為大家介紹下js中的substring是如何做到的，需要的朋友可以參考下2013-11-11
本文為大家分享的是一款效果非?？岬奈募蟼鞅韱斡蛎阑匦?。有7種不同的美化文件上傳域的效果，很時尚，感興趣的小伙伴們可以參考一下2015-11-11
今天小編就為大家分享一篇layui固定下拉框的顯示條數(shù)(有滾動條)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細介紹了OpenLayer3自定義測量控件MeasureTool，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
JavaScript中使用webuploader實現(xiàn)上傳視頻功能(demo)
這篇文章主要介紹了webuploader實現(xiàn)上傳視頻功能,通過本文給大家介紹了上傳視頻和上傳圖片的區(qū)別講解，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-04-04