在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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;全部商品分类</h3></a></div>
        <div id="main">
                <div id="left">
                    <ol style="margin-top:12px; margin-left:14px;">
                        <p><a href="#">Kindle电子阅读器&nbsp;&nbsp;&nbsp;></a></p>
                        <p><a href="#">Fire平板电脑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></a></p>
                        <p><a href="#">Kindle电子阅读器&nbsp;&nbsp;&nbsp;></a></li>
                        <p><a href="#">Fire平板电脑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></a></p>
                        <p><a href="#">Kindle电子阅读器&nbsp;&nbsp;&nbsp;></a></li>
                        <p><a href="#">Fire平板电脑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></a></p>
                        <p><a href="#">Kindle电子阅读器&nbsp;&nbsp;&nbsp;></a></li>
                        <p><a href="#">Fire平板电脑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></a></p>
                        <p><a href="#">Kindle电子阅读器&nbsp;&nbsp;&nbsp;></a></li>
                        <p><a href="#">Fire平板电脑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></a></p>
                        <p><a href="#">Kindle电子阅读器&nbsp;&nbsp;&nbsp;></a></li>
                        <p><a href="#">Fire平板电脑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></a></p>
                        <p><a href="#">Kindle电子阅读器&nbsp;&nbsp;&nbsp;></a></li>
                        <p><a href="#">Fire平板电脑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></a></p>
                        <p><a href="#">Kindle电子阅读器&nbsp;&nbsp;&nbsp;></a></li>
                        <p><a href="#">Fire平板电脑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></a></p>
                        <p><a href="#">Kindle电子阅读器&nbsp;&nbsp;&nbsp;></a></li>
                        <p><a href="#">Fire平板电脑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></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元素及获取浏览器高宽的更多相关文章

  1. JS操作DOM元素属性和方法

    Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访 ...

  2. js操作DOM元素

    创建 document.createElement() 查找 document.getElementById()   返回对拥有指定 id 的第一个对象的引用. document.getElement ...

  3. 【面试必备】javascript操作DOM元素

    前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...

  4. Js怎么获取DOM及获取浏览器的宽高？

    在JavaScript中,经常会需要获取document文档元素,是HTML文档对象模型的缩写,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法. ...

  5. JS/JQuery操作DOM元素笔记

    原因 自己目前在搭建一个.NET Core的框架,正在构建权限这块的东西,今天设置权限界面,需要使用JavaScript操作DOM元素,记录一下. 页面大概是酱紫的(我使用的AdminLTE和LayU ...

  6. JS操作DOM对象——JS基础知识（四）

    一.JavaScript的三个重要组成部分 (1)ECMAScript(欧洲计算机制造商协会) 制定JS的规范 (2)DOM(文档对象模型)重点学习对象 处理网页内容的方法和接口 (3)BOM(浏览器 ...

  7. 原生js操作DOM基础-笔记

    原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...

  8. 【JavaScript实用技巧（二）】Js操作DOM（由问题引发的文章改版，新人大佬都可）

    [JavaScript实用技巧(二)]Js操作DOM(由问题引发的文章改版,新人大佬都可!) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人 ...

  9. 跨frame操作dom元素

    今天,一群友问到跨frame操作dom元素的问题.于是写了个demo,在此发表在博客里面,供其他同道中人参考! 创建child.html内容如下: <!DOCTYPE HTML PUBLIC & ...

随机推荐

  1. 【ARM-Linux开发】"libxml/parser.h: 没有那个文件或目录"解决方案

    这是因为在ubuntu上没有安装libxml2-dev,这个包应该是开发用的,而已安装的libxml2应该只是像jre一样的部件. 解决方案:sudo apt-get install libxml2- ...

  2. TMS320C6455小介绍

    TMS320C6455是TI公司推出的的一款新型高性能单核定点DSP．它是TI公司基于第三代先进VeloviTI VLIW(超长指令字)结构开发出来的新产品,在通信,医疗图像,无线传输方面都可以大有作 ...

  3. spring使用FactoryBean给ioc容器加入组件

    FactoryBean是srping的一个接口,现在我们来创建一个类MyFactoryBean 来实现FactoryBean接口 package org.springframework.beans.f ...

  4. Gradle DSL Walle渠道包后安装启动APP

    DSL(Domain-Specific Language) Gradle 是一个编译打包工具,但实际上它也是一个编程框架. Task 是 Gradle 中的一种数据类型,它代表了一些要执行或者要干的工 ...

  5. PowerPoint储存此文件时发生错误 出现错误的问题解决方法

    ．单击“文件”,单击“选项”,然后单击“加载项”. . 在管理下拉框中选择“COM加载项”,单击“转到”按钮. . 检查是否存在有任何加载项,清除所有复选框来禁用它们. . 关闭PPT并重新启动,测试 ...

  6. 提示ORA-28000 the account is locked

    1.启动项目的时候提示ORA-28000 the account is locked. 2. 这是因为用户被锁定了. 查询FAILED_LOGIN_ATTEMPTS参数默认值,这个参数限制了从第一次登 ...

  7. 记2017年年底，几次Python后端面试

    1. 果壳 电话面试: 说一下TCP的三次握手,四次挥手,为什么会这样? http安全的性的了解,说一下对cookie和session的了解: 对mysql的了解,说一下你常用的数据类型,char和v ...

  8. Django-djangorestframework-请求模块-获取请求参数

    目录 请求模块 源码分析 正式使用 总结 请求模块 主要是分析 drf 二次封装后的 request 对象 以及怎么拿到请求传递过来的数据(url 拼接的数据,数据包传过来的数据) 源码分析 源码查看 ...

  9. linux内核exec过程

    简介 本文分析linux内核exec系统调用执行过程中可执行文件的加载过程和栈的设置,内核代码版本为2.6.32 分析 \arch\ia64\kernel\process.c中有sys_exec函数的 ...

  10. (转)查找算法：二叉排序树(BSTree)

    二叉排序树(Binary Sort Tree),又称为二叉查找树(Binary Search Tree) ,即BSTree. 构造一棵二叉排序树的目的,其实并不是为了排序,而是为了提高查找和插入删除的 ...