javascript
javascript DOM对象
文檔對象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標(biāo)準(zhǔn)方法。DOM 將HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹結(jié)構(gòu)（節(jié)點樹）。
先來看看下面代碼:
將HTML代碼分解為DOM節(jié)點層次圖:
HTML文檔可以說由節(jié)點構(gòu)成的集合，DOM節(jié)點有:
1. 元素節(jié)點：上圖中<html>、<body>、<p>等都是元素節(jié)點，即標(biāo)簽。
2. 文本節(jié)點:向用戶展示的內(nèi)容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 屬性節(jié)點:元素屬性，如<a>標(biāo)簽的鏈接屬性href="http://www.adminwang.com"。
節(jié)點屬性:
遍歷節(jié)點樹:
以上圖ul為例，它的父級節(jié)點body,它的子節(jié)點3個li,它的兄弟結(jié)點h2、P。
?
DOM操作:
注意:前兩個是document方法。
?
getElementsByName()方法
返回帶有指定名稱的節(jié)點對象的集合。
語法：
document.getElementsByName(name)
與getElementById() 方法不同的是，通過元素的 name 屬性查詢元素，而不是通過 id 屬性。
注意:
????1. 因為文檔中的 name 屬性可能不唯一，所有 getElementsByName() 方法返回的是元素的數(shù)組，而不是一個元素。
????2. 和數(shù)組類似也有l(wèi)ength屬性，可以和訪問數(shù)組一樣的方法來訪問，從0開始。
看看下面的代碼:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE?HTML> <html> <head> <script?type="text/javascript"> function?getnum(){ ??var?mynode=document.getElementsByName("myt")?;? ??alert(mynode.length); } </script> </head> <body> <a?name="myt"?href="#">我是連接一</a><br?/> <a?name="myt"?href="#">我是連接二</a><br?/> <a?name="myt"?href="#">我是連接三</a><br?/> <input?type="button"?onclick="getnum()"?value="看看有幾個鏈接？"?/> </body> </html> |
運(yùn)行結(jié)果：
getElementsByTagName()方法
返回帶有指定標(biāo)簽名的節(jié)點對象的集合。返回元素的順序是它們在文檔中的順序。
語法:
getElementsByTagName(Tagname)?
說明:
????1. Tagname是標(biāo)簽的名稱，如p、a、img等標(biāo)簽名。
????2. 和數(shù)組類似也有l(wèi)ength屬性，可以和訪問數(shù)組一樣的方法來訪問，所以從0開始。
看看下面代碼，通過getElementsByTagName()獲取節(jié)點。
getAttribute()方法
通過元素節(jié)點的屬性名稱獲取屬性的值。
語法：
elementNode.getAttribute(name)
說明:
1. elementNode：使用getElementById()、getElementsByTagName()等方法，獲取到的元素節(jié)點。
2. name：要想查詢的元素節(jié)點的屬性名字
看看下面的代碼，獲取P標(biāo)簽的屬性值：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE?HTML> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"> <title>getAttribute()</title> </head> <body>??? <p?id="info"?title="getAttribute()"?onclick="att()">點擊獲取標(biāo)簽屬性值</p>?? ???? <script?type="text/javascript"> function?att(){ var?con=document.getElementById("info"); var?a1=con.getAttribute("id"); var?a2=con.getAttribute("title"); document.write("P標(biāo)簽ID："+a1+"<br?/>"+"title為："+a2); } ?</script>? </body> </html> |
運(yùn)行結(jié)果：
setAttribute()方法
setAttribute() 方法增加一個指定名稱和值的新屬性，或者把一個現(xiàn)有的屬性設(shè)定為指定的值。
語法：
elementNode.setAttribute(name,value)
說明：
1.name: 要設(shè)置的屬性名。
2.value: 要設(shè)置的屬性值。
注意：
1.把指定的屬性設(shè)置為指定的值。如果不存在具有指定名稱的屬性，該方法將創(chuàng)建一個新屬性。
2.類似于getAttribute()方法，setAttribute()方法只能通過元素節(jié)點對象調(diào)用的函數(shù)。
節(jié)點屬性
在文檔對象模型 (DOM) 中，每個節(jié)點都是一個對象。DOM 節(jié)點有三個重要的屬性 ：
1. nodeName : 節(jié)點的名稱
2. nodeValue ：節(jié)點的值
3. nodeType ：節(jié)點的類型
一、nodeName 屬性: 節(jié)點的名稱，是只讀的。
1. 元素節(jié)點的 nodeName 與標(biāo)簽名相同
2. 屬性節(jié)點的 nodeName 是屬性的名稱
3. 文本節(jié)點的 nodeName 永遠(yuǎn)是 #text
4. 文檔節(jié)點的 nodeName 永遠(yuǎn)是 #document
?
二、nodeValue 屬性：節(jié)點的值
1. 元素節(jié)點的 nodeValue 是 undefined 或 null
2. 文本節(jié)點的 nodeValue 是文本自身
3. 屬性節(jié)點的 nodeValue 是屬性的值
?
三、nodeType 屬性: 節(jié)點的類型，是只讀的。以下常用的幾種結(jié)點類型:
元素類型??? 節(jié)點類型
?? 元素????????? 1
?? 屬性????????? 2
?? 文本????????? 3
?? 注釋????????? 8
?? 文檔????????? 9
實例代碼：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE?HTML> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"> <title>節(jié)點屬性</title> </head> <body> ??<ul> ?????<li>javascript</li> ?????<li>HTML/CSS</li> ?????<li>jQuery</li>???? ??</ul> ??<script?type="text/javascript"> ????var?a=document.getElementsByTagName("li"); ????for(var?i=0;i<a.length;i++){ ????????var?b=a[i].nodeName; ????????var?c=a[i].nodeValue; ????????var?d=a[i].nodeType; ????????document.write("名稱："+b+" "+"值："+c+" "+"類型："+d+"<br>"); ????} ??</script> </body> </html> |
運(yùn)行結(jié)果：
訪問子結(jié)點childNodes()
訪問選定元素節(jié)點下的所有子節(jié)點的列表，返回的值可以看作是一個數(shù)組，他具有l(wèi)ength屬性。
語法：
elementNode.childNodes
注意：
如果選定的節(jié)點沒有子節(jié)點，則該屬性返回不包含節(jié)點的 NodeList。
我們來看看下面的代碼:
?
運(yùn)行結(jié)果:
IE8及更早的版本:
? UL子節(jié)點個數(shù):3
? 節(jié)點類型:1
其它瀏覽器:
?? UL子節(jié)點個數(shù):7
?? 節(jié)點類型:3
注意:
1. IE全系列、firefox、chrome、opera、safari兼容問題
2. 節(jié)點之間的空白符，在firefox、chrome、opera、safari瀏覽器是文本節(jié)點，所以IE是3，其它瀏覽器是7，如下圖所示:
?
注意:
1. IE8及更早的版本、firefox、chrome、opera、safari存在兼容問題
2. 節(jié)點之間的空白符，在firefox、chrome、opera、safari瀏覽器是文本節(jié)點，所以IE8及更早的版本是3，其它瀏覽器是7，如下圖所示:
3.從IE9開始不存在這個問題。經(jīng)測試目前我們正在使用的主流瀏覽器基本不存在此類問題，讀者不必在這個問題上糾結(jié)。
?
如果把代碼改成這樣:
| 1 | <ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul> |
運(yùn)行結(jié)果:（IE和其它瀏覽器結(jié)果是一樣的）
? UL子節(jié)點個數(shù):3
? 節(jié)點類型:1
?
訪問子結(jié)點的第一和最后項
一、firstChild 屬性返回‘childNodes’數(shù)組的第一個子節(jié)點。如果選定的節(jié)點沒有子節(jié)點，則該屬性返回 NULL。
語法：
node.firstChild
說明：與elementNode.childNodes[0]是同樣的效果。
二、 lastChild 屬性返回‘childNodes’數(shù)組的最后一個子節(jié)點。如果選定的節(jié)點沒有子節(jié)點，則該屬性返回 NULL。
語法：
node.lastChild
說明：與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果。
注意: 上小節(jié)中，我們知道Internet Explorer 8及之前老版本會忽略節(jié)點之間生成的空白文本節(jié)點，而其它瀏覽器不會。我們可以通過檢測節(jié)點類型，過濾子節(jié)點。 (下面的內(nèi)容講解)
示例代碼：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE?HTML> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"> <title>無標(biāo)題文檔</title> </head> <body> <div?id="con"> ??<p>javascript</p> ??<div>jQuery</div> ??<h5>PHP</h5> </div> <script?type="text/javascript"> ?var?x=document.getElementById("con");?? ?document.write(x.firstChild.nodeName+"<br>");??????//輸出指定元素(div)的第一個子節(jié)點。 ?document.write(x.lastChild.nodeName+"<br>");???????//第16行輸出指定元素(div)的最后一個子節(jié)點。 </script> </body> </html> |
訪問父節(jié)點parentNode()
獲取指點節(jié)點的父節(jié)點
語法：
elementNode.parentNode
注意:父節(jié)點只能有一個。
看看下面的例子,獲取 P 節(jié)點的父節(jié)點，代碼如下:
| 1 2 3 4 5 6 7 | <div?id="text"> ??<p?id="con">?parentNode?獲取指點節(jié)點的父節(jié)點</p> </div> <script?type="text/javascript"> ??var?mynode=?document.getElementById("con"); ??document.write(mynode.parentNode.nodeName); </script> |
運(yùn)行結(jié)果:
parentNode 獲取指點節(jié)點的父節(jié)點
DIV
訪問祖節(jié)點:
elementNode.parentNode.parentNode
看看下面的代碼:
| 1 2 3 4 5 6 7 8 9 10 | <div?id="text">? ??<p> ????parentNode????? ????<div?id="con">?獲取指點節(jié)點的父節(jié)點</div> ??</p> </div> <script?type="text/javascript"> ??var?mynode=?document.getElementById("con"); ??document.write(mynode.parentNode.nodeName); </script> |
運(yùn)行結(jié)果:
parentNode
獲取指點節(jié)點的父節(jié)點
DIV
注意: 瀏覽器兼容問題，chrome、firefox等瀏覽器標(biāo)簽之間的空白也算是一個文本節(jié)點。
訪問兄弟節(jié)點
1. nextSibling 屬性可返回某個節(jié)點之后緊跟的節(jié)點（處于同一樹層級中）。
語法：
nodeObject.nextSibling
說明：如果無此節(jié)點，則該屬性返回 null。
2. previousSibling 屬性可返回某個節(jié)點之前緊跟的節(jié)點（處于同一樹層級中）。
語法：
nodeObject.previousSibling?
說明：如果無此節(jié)點，則該屬性返回 null。
注意: 兩個屬性獲取的是節(jié)點，而不是元素。Internet Explorer 會忽略節(jié)點間生成的空白文本節(jié)點（例如，換行符號），而其它瀏覽器不會忽略。
解決問題方法:
判斷節(jié)點nodeType是否為1, 如果是，為元素節(jié)點，不是跳過。
運(yùn)行結(jié)果:
LI = javascript
nextsibling: LI = jquery
創(chuàng)建元素節(jié)點createElement
createElement()方法可創(chuàng)建元素節(jié)點。此方法可返回一個 Element 對象。
語法：
document.createElement(tagName)
參數(shù):
tagName：字符串值，這個字符串用來指明創(chuàng)建元素的類型。
注意：要與appendChild() 或 insertBefore()方法聯(lián)合使用，將元素顯示在頁面中。
我們來創(chuàng)建一個按鈕，代碼如下：
| 1 2 3 4 5 6 7 | <script?type="text/javascript"> ???var?body?=?document.body; ???var?input?=?document.createElement("input");? ???input.type?=?"button";? ???input.value?=?"創(chuàng)建一個按鈕";? ???body.appendChild(input);? ?</script> |
效果：在HTML文檔中，創(chuàng)建一個按鈕。
我們也可以使用setAttribute來設(shè)置屬性，代碼如下：
| 1 2 3 4 5 6 7 8 9 | <script?type="text/javascript">? ???var?body=?document.body;???????????? ???var?btn?=?document.createElement("input");? ???btn.setAttribute("type",?"text");? ???btn.setAttribute("name",?"q");? ???btn.setAttribute("value",?"使用setAttribute");? ???btn.setAttribute("onclick",?"javascript:alert('This?is?a?text!');");?????? ???body.appendChild(btn);? </script> |
效果：在HTML文檔中，創(chuàng)建一個文本框，使用setAttribute設(shè)置屬性值。 當(dāng)點擊這個文本框時，會彈出對話框“This is a text!”。
創(chuàng)建文本節(jié)點createTextNode
createTextNode() 方法創(chuàng)建新的文本節(jié)點，返回新創(chuàng)建的 Text 節(jié)點。
語法：
document.createTextNode(data)
參數(shù)：
data : 字符串值，可規(guī)定此節(jié)點的文本。
我們來創(chuàng)建一個<div>元素并向其中添加一條消息，代碼如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE?HTML> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"> <title>無標(biāo)題文檔</title> <style?type="text/css"> .message{??? ???????width:200px; ???????height:100px; ???????background-color:#CCC;}???? </style> </head> <body> <script?type="text/javascript"> ???var?element?=?document.createElement("p"); ????element.className?=?"message"; ????var?textNode?=?document.createTextNode("I?love?JavaScript!"); ????element.appendChild(textNode); ????document.body.appendChild(element);????? ?</script> </body> </html> |
運(yùn)行結(jié)果：
插入節(jié)點appendChild()
在指定節(jié)點的最后一個子節(jié)點列表之后添加一個新的子節(jié)點。
語法:
appendChild(newnode)
參數(shù):
newnode：指定追加的節(jié)點。
我們來看看，div標(biāo)簽內(nèi)創(chuàng)建一個新的 P 標(biāo)簽，代碼如下:
運(yùn)行結(jié)果:
HTML
JavaScript
This is a new p
為ul添加一個li，示例代碼2
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE?HTML> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"> <title>插入節(jié)點</title> </head> <body> <ul?id="test"> ???<li>JavaScript</li> ???<li>HTML</li> ?</ul> ?<script?type="text/javascript"> ??var?otest?=?document.getElementById("test");? ???var?newnode?=?document.createElement("li"); ???var?newtext=?document.createTextNode("PHP"); ???newnode.appendChild(newtext); ???otest.appendChild(newnode);?????????? ?</script> </body> </html> |
插入節(jié)點insertBefore()
insertBefore() 方法可在已有的子節(jié)點前插入一個新的子節(jié)點。
語法:
insertBefore(newnode,node);
參數(shù):
newnode:要插入的新節(jié)點。
node:可選，指定此節(jié)點前插入節(jié)點。
我們來看看下面代碼，和 appendChild()效果一樣。
運(yùn)行結(jié)果:
JavaScript
HTML
This is a new p
我們在來看看下面代碼，在指定節(jié)點前插入節(jié)點。
運(yùn)行結(jié)果:
This is a new p
JavaScript
HTML
注意: otest.insertBefore(newnode,node); 也可以改為:? otest.insertBefore(newnode,otest.childNodes[0]);
刪除節(jié)點removeChild()
removeChild() 方法從子節(jié)點列表中刪除某個節(jié)點。如刪除成功，此方法可返回被刪除的節(jié)點，如失敗，則返回 NULL。
語法:
nodeObject.removeChild(node)
參數(shù):
node ：必需，指定需要刪除的節(jié)點。
我們來看看下面代碼，刪除子點。
運(yùn)行結(jié)果:
HTML
刪除節(jié)點的內(nèi)容: javascript
注意: 把刪除的子節(jié)點賦值給 x，這個子節(jié)點不在DOM樹中，但是還存在內(nèi)存中，可通過 x 操作。
如果要完全刪除對象，給 x 賦 null 值，代碼如下:
替換元素節(jié)點replaceChild()
replaceChild 實現(xiàn)子節(jié)點(對象)的替換。返回被替換對象的引用。
語法：
node.replaceChild (newnode,oldnew )
參數(shù)：
newnode : 必需，用于替換 oldnew 的對象。
oldnew : 必需，被 newnode 替換的對象。
我們來看看下面的代碼:
效果: 將文檔中的 Java 改為 JavaScript。
注意:
1. 當(dāng) oldnode 被替換時，所有與之相關(guān)的屬性內(nèi)容都將被移除。
2. newnode 必須先被建立。
瀏覽器窗口可視區(qū)域大小
獲得瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條）的方法:
一、對于IE9+、Chrome、Firefox、Opera 以及 Safari：
?? window.innerHeight - 瀏覽器窗口的內(nèi)部高度
?? window.innerWidth - 瀏覽器窗口的內(nèi)部寬度
二、對于 Internet Explorer 8、7、6、5：
?? document.documentElement.clientHeight表示HTML文檔所在窗口的當(dāng)前高度。
?? document.documentElement.clientWidth表示HTML文檔所在窗口的當(dāng)前寬度。
或者
Document對象的body屬性對應(yīng)HTML文檔的<body>標(biāo)簽
?? document.body.clientHeight
?? document.body.clientWidth
在不同瀏覽器都實用的 JavaScript 方案：
var w= document.documentElement.clientWidth
????? || document.body.clientWidth;
var h= document.documentElement.clientHeight
????? || document.body.clientHeight;
網(wǎng)頁尺寸scrollHeight
scrollHeight和scrollWidth，獲取網(wǎng)頁內(nèi)容高度和寬度(不包括滾動條)。
一、針對IE、Opera:
scrollHeight 是網(wǎng)頁內(nèi)容實際高度，可以小于 clientHeight。
二、針對NS、FF:
scrollHeight 是網(wǎng)頁內(nèi)容高度，不過最小值是 clientHeight。也就是說網(wǎng)頁內(nèi)容實際高度小于 clientHeight 時，scrollHeight 返回 clientHeight 。
三、瀏覽器兼容性
var w=document.documentElement.scrollWidth
?? || document.body.scrollWidth;
var h=document.documentElement.scrollHeight
?? || document.body.scrolltHeight;
注意:區(qū)分大小寫
scrollHeight和scrollWidth還可獲取Dom元素中內(nèi)容實際占用的高度和寬度。
網(wǎng)頁尺寸offsetHeight
offsetHeight和offsetWidth，獲取網(wǎng)頁內(nèi)容高度和寬度(包括滾動條等邊線，會隨窗口的顯示大小改變)。
一、值
offsetHeight = clientHeight + 滾動條 + 邊框。
二、瀏覽器兼容性
var w= document.documentElement.offsetWidth
??? || document.body.offsetWidth;
var h= document.documentElement.offsetHeight
??? || document.body.offsetHeight;
網(wǎng)頁卷去的距離
我們先來看看下面的圖：
scrollLeft:設(shè)置或獲取位于給定對象左邊界與窗口中目前可見內(nèi)容的最左端之間的距離 ，即左邊灰色的內(nèi)容。
scrollTop:設(shè)置或獲取位于對象最頂端與窗口中可見內(nèi)容的最頂端之間的距離 ，即上邊灰色的內(nèi)容。
offsetLeft:獲取指定對象相對于版面或由 offsetParent 屬性指定的父坐標(biāo)的計算左側(cè)位置 。
offsetTop:獲取指定對象相對于版面或由 offsetTop 屬性指定的父坐標(biāo)的計算頂端位置 。
注意:區(qū)分大小寫
綜合示例
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | <!DOCTYPE?html> <html> ?<head> ??<title>?new?document?</title>? ??<meta?http-equiv="Content-Type"?content="text/html;?charset=gbk"/>?? ??<script?type="text/javascript"> ????//?鼠標(biāo)移動改變背景,可以通過給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來改變所在行背景色。 ????function?over(x){ ?????????x.style.backgroundColor="#eee"; ????} ????function?out(x){ ????????x.style.backgroundColor="#fff"; ????}?? ???????//?編寫一個函數(shù)，供添加按鈕調(diào)用，動態(tài)在表格的最后一行添加子節(jié)點； ????function?add()?{ ?????????var?a?=?document.createElement("a"); ?????????var?td1?=?document.createElement("td"); ?????????var?td2?=?document.createElement("td"); ?????????var?td3?=?document.createElement("td"); ?????????var?tr?=?document.createElement("tr"); ?????????var?table?=?document.getElementById("table"); ???????? ?????????td3.appendChild(a); ?????????tr.appendChild(td1); ?????????tr.appendChild(td2); ?????????tr.appendChild(td3); ?????????table.appendChild(tr); ????????? ?????????a.href="javascript:;"; ?????????a.innerHTML="刪除"; ?????????a.setAttribute("onclick","del(this)"); ?????????tr.setAttribute("onmouseover","over(this)"); ?????????tr.setAttribute("onmouseout","out(this)"); ????} ????//?創(chuàng)建刪除函數(shù) ????function?del(x){ ??????????var?table=x.parentNode.parentNode.parentNode; ???????????????table.removeChild(x.parentNode.parentNode); ????} ??</script> ?</head> ?<body> ??????????<table?border="1"?width="50%"?id="table"> ??????????<tr?onmouseover="over(this)"?onmouseout="out(this)"> ??????????????<th>學(xué)號</th> ??????????????<th>姓名</th> ??????????????<th>操作</th> ??????????</tr>? ?? ??????????<tr?onmouseover="over(this)"?onmouseout="out(this)"> ??????????????<td>xh001</td> ??????????????<td>王小明</td> ??????????????<td><a?href="javascript:;"??onclick="del(this)">刪除</a></td>???<!--在刪除按鈕上添加點擊事件??--> ??????????</tr> ?? ??????????<tr?onmouseover="over(this)"?onmouseout="out(this)"> ??????????????<td>xh002</td> ??????????????<td>劉小芳</td> ??????????????<td><a?href="javascript:;"??onclick="del(this)">刪除</a></td>???<!--在刪除按鈕上添加點擊事件??--> ??????????</tr>? ?? ??????????</table> ??????????<input?type="button"?value="添加一行"?onclick="add()"?/>???<!--在添加按鈕上添加點擊事件??--> ?</body> </html> |
親自拷貝以上代碼到本地，測試下。
《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀
總結(jié)
以上是生活随笔為你收集整理的javascript DOM对象的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS 多类选择器
- 下一篇： javascript Windows对象