Js操作DOM元素及获取浏览器高宽
在JavaScript中，经常会来获取Document文档元素，是 HTML 文档对象模型的英文缩写，Document Object Model for HTML，是基于浏览器编程，HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。
通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。
childNodes 反回当前元素所有子元素的数组，firsChild返回当前元素的第一个下级子元素，lastChild反回当前元素的最后一个子元素,nextSibling 返回紧跟在当前元素后面的元素,nodeValue指定表元素，的读/写属性 parentNode指定表示元素的父节点 previousSibling返回紧邻当前元素之前的元素。
document.getElementById是获取有指定惟一ID属性值文档中的元素。document.getElementByTagName返回当前元素中有指定标记名的子元素的数组,hasChildNodes()返回一个布尔值,指示元素是否有子元素，document.getElementBycClassName是获取文档中的类名元素，document.getElementsByName(elementName) ：通过name获取节点，从名字可以看出，这个方法返回的不是一个节点元素，而是具有同样名称的节点数组。然后，我们可以通过要获取节点的某个属性来循环判断是否为需要的节点。
想获取浏览器的宽度如下:
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth
下面用一个电子商务的网页来具体讲一下:
<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元素及获取浏览器高宽的更多相关文章
- JS操作DOM元素属性和方法
Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访 ...
- js操作DOM元素
创建 document.createElement() 查找 document.getElementById() 返回对拥有指定 id 的第一个对象的引用. document.getElement ...
- 【面试必备】javascript操作DOM元素
前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...
- Js怎么获取DOM及获取浏览器的宽高？
在JavaScript中,经常会需要获取document文档元素,是HTML文档对象模型的缩写,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法. ...
- JS/JQuery操作DOM元素笔记
原因 自己目前在搭建一个.NET Core的框架,正在构建权限这块的东西,今天设置权限界面,需要使用JavaScript操作DOM元素,记录一下. 页面大概是酱紫的(我使用的AdminLTE和LayU ...
- JS操作DOM对象——JS基础知识（四）
一.JavaScript的三个重要组成部分 (1)ECMAScript(欧洲计算机制造商协会) 制定JS的规范 (2)DOM(文档对象模型)重点学习对象 处理网页内容的方法和接口 (3)BOM(浏览器 ...
- 原生js操作DOM基础-笔记
原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...
- 【JavaScript实用技巧（二）】Js操作DOM（由问题引发的文章改版，新人大佬都可）
[JavaScript实用技巧(二)]Js操作DOM(由问题引发的文章改版,新人大佬都可!) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人 ...
- 跨frame操作dom元素
今天,一群友问到跨frame操作dom元素的问题.于是写了个demo,在此发表在博客里面,供其他同道中人参考! 创建child.html内容如下: <!DOCTYPE HTML PUBLIC & ...
随机推荐
- composer全量镜像使用方法
原文网址:https://pkg.phpcomposer.com/ Packagist 镜像使用方法 还没安装 Composer 吗?请往下看如何安装 Composer . 镜像用法 有两种方式启用本 ...
- Windows下遍历所有GIT目录更新项目脚本
将下面代码保存为.bat文件 @echo off set cdir=%~dp0 for /f "delims=" %%i in ('dir /ad/b/s "%cdir% ...
- 思科S系列220系列交换机多个漏洞预警
补天漏洞响应平台近期监测思科官方发布了关于思科 S 系列 220 系列交换机的3个漏洞修复通告,其中包含2个高危漏洞,最高CVSS 3.0评分9.8. 更新时间 2019年 08月 09日 威胁目标 ...
- CF1190D Tokitsukaze and Strange Rectangle
思路: 线段树 + 扫描线. 实现: #include <bits/stdc++.h> using namespace std; typedef long long ll; ; int n ...
- 洛谷 题解 P3942 【将军令】
本题算法:贪心+排序+搜索+并查集+图论 输入中的t可以不用管,毕竟这只是特殊情况的标志 题目中虽然没有很明确地说明这是一棵树,但是题目中说有n个点,但是只有n-1条边,想用这n-1条边把整个图连通起 ...
- 记：linux服务器启动重启WEB项目启动成功，长时间卡住未响应
问题 云服务器部署web项目,每次正常启动项目后访问页面很久才能有响应,一直卡在INFO: Deploying web application directory ......长达几分钟以上,极度影响 ...
- Netty源码剖析-接受数据
参考文献:极客时间傅健老师的<Netty源码剖析与实战>Talk is cheap.show me the code! ----主线:worker thread ①多路复用器(Select ...
- PostgreSQL-存储过程
存储过程其实就是函数,由一组 sql 语句组成,实现比较复杂的数据库操作: 存储过程 是 存储在 数据库服务器 上的,用户可以像调用 sql 自带函数一样 调用存储过程 语法解析 CREATE [OR ...
- redis集群搭建及一些问题
redis 1.简化版redis (本套Redis集群为简化版安装部署,只需解压至普通用户家目录下或者任意目录,解压后修改脚本,执行脚本后即可使用.) 注意,此版本需要在redis配置文件中添加 pr ...
- 第九章 ZYNQ-MIZ701 片上ADC的使用
9.0难度系数★☆☆☆☆☆☆ 9.1实验概述 这次借助zynq的内嵌的XADC来采集zynq内部的一些参数: •VCCINT:内部PL核心电压 •VCCAUX:辅助PL电压 •VREFP:XADC ...