javascript
二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素
1、認(rèn)識DOM
文檔對象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標(biāo)準(zhǔn)方法。DOM?將HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹結(jié)構(gòu)（節(jié)點(diǎn)樹）。
先來看看下面代碼:
將HTML代碼分解為DOM節(jié)點(diǎn)層次圖:
HTML文檔可以說由節(jié)點(diǎn)構(gòu)成的集合，DOM節(jié)點(diǎn)有:
1. 元素節(jié)點(diǎn)：上圖中<html>、<body>、<p>等都是元素節(jié)點(diǎn)，即標(biāo)簽。
2. 文本節(jié)點(diǎn):向用戶展示的內(nèi)容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 屬性節(jié)點(diǎn):元素屬性，如<a>標(biāo)簽的鏈接屬性href="http://www.imooc.com"。
節(jié)點(diǎn)屬性:
遍歷節(jié)點(diǎn)樹:
以上圖ul為例，它的父級節(jié)點(diǎn)body,它的子節(jié)點(diǎn)3個(gè)li,它的兄弟結(jié)點(diǎn)h2、P。
DOM操作:
注意:前兩個(gè)是document方法。
?
(1)getElementsByName()方法
返回帶有指定名稱的節(jié)點(diǎn)對象的集合。
語法：
document.getElementsByName(name)與getElementById() 方法不同的是，通過元素的 name 屬性查詢元素，而不是通過?id 屬性。
注意:
1.?因?yàn)槲臋n中的 name 屬性可能不唯一，所有 getElementsByName() 方法返回的是元素的數(shù)組，而不是一個(gè)元素。
2.?和數(shù)組類似也有l(wèi)ength屬性，可以和訪問數(shù)組一樣的方法來訪問，從0開始。
看看下面的代碼:
運(yùn)行結(jié)果:
(2)getElementsByTagName()方法
返回帶有指定標(biāo)簽名的節(jié)點(diǎn)對象的集合。返回元素的順序是它們在文檔中的順序。
語法:
getElementsByTagName(Tagname)說明:
1. Tagname是標(biāo)簽的名稱，如p、a、img等標(biāo)簽名。
2. 和數(shù)組類似也有l(wèi)ength屬性，可以和訪問數(shù)組一樣的方法來訪問，所以從0開始。
看看下面代碼，通過getElementsByTagName()獲取節(jié)點(diǎn)。
(3)區(qū)別getElementByID,getElementsByName,getElementsByTagName
以人來舉例說明，人有能標(biāo)識身份的身份證，有姓名，有類別(大人、小孩、老人)等。
1. ID 是一個(gè)人的身份證號碼，是唯一的。所以通過getElementById獲取的是指定的一個(gè)人。
2. Name 是他的名字，可以重復(fù)。所以通過getElementsByName獲取名字相同的人集合。
3.?TagName可看似某類，getElementsByTagName獲取相同類的人集合。如獲取小孩這類人，getElementsByTagName("小孩")。
把上面的例子轉(zhuǎn)換到HTML中，如下:
<input type="checkbox" name="hobby" id="hobby1"> 音樂input標(biāo)簽就像人的類別。
name屬性就像人的姓名。
id屬性就像人的身份證。
方法總結(jié)如下:
注意：方法區(qū)分大小寫
通過下面的例子(6個(gè)name="hobby"的復(fù)選項(xiàng)，兩個(gè)按鈕)來區(qū)分三種方法的不同:
<input type="checkbox" name="hobby" id="hobby1"> 音樂<input type="checkbox" name="hobby" id="hobby2"> 登山<input type="checkbox" name="hobby" id="hobby3"> 游泳<input type="checkbox" name="hobby" id="hobby4"> 閱讀<input type="checkbox" name="hobby" id="hobby5"> 打球<input type="checkbox" name="hobby" id="hobby6"> 跑步 <input type="button" value = "全選" id="button1"><input type="button" value = "全不選" id="button1">1. document.getElementsByTagName("input")，結(jié)果為獲取所有標(biāo)簽為input的元素，共8個(gè)。
2.?document.getElementsByName("hobby")，結(jié)果為獲取屬性name="hobby"的元素，共6個(gè)。
3.?document.getElementById("hobby6")，結(jié)果為獲取屬性id="hobby6"的元素，只有一個(gè)，"跑步"這個(gè)復(fù)選項(xiàng)。
案例：全選/不全選
<!DOCTYPE HTML> <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>無標(biāo)題文檔</title> </head><body><form>請選擇你愛好:<br><input type="checkbox" name="hobby" id="hobby1"> 音樂<input type="checkbox" name="hobby" id="hobby2"> 登山<input type="checkbox" name="hobby" id="hobby3"> 游泳<input type="checkbox" name="hobby" id="hobby4"> 閱讀<input type="checkbox" name="hobby" id="hobby5"> 打球<input type="checkbox" name="hobby" id="hobby6"> 跑步<br><input type="button" value="全選" onclick="checkall();"><input type="button" value="全不選" onclick="clearall();"><p>請輸入您要選擇愛好的序號，序號為1-6:</p><input id="wb" name="wb" type="text"><input name="ok" type="button" value="確定" onclick="checkone();"></form><script type="text/javascript">function checkall() {var hobby = document.getElementsByTagName("input");for (var i = 0; i < hobby.length; i++) {if (hobby[i].type == "checkbox") {hobby[i].checked = true;}}}function clearall() {var hobby = document.getElementsByName("hobby");for (var i = 0; i < hobby.length; i++) {if (hobby[i].type == "checkbox") {hobby[i].checked = false;}}}function checkone() {var j = document.getElementById("wb").value;var hobby = document.getElementsByName("hobby")hobby[j-1].checked = true;}</script> </body></html>(4)getAttribute()方法
通過元素節(jié)點(diǎn)的屬性名稱獲取屬性的值。
語法：
elementNode.getAttribute(name)說明:
1. elementNode：使用getElementById()、getElementsByTagName()等方法，獲取到的元素節(jié)點(diǎn)。
2. name：要想查詢的元素節(jié)點(diǎn)的屬性名字
看看下面的代碼，獲取h1標(biāo)簽的屬性值：
運(yùn)行結(jié)果:
h1標(biāo)簽的ID ：alink
h1標(biāo)簽的title ：getAttribute()獲取標(biāo)簽的屬值
?(5)setAttribute()方法
setAttribute() 方法增加一個(gè)指定名稱和值的新屬性，或者把一個(gè)現(xiàn)有的屬性設(shè)定為指定的值。
語法：
elementNode.setAttribute(name,value)說明：
1.name:?要設(shè)置的屬性名。
2.value:?要設(shè)置的屬性值。
注意：
1.把指定的屬性設(shè)置為指定的值。如果不存在具有指定名稱的屬性，該方法將創(chuàng)建一個(gè)新屬性。
2.類似于getAttribute()方法，setAttribute()方法只能通過元素節(jié)點(diǎn)對象調(diào)用的函數(shù)。
(6)節(jié)點(diǎn)屬性
在文檔對象模型 (DOM) 中，每個(gè)節(jié)點(diǎn)都是一個(gè)對象。DOM 節(jié)點(diǎn)有三個(gè)重要的屬性 ：
1. nodeName : 節(jié)點(diǎn)的名稱
2. nodeValue ：節(jié)點(diǎn)的值
3. nodeType ：節(jié)點(diǎn)的類型
一、nodeName 屬性:?節(jié)點(diǎn)的名稱，是只讀的。
1.?元素節(jié)點(diǎn)的 nodeName 與標(biāo)簽名相同
2.?屬性節(jié)點(diǎn)的 nodeName 是屬性的名稱
3.?文本節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #text
4.?文檔節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #document
二、nodeValue 屬性：節(jié)點(diǎn)的值
1. 元素節(jié)點(diǎn)的 nodeValue 是?undefined 或 null
2. 文本節(jié)點(diǎn)的 nodeValue 是文本自身
3. 屬性節(jié)點(diǎn)的 nodeValue 是屬性的值
三、nodeType 屬性: 節(jié)點(diǎn)的類型，是只讀的。以下常用的幾種結(jié)點(diǎn)類型:
元素類型?? ?節(jié)點(diǎn)類型
? 元素 ? ? ? ? ?1
? 屬性 ? ? ? ? ?2
? 文本 ? ? ? ? ?3
? 注釋 ? ? ? ? ?8
? 文檔 ? ? ? ? ?9
案例：
在<script>的標(biāo)簽內(nèi)容，獲取所有LI標(biāo)簽，并輸出相應(yīng)節(jié)點(diǎn)的名稱、節(jié)點(diǎn)的值、節(jié)點(diǎn)的類型。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>節(jié)點(diǎn)屬性</title> </head> <body><ul><li>javascript</li><li>HTML/CSS</li><li>jQuery</li> </ul><script type="text/javascript">var getli=document.getElementsByTagName("li")for(var i=0;i<getli.length;i++){document.write("第"+(i+1)+"個(gè)節(jié)點(diǎn)的名稱"+getli[i].nodeName+","+"節(jié)點(diǎn)的屬性值"+getli[i].nodeValue+","+"節(jié)點(diǎn)的類型"+getli[i].nodeType+"<br/>");}</script> </body> </html>(7)訪問子結(jié)點(diǎn)childNodes
訪問選定元素節(jié)點(diǎn)下的所有子節(jié)點(diǎn)的列表，返回的值可以看作是一個(gè)數(shù)組，他具有l(wèi)ength屬性。
語法：
elementNode.childNodes注意：
如果選定的節(jié)點(diǎn)沒有子節(jié)點(diǎn)，則該屬性返回不包含節(jié)點(diǎn)的 NodeList。
我們來看看下面的代碼:
運(yùn)行結(jié)果:
IE:
UL子節(jié)點(diǎn)個(gè)數(shù):3節(jié)點(diǎn)類型:1其它瀏覽器:
UL子節(jié)點(diǎn)個(gè)數(shù):7節(jié)點(diǎn)類型:3注意:
1. IE全系列、firefox、chrome、opera、safari兼容問題
2.?節(jié)點(diǎn)之間的空白符，在firefox、chrome、opera、safari瀏覽器是文本節(jié)點(diǎn)，所以IE是3，其它瀏覽器是7，如下圖所示:
如果把代碼改成這樣:
<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>
運(yùn)行結(jié)果:（IE和其它瀏覽器結(jié)果是一樣的）
UL子節(jié)點(diǎn)個(gè)數(shù):3節(jié)點(diǎn)類型:1(8)訪問子結(jié)點(diǎn)的第一和最后項(xiàng)
一、firstChild 屬性返回‘childNodes’數(shù)組的第一個(gè)子節(jié)點(diǎn)。如果選定的節(jié)點(diǎn)沒有子節(jié)點(diǎn)，則該屬性返回 NULL。
語法：
node.firstChild說明：與elementNode.childNodes[0]是同樣的效果。?
二、 lastChild 屬性返回‘childNodes’數(shù)組的最后一個(gè)子節(jié)點(diǎn)。如果選定的節(jié)點(diǎn)沒有子節(jié)點(diǎn)，則該屬性返回 NULL。
語法：
node.lastChild說明：與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果。?
注意:?上一節(jié)中，我們知道Internet Explorer 會(huì)忽略節(jié)點(diǎn)之間生成的空白文本節(jié)點(diǎn)，而其它瀏覽器不會(huì)。我們可以通過檢測節(jié)點(diǎn)類型，過濾子節(jié)點(diǎn)。
(9)訪問父節(jié)點(diǎn)parentNode
獲取指定節(jié)點(diǎn)的父節(jié)點(diǎn)
語法：
elementNode.parentNode注意:父節(jié)點(diǎn)只能有一個(gè)。
看看下面的例子,獲取 P 節(jié)點(diǎn)的父節(jié)點(diǎn)，代碼如下:
<div id="text"><p id="con"> parentNode 獲取指點(diǎn)節(jié)點(diǎn)的父節(jié)點(diǎn)</p></div> <script type="text/javascript">var mynode= document.getElementById("con");document.write(mynode.parentNode.nodeName);</script>運(yùn)行結(jié)果:
parentNode 獲取指點(diǎn)節(jié)點(diǎn)的父節(jié)點(diǎn)DIV訪問祖節(jié)點(diǎn):
elementNode.parentNode.parentNode看看下面的代碼:
<div id="text"> ?<p>parentNode ? ? ?<span id="con"> 獲取指點(diǎn)節(jié)點(diǎn)的父節(jié)點(diǎn)</span></p></div>?<script type="text/javascript">var mynode= document.getElementById("con");document.write(mynode.parentNode.parentNode.nodeName);</script>運(yùn)行結(jié)果:
parentNode獲取指點(diǎn)節(jié)點(diǎn)的父節(jié)點(diǎn)DIV注意: 瀏覽器兼容問題，chrome、firefox等瀏覽器標(biāo)簽之間的空白也算是一個(gè)文本節(jié)點(diǎn)。
(10)訪問兄弟節(jié)點(diǎn)
1.?nextSibling 屬性可返回某個(gè)節(jié)點(diǎn)之后緊跟的節(jié)點(diǎn)（處于同一樹層級中）。
語法：
nodeObject.nextSibling說明：如果無此節(jié)點(diǎn)，則該屬性返回 null。
2. previousSibling 屬性可返回某個(gè)節(jié)點(diǎn)之前緊跟的節(jié)點(diǎn)（處于同一樹層級中）。
語法：
nodeObject.previousSibling說明：如果無此節(jié)點(diǎn)，則該屬性返回 null。
注意: 兩個(gè)屬性獲取的是節(jié)點(diǎn)。Internet Explorer 會(huì)忽略節(jié)點(diǎn)間生成的空白文本節(jié)點(diǎn)（例如，換行符號），而其它瀏覽器不會(huì)忽略。
解決問題方法:
判斷節(jié)點(diǎn)nodeType是否為1, 如是為元素節(jié)點(diǎn)，跳過。
運(yùn)行結(jié)果:
LI = javascriptnextsibling: LI = jquery案例一：使用：get_nextSibling()訪問后一個(gè)兄弟節(jié)點(diǎn)
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>nextSibling</title> </head> <body> <ul id="u1"> <li id="a">javascript</li> <li id="b">jquery</li> <li id="c">html</li> </ul> <ul id="u2"> <li id="d">css3</li> <li id="e">php</li> <li id="f">java</li> </ul> <script type="text/javascript">function get_nextSibling(n){var x=n.nextSibling;while (x && x.nodeType!=1){x=x.nextSibling;}return x;}var x=document.getElementsByTagName("li")[0];document.write(x.nodeName);document.write(" = ");document.write(x.innerHTML);var y=get_nextSibling(x);if(y!=null){document.write("<br />nextsibling: ");document.write(y.nodeName);document.write(" = ");document.write(y.innerHTML);}else{document.write("<br>已經(jīng)是最后一個(gè)節(jié)點(diǎn)"); }</script> </body> </html>案例二：使用：get_previousSibling()訪問前一個(gè)兄弟節(jié)點(diǎn)
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>nextSibling</title> </head> <body> <ul id="u1"> <li id="a">javascript</li> <li id="b">jquery</li> <li id="c">html</li> </ul> <ul id="u2"> <li id="d">css3</li> <li id="e">php</li> <li id="f">java</li> </ul> <script type="text/javascript">function get_previousSibling(n){var x=n.previousSibling;while (x && x.nodeType!=1){x=x.previousSibling;}return x;}var x=document.getElementsByTagName("li")[1];document.write(x.nodeName);document.write(" = ");document.write(x.innerHTML);var y=get_previousSibling(x);if(y!=null){document.write("<br />previoussibling: ");document.write(y.nodeName);document.write(" = ");document.write(y.innerHTML);}else{document.write("<br>已經(jīng)是第一個(gè)節(jié)點(diǎn)"); }</script> </body> </html>(11)插入節(jié)點(diǎn)appendChild()
在指定節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)列表之后添加一個(gè)新的子節(jié)點(diǎn)。
語法:
appendChild(newnode)參數(shù):
newnode：指定追加的節(jié)點(diǎn)。
我們來看看，div標(biāo)簽內(nèi)創(chuàng)建一個(gè)新的 P 標(biāo)簽，代碼如下:
運(yùn)行結(jié)果:
HTMLJavaScriptThis is a new p(12)插入節(jié)點(diǎn)insertBefore()
insertBefore() 方法可在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)。
語法:
insertBefore(newnode,node);
參數(shù):
newnode: 要插入的新節(jié)點(diǎn)。
node: 指定此節(jié)點(diǎn)前插入節(jié)點(diǎn)。
我們在來看看下面代碼，在指定節(jié)點(diǎn)前插入節(jié)點(diǎn)。
運(yùn)行結(jié)果:
This is a new pJavaScriptHTML注意:?otest.insertBefore(newnode,node); 也可以改為:??otest.insertBefore(newnode,otest.childNodes[0]);?
(13)刪除節(jié)點(diǎn)removeChild()
removeChild() 方法從子節(jié)點(diǎn)列表中刪除某個(gè)節(jié)點(diǎn)。如刪除成功，此方法可返回被刪除的節(jié)點(diǎn)，如失敗，則返回 NULL。
語法:
nodeObject.removeChild(node)參數(shù):
node ：必需，指定需要?jiǎng)h除的節(jié)點(diǎn)。
我們來看看下面代碼，刪除子點(diǎn)。
運(yùn)行結(jié)果:
HTML刪除節(jié)點(diǎn)的內(nèi)容: javascript注意:?把刪除的子節(jié)點(diǎn)賦值給 x，這個(gè)子節(jié)點(diǎn)不在DOM樹中，但是還存在內(nèi)存中，可通過 x 操作。
如果要完全刪除對象，給 x 賦 null?值，代碼如下:
案例：
定義clearText()函數(shù)，完成節(jié)點(diǎn)內(nèi)容的刪除。
1. 刪除該節(jié)點(diǎn)的內(nèi)容，先要獲取子節(jié)點(diǎn)。
2. 然后使用循環(huán)遍歷每個(gè)子節(jié)點(diǎn)。
3. 使用removeChild()刪除節(jié)點(diǎn)。
<!DOCTYPE HTML> <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>無標(biāo)題文檔</title> </head><body><div id="content"><h1>html</h1><h1>php</h1><h1>javascript</h1><h1>jquery</h1><h1>java</h1></div><script type="text/javascript">function clearText() {var content = document.getElementById("content");var contentChild = content.childNodes;for (var i = 0; i < contentChild.length; i++) {if (contentChild[i].nodeType == 1) {content.removeChild(content.childNodes[i]);}}}</script><button onclick="clearText()">清除節(jié)點(diǎn)內(nèi)容</button> </body></html>(14)替換元素節(jié)點(diǎn)replaceChild()
replaceChild 實(shí)現(xiàn)子節(jié)點(diǎn)(對象)的替換。返回被替換對象的引用。?
語法：
node.replaceChild (newnode,oldnew )參數(shù)：
newnode : 必需，用于替換 oldnew 的對象。?
oldnew : 必需，被 newnode 替換的對象。
我們來看看下面的代碼:
?
效果: 將文檔中的 Java 改為 JavaScript。
注意:?
1.?當(dāng) oldnode 被替換時(shí)，所有與之相關(guān)的屬性內(nèi)容都將被移除。?
2. newnode 必須先被建立。?
案例：實(shí)現(xiàn)將 b 標(biāo)簽替換成 i 標(biāo)簽。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標(biāo)題文檔</title> </head> <body><div><b id="oldnode">JavaScript</b>是一個(gè)很常用的技術(shù)，為網(wǎng)頁添加動(dòng)態(tài)效果。</div><a href="javascript:replaceMessage()"> 將加粗改為斜體</a><script type="text/javascript">function replaceMessage(){var oldnode = document.getElementById("oldnode"); var newNode = document.createElement("i"); var newnodetext = document.createTextNode(oldnode.innerHTML);newNode.appendChild(newnodetext);var oldNode = document.getElementById("oldnode");oldnode.parentNode.replaceChild(newNode,oldNode);} </script></body> </html>(15)創(chuàng)建元素節(jié)點(diǎn)createElement
createElement()方法可創(chuàng)建元素節(jié)點(diǎn)。此方法可返回一個(gè) Element 對象。
語法：
document.createElement(tagName)參數(shù):
tagName：字符串值，這個(gè)字符串用來指明創(chuàng)建元素的類型。
注意：要與appendChild() 或 insertBefore()方法聯(lián)合使用，將元素顯示在頁面中。
我們來創(chuàng)建一個(gè)按鈕，代碼如下：
<script type="text/javascript"> var body = document.body; var input = document.createElement("input"); input.type = "button"; input.value = "創(chuàng)建一個(gè)按鈕"; body.appendChild(input); </script>效果：在HTML文檔中，創(chuàng)建一個(gè)按鈕。
我們也可以使用setAttribute來設(shè)置屬性，代碼如下：
<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)建一個(gè)文本框，使用setAttribute設(shè)置屬性值。 當(dāng)點(diǎn)擊這個(gè)文本框時(shí)，會(huì)彈出對話框“This is a text!”。
案例：實(shí)現(xiàn)在HTML文檔中創(chuàng)建一個(gè)鏈接，并設(shè)置相應(yīng)屬性。
<!DOCTYPE HTML> <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>無標(biāo)題文檔</title> </head><body><script type="text/javascript">var main = document.body;// 創(chuàng)建鏈接function createa(url, text) {//寫法一 var alink = document.createElement("a");alink.setAttribute("href", url);alink.setAttribute("value", text);alink.innerHTML = text;alink.setAttribute("target", "_blank");main.appendChild(alink);//寫法二 // var input = document.createElement("a");// input.href = url;// input.value = text;// input.innerHTML=text;// input.target = "_blank";// main.appendChild(input); }// 調(diào)用函數(shù)創(chuàng)建鏈接 createa("http://www.imooc.com", "慕課網(wǎng)");</script> </body></html>(16)創(chuàng)建文本節(jié)點(diǎn)createTextNode
reateTextNode() 方法創(chuàng)建新的文本節(jié)點(diǎn)，返回新創(chuàng)建的 Text 節(jié)點(diǎn)。
語法：
document.createTextNode(data)參數(shù)：
data :?字符串值，可規(guī)定此節(jié)點(diǎn)的文本。
我們來創(chuàng)建一個(gè)<div>元素并向其中添加一條消息，代碼如下：
運(yùn)行結(jié)果:
(17)瀏覽器窗口可視區(qū)域大小
獲得瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動(dòng)條）的方法:
一、對于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
在不同瀏覽器都實(shí)用的 JavaScript 方案：
var w= document.documentElement.clientWidth|| document.body.clientWidth;var h= document.documentElement.clientHeight|| document.body.clientHeight;(18)網(wǎng)頁尺寸scrollHeight
scrollHeight和scrollWidth，獲取網(wǎng)頁內(nèi)容高度和寬度。
一、針對IE、Opera:
scrollHeight 是網(wǎng)頁內(nèi)容實(shí)際高度，可以小于 clientHeight。
二、針對NS、FF:
scrollHeight 是網(wǎng)頁內(nèi)容高度，不過最小值是 clientHeight。也就是說網(wǎng)頁內(nèi)容實(shí)際高度小于 clientHeight 時(shí)，scrollHeight 返回 clientHeight 。
三、瀏覽器兼容性
var w=document.documentElement.scrollWidth|| document.body.scrollWidth;var h=document.documentElement.scrollHeight|| document.body.scrollHeight;注意:區(qū)分大小寫
scrollHeight和scrollWidth還可獲取Dom元素中內(nèi)容實(shí)際占用的高度和寬度。
(19)網(wǎng)頁尺寸offsetHeight
offsetHeight和offsetWidth，獲取網(wǎng)頁內(nèi)容高度和寬度(包括滾動(dòng)條等邊線，會(huì)隨窗口的顯示大小改變)。
一、值
offsetHeight = clientHeight + 滾動(dòng)條 + 邊框。
二、瀏覽器兼容性
var w= document.documentElement.offsetWidth|| document.body.offsetWidth;var h= document.documentElement.offsetHeight|| document.body.offsetHeight;(20)網(wǎng)頁卷去的距離與偏移量
我們先來看看下面的圖：
scrollLeft:設(shè)置或獲取位于給定對象左邊界與窗口中目前可見內(nèi)容的最左端之間的距離?，即左邊灰色的內(nèi)容。
scrollTop:設(shè)置或獲取位于對象最頂端與窗口中可見內(nèi)容的最頂端之間的距離?，即上邊灰色的內(nèi)容。
offsetLeft:獲取指定對象相對于版面或由?offsetParent?屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置?。
offsetTop:獲取指定對象相對于版面或由?offsetParent?屬性指定的父坐標(biāo)的計(jì)算頂端位置 。
注意:
1. 區(qū)分大小寫
2.?offsetParent：布局中設(shè)置postion屬性(Relative、Absolute、fixed)的父容器，從最近的父節(jié)點(diǎn)開始，一層層向上找，直到HTML的body。
測試：
<!DOCTYPE HTML> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript">function req(){var div = document.getElementById("div1");document.getElementById("li1").innerHTML = (div.offsetTop)+"px";//div1距離屏幕頂部的距離 document.getElementById("li2").innerHTML = (div.offsetLeft)+"px";//div1距離屏幕左部的距離 document.getElementById("li3").innerHTML = (div.scrollTop)+"px";//div1縱向滾動(dòng)條滾動(dòng)的距離 document.getElementById("li4").innerHTML = (div.scrollLeft)+"px";//div1橫向滾動(dòng)條滾動(dòng)的距離 } </script> </head> <body style="border:10px solid #ccc;padding:0px 0px;margin:5px 10px"><div style="width:60%;border-right:1px dashed red;float:left;"><div style="float:left;"><div id="div1" style="border:5px red solid;height:300px;width:200px;overflow:auto"><div style="height:500px;width:400px">請調(diào)整橫豎滾動(dòng)條后，點(diǎn)擊按鈕后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。</div></div><input type="button" value="點(diǎn)擊我!" onclick="req()" style="border: 1px solid purple;height: 25px;"/></div></div><div style="width:30%;float:left;"><ul style="list-style-type: none; line-height:30px;">結(jié)果：<li>offsetTop : <span id="li1"></span></li><li>offsetLeft : <span id="li2"></span></li><li> scrollTop : <span id="li3"></span></li><li>scrollLeft : <span id="li4"></span></li></ul></div><div style="clear:both;"></div> </body> </html>?
章節(jié)練習(xí)：
制作一個(gè)表格，顯示班級的學(xué)生信息。
要求：
1. 鼠標(biāo)移到不同行上時(shí)背景色改為色值為 #f2f2f2，移開鼠標(biāo)時(shí)則恢復(fù)為原背景色 #fff
2. 點(diǎn)擊添加按鈕，能動(dòng)態(tài)在最后添加一行
3. 點(diǎn)擊刪除按鈕，則刪除當(dāng)前行
<!DOCTYPE html> <html><head><title> new document </title><meta charset="utf-8" /><script type="text/javascript">window.onload = function() {var gettr = document.getElementsByTagName("tr");for (var i = 0; i < gettr.length; i++) {bgchange(gettr[i]);}}// 鼠標(biāo)移動(dòng)改變背景,可以通過給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來改變所在行背景色。function bgchange(obj) {obj.onmouseover = function() {obj.style.backgroundColor = "#f2f2f2";}obj.onmouseout = function() {obj.style.backgroundColor = "#fff";}}// 編寫一個(gè)函數(shù)，供添加按鈕調(diào)用，動(dòng)態(tài)在表格的最后一行添加子節(jié)點(diǎn)；var num = 2;function addtr() {num++;var newtr = document.createElement("tr");var torder = document.createElement("td");var tname = document.createElement("td");torder.innerHTML = "xh00" + num;tname.innerHTML = "新同學(xué)" + num;var tdel = document.createElement("td");tdel.innerHTML = "<a href='javascript:;' οnclick='deltr(this)'>刪除</a>";var otable = document.getElementById("table");otable.appendChild(newtr);newtr.appendChild(torder);newtr.appendChild(tname);newtr.appendChild(tdel);var gettr = document.getElementsByTagName("tr");for (var i = 0; i < gettr.length; i++) {bgchange(gettr[i]);}}// 創(chuàng)建刪除函數(shù)function deltr(obj) {var dtr = obj.parentNode.parentNode;dtr.parentNode.removeChild(dtr);}</script> </head><body><table border="1" width="50%" id="table"><tr><th>學(xué)號</th><th>姓名</th><th>操作</th></tr><tr><td>xh001</td><td>王小明</td><td><a href="javascript:;" onclick="deltr(this)">刪除</a></td><!--在刪除按鈕上添加點(diǎn)擊事件 --></tr><tr><td>xh002</td><td>劉小芳</td><td><a href="javascript:;" onclick="deltr(this)">刪除</a></td><!--在刪除按鈕上添加點(diǎn)擊事件 --></tr></table><input type="button" value="添加一行" onclick="addtr()" /><!--在添加按鈕上添加點(diǎn)擊事件 --> </body></html>?
轉(zhuǎn)載于:https://www.cnblogs.com/jiangtengteng/p/5330690.html
總結(jié)
以上是生活随笔為你收集整理的二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 网页制作中绝对路径和相对路径的区别
- 下一篇： 若所有的参数皆需要类型转换——请为此采用