在JavaScript中，經(jīng)常會(huì)來(lái)獲取Document文檔元素，是 HTML 文檔對(duì)象模型的英文縮寫，Document Object Model for HTML，是基于瀏覽器編程，HTML DOM 定義了用于 HTML 的一系列標(biāo)準(zhǔn)的對(duì)象，以及訪問和處理 HTML 文檔的標(biāo)準(zhǔn)方法。
通過 DOM，可以訪問所有的 HTML 元素，連同它們所包含的文本和屬性。可以對(duì)其中的內(nèi)容進(jìn)行修改和刪除，同時(shí)也可以創(chuàng)建新的元素。HTML DOM 獨(dú)立于平臺(tái)和編程語(yǔ)言。它可被任何編程語(yǔ)言諸如 Java、JavaScript 和 VBScript 使用。
childNodes 反回當(dāng)前元素所有子元素的數(shù)組，firsChild返回當(dāng)前元素的第一個(gè)下級(jí)子元素，lastChild反回當(dāng)前元素的最后一個(gè)子元素,nextSibling 返回緊跟在當(dāng)前元素后面的元素,nodeValue指定表元素，的讀/寫屬性 parentNode指定表示元素的父節(jié)點(diǎn) previousSibling返回緊鄰當(dāng)前元素之前的元素。
document.getElementById是獲取有指定惟一ID屬性值文檔中的元素。document.getElementByTagName返回當(dāng)前元素中有指定標(biāo)記名的子元素的數(shù)組,hasChildNodes()返回一個(gè)布爾值,指示元素是否有子元素，document.getElementBycClassName是獲取文檔中的類名元素，document.getElementsByName(elementName) ：通過name獲取節(jié)點(diǎn)，從名字可以看出，這個(gè)方法返回的不是一個(gè)節(jié)點(diǎn)元素，而是具有同樣名稱的節(jié)點(diǎn)數(shù)組。然后，我們可以通過要獲取節(jié)點(diǎn)的某個(gè)屬性來(lái)循環(huán)判斷是否為需要的節(jié)點(diǎn)。
想獲取瀏覽器的寬度如下：
網(wǎng)頁(yè)可見區(qū)域?qū)挘篸ocument.body.clientWidth
網(wǎng)頁(yè)可見區(qū)域高：document.body.clientHeight
網(wǎng)頁(yè)可見區(qū)域?qū)挘篸ocument.body.offsetWidth (包括邊線的寬)
網(wǎng)頁(yè)可見區(qū)域高：document.body.offsetHeight (包括邊線的寬)
網(wǎng)頁(yè)正文全文寬：document.body.scrollWidth
網(wǎng)頁(yè)正文全文高：document.body.scrollHeight
網(wǎng)頁(yè)被卷去的高：document.body.scrollTop
網(wǎng)頁(yè)被卷去的左：document.body.scrollLeft
網(wǎng)頁(yè)正文部分上：window.screenTop
網(wǎng)頁(yè)正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的寬：window.screen.width
屏幕可用工作區(qū)高度：window.screen.availHeight
屏幕可用工作區(qū)寬度：window.screen.availWidth
下面用一個(gè)電子商務(wù)的網(wǎng)頁(yè)來(lái)具體講一下：
<html> <head> <title></title> <style> *{ margin:0; padding:0;} a{ text-decoration:none; color:white;} a:hover{color:red;} ul,li,ol{list-style:none; font-size:13px; color:#fff;line-height:27px;} img{border:none;} img,input,select,textarae{vertical-align: middle} body{ width:1350px; margin:0 auto; font-size:12px;} ol li a{color:#fff;} #header{width:1350px; height:37px; background:url(122.png) no-repeat; border-bottom:1px solid #c9c9c9; line-height:37px;} #main{width:1350px; height:504px; background:#f8f8f8;} #left{width:182px; height:500px; background:#3d4e64; border-radius:3px;float:left;} #lunbo{width:1160px; height:300px; background:#f8f8f8; border-bottom:2px solid #666666; float:right; margin:0 auto; margin-top:10px; position:relative;} #lunbo img{width:1160px; height:300px; display:none; position:absolute; z-index:5; } ul{margin-left:400px;} ul li{ list-style:none; border:1px solid #000; border-radius:50%; width:18px; height:18px; text-align:center; float:left; margin-top:300px; margin-left:10px; z-index:15; } </style> </head> <body> <div id="header"><a href="#"><h3> 全部商品分類</h3></a></div> <div id="main"> <div id="left"> <ol style="margin-top:12px; margin-left:14px;"> <p><a href="#">Kindle電子閱讀器 ></a></p> <p><a href="#">Fire平板電腦 ></a></p> <p><a href="#">Kindle電子閱讀器 ></a></li> <p><a href="#">Fire平板電腦 ></a></p> <p><a href="#">Kindle電子閱讀器 ></a></li> <p><a href="#">Fire平板電腦 ></a></p> <p><a href="#">Kindle電子閱讀器 ></a></li> <p><a href="#">Fire平板電腦 ></a></p> <p><a href="#">Kindle電子閱讀器 ></a></li> <p><a href="#">Fire平板電腦 ></a></p> <p><a href="#">Kindle電子閱讀器 ></a></li> <p><a href="#">Fire平板電腦 ></a></p> <p><a href="#">Kindle電子閱讀器 ></a></li> <p><a href="#">Fire平板電腦 ></a></p> <p><a href="#">Kindle電子閱讀器 ></a></li> <p><a href="#">Fire平板電腦 ></a></p> <p><a href="#">Kindle電子閱讀器 ></a></li> <p><a href="#">Fire平板電腦 ></a></p> </ol> </div> <div id="lunbo"> <img src="1.png"> <img src="2.png"> <img src="3.png"> <img src="4.png"> <img src="5.png"> <ul> <li style="background:red"onmouseover="jin(0)"onmouseout="chu(0)">1</li> <li onmouseover="jin(1)"onmouseout="chu(1)">2</li> <li onmouseover="jin(2)"onmouseout="chu(2)">3</li> <li onmouseover="jin(3)"onmouseout="chu(3)">4</li> <li onmouseover="jin(4)"onmouseout="chu(4)">5</li> </ul> </div> <div id="footer"><img src="121.gif"/></div> </div> </body> <script> p=document.getElementsByTagName("img"); l=document.getElementsByTagName("li"); m=0 onload=function(){ s=setInterval("kaishi()",850) } function kaishi(){ for(var i=0;i<5;i++){ p[i].style.display="none"; l[i].style.background="white" } m++; if(m>=5){m=0;} p[m].style.display="block"; l[m].style.background="red" } lunbo.onmouseover=function(){clearInterval(s);} lunbo.onmouseout=function(){s=setInterval("kaishi()",850);} function jin(hand){ for(var i=0;i<5;i++){ p[i].style.display="none"; l[i].style.background="white" } m++; if(m>=5){m=0;} p[hand].style.display="block"; l[hand].style.background="red" } function chu(hand){ m=hand; } </script></html>以上這篇Js操作DOM元素及獲取瀏覽器高寬的簡(jiǎn)單方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
