Js操作DOM元素及獲取瀏覽器高寬的簡單方法
在JavaScript中，經(jīng)常會來獲取Document文檔元素，是 HTML 文檔對象模型的英文縮寫，Document Object Model for HTML，是基于瀏覽器編程，HTML DOM 定義了用于 HTML 的一系列標準的對象，以及訪問和處理 HTML 文檔的標準方法。
通過 DOM，可以訪問所有的 HTML 元素，連同它們所包含的文本和屬性?？梢詫ζ渲械膬热葸M行修改和刪除，同時也可以創(chuàng)建新的元素。HTML DOM 獨立于平臺和編程語言。它可被任何編程語言諸如 Java、JavaScript 和 VBScript 使用。
childNodes 反回當前元素所有子元素的數(shù)組，firsChild返回當前元素的第一個下級子元素，lastChild反回當前元素的最后一個子元素,nextSibling 返回緊跟在當前元素后面的元素,nodeValue指定表元素，的讀/寫屬性 parentNode指定表示元素的父節(jié)點 previousSibling返回緊鄰當前元素之前的元素。
document.getElementById是獲取有指定惟一ID屬性值文檔中的元素。document.getElementByTagName返回當前元素中有指定標記名的子元素的數(shù)組,hasChildNodes()返回一個布爾值,指示元素是否有子元素，document.getElementBycClassName是獲取文檔中的類名元素，document.getElementsByName(elementName) ：通過name獲取節(jié)點，從名字可以看出，這個方法返回的不是一個節(jié)點元素，而是具有同樣名稱的節(jié)點數(shù)組。然后，我們可以通過要獲取節(jié)點的某個屬性來循環(huán)判斷是否為需要的節(jié)點。
想獲取瀏覽器的寬度如下：
網(wǎng)頁可見區(qū)域寬：document.body.clientWidth
網(wǎng)頁可見區(qū)域高：document.body.clientHeight
網(wǎng)頁可見區(qū)域寬：document.body.offsetWidth (包括邊線的寬)
網(wǎng)頁可見區(qū)域高：document.body.offsetHeight (包括邊線的寬)
網(wǎng)頁正文全文寬：document.body.scrollWidth
網(wǎng)頁正文全文高：document.body.scrollHeight
網(wǎng)頁被卷去的高：document.body.scrollTop
網(wǎng)頁被卷去的左：document.body.scrollLeft
網(wǎng)頁正文部分上：window.screenTop
網(wǎng)頁正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的寬：window.screen.width
屏幕可用工作區(qū)高度：window.screen.availHeight
屏幕可用工作區(qū)寬度：window.screen.availWidth
下面用一個電子商務的網(wǎng)頁來具體講一下：
<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元素及獲取瀏覽器高寬的簡單方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
DB.ASP 用Javascript寫ASP很靈活很好用很easy
DB.ASP 用Javascript寫ASP很靈活很好用很easy，喜歡用js寫asp的朋友可以參考下。2011-07-07
這篇文章主要介紹了Js中使用正則表達式驗證輸入是否有特殊字符的簡單代碼，并通過一小段代碼給大家介紹了js正則表達式驗證同一字符串不同,需要的朋友可以參考下2018-09-09
一些常用的JavaScript函數(shù)(json)附詳細說明
一些常用的JavaScript函數(shù)(json)附詳細說明,學習js的朋友可以參考下。2011-05-05
原生JS實現(xiàn)網(wǎng)頁手機音樂播放器 歌詞同步播放的示例
下面小編就為大家分享一篇原生JS實現(xiàn)網(wǎng)頁手機音樂播放器 歌詞同步播放的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
用javascript實現(xiàn)gb2312轉utf-8的腳本
用javascript實現(xiàn)gb2312轉utf-8的腳本...2007-05-05
這篇文章主要介紹了JS中的進制轉換以及作用的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
JavaScript監(jiān)聽和禁用瀏覽器回車事件實例
這篇文章主要介紹了JavaScript監(jiān)聽和禁用瀏覽器回車事件實例,本文直接給出示例代碼,需要的朋友可以參考下2015-01-01
使用ngrok+express解決本地環(huán)境中微信接口調試問題
這篇文章主要介紹了使用ngrok+express解決本地環(huán)境中微信接口調試問題,需要的朋友可以參考下2018-02-02
JavaScript實現(xiàn)圖片上傳并預覽并提交ajax
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)圖片上傳并預覽并提交ajax，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
在用AJAX的時候，經(jīng)常要用JS操作DOM，當涉及到數(shù)據(jù)列表的時候，那用表格比較多，這里寫了組函數(shù)集合，專門用來操作表格，當然，目前還有很多不足，但是對一些簡單操作還是很方便的。2009-05-05