document对象

Document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在。

Document对象是window对象的一个成员属性，通过window.document来访问，当然也可以直接使用document。

document对象常用的函数和属性可参考http://www.w3school.com.cn/jsref/dom_obj_document.asp。

getElementById() 返回对拥有指定 ID 的第一个对象的引用。(如果有相同的id则只取第一个)
createElement() 创建一个指定标签名的元素(比如：动态创建超链接)

  getElementById()的使用

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>document示例</title>

    <script type="text/javascript">

        function test() {

            var myHref = document.getElementById("a1");//相同id标签只找第一个

            alert(myHref.innerText);

        }

    </script>

</head>

<body>

    <a id="a1" href="http://www.sohu.com">连接到搜狐</a><br/>

    <a id="a1" href="http://www.sina.com">连接到新浪</a><br/>

    <a id="a1" href="http://www.163.com">连接到163</a><br/>

    <input type="button" value="tesing" onclick="test()" />

</body>

</html>

通过元素名来获取集合getElementsByName()的使用

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>document示例</title>

    <script type="text/javascript">

        function test() {

            //id不能唯一，但是name可以重复

            var hobbies = document.getElementsByName("hobby");

            //window.alert(hobbies.length);

            for (var i = 0; i < hobbies.length; i++) {

                //如何判断是否选择

                if(hobbies[i].checked) {

                    window.alert("你的爱好是"+hobbies[i].value);

                }

            }

        }

    </script>

</head>

<body>

    请选择你的爱好

    <input type="checkbox" name="hobby" value="足球" />足球

    <input type="checkbox" name="hobby" value="旅游" />旅游

    <input type="checkbox" name="hobby" value="音乐" />音乐

    <input type="button" value="tesing" onclick="test()" />

</body>

</html>

通过标签名来获取对象(元素)getElementsByTagName()的使用

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>document示例</title>

    <script type="text/javascript">

        //通过标签名来获取对象(元素)

        function test2() {

            var myObjs = document.getElementsByTagName("input");

            for (var i = 0; i < myObjs.length; i++) {

                window.alert(myObjs[i].value);

            }

        }

    </script>

</head>

<body>

    请选择你的爱好

    <input type="checkbox" name="hobby" value="足球" />足球

    <input type="checkbox" name="hobby" value="旅游" />旅游

    <input type="checkbox" name="hobby" value="音乐" />音乐

    <input type="button" value="tesing" onclick="test()" />

    <input type="button" value="获取所有input" onclick="test2()" />

</body>

</html>

 dom对象详解--document对象

常用的dom的每个Node节点属性和方法(加强篇)

特别提示：html dom和xml dom都遵循相同dom规范的，所以他们有很多相同的方法和属性，因此我们也可以去查看xml dom的node节点提供的方法和属性。

属性名称 类型 说明
nodeName String 节点名称
nodeValue String 节点值
nodeType Number 节点类型
parentNode Node 父节点
firstChild Node 第一个子节点
lastChild Node 最后一个子节点
childNodes NodeList 所有子节点
previousSibling Node 前一个节点
nextSibling Node 后一个节点
ownerDocument Document 获得该节点所属的文档对象
attributes Map 代表一个节点的属性对象
方法名称 返回值 说明
hasChildNodes() Boolean 当前节点是否有子节点
appendChild(node) Node 往当前节点上添加子节点
removeChild(node) Node 删除子节点
replaceChild(oldNode, newNode) Node 替换子节点
insertBefore(newNode, refNode) Node 在指定节点的前面插入新节点

有如下html文档：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <input type="button" value="Node测试" onclick="test()" /><br>

    <table border="1px">

        <tr>

        <td></td>

        <td><input type="button" value="向上走" onclick="move(this)" /></td>

        <td></td>

        </tr>

        <tr>

        <td><input type="button" value="向左走" onclick="move(this)" /></td>

        <td></td>

        <td><input type="button" value="向右走" onclick="move(this)" /></td>

        </tr>

        <tr>

        <td></td>

        <td><input type="button" value="向下走" onclick="move(this)" /></td>

        <td></td>

        </tr>

    </table>

    <!--把乌龟放在div中-->

    <div id="wugui" style="position:absolute;left:100px;top:120px;">

        <img src="1.jpg" border="1px" alt="" />

    </div>

    <!--鸡放在div中-->

    <div id="cock" style="position:absolute;left:200px;top:200px;">

        <img src="2.jpg" border="1px" alt="" />

    </div>

</body>

</html>

dom 节点树：

动态的创建元素(节点)/添加元素(节点)/删除元素(节点)

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>document示例</title>

    <script type="text/javascript">

        function test1() {

            //创建元素

            var myElement = document.createElement("a"); //??写希望创建的html元素标签名

            //给新的元素添加新的必要的信息

            myElement.id = "id1";

            myElement.href = "http://www.sina.com.cn";

            myElement.innerText = "连接到sina";

            //定位

            myElement.style.left = "400px";

            myElement.style.top = "300px";

            myElement.style.position = "absolute";

            //添加到document.body

            document.body.appendChild(myElement);

        }

        function test2() {

            var myButton = document.createElement("input");

            myButton.type = "button";

            myButton.value = "这是动态建立的按钮";

            document.getElementById("div1").appendChild(myButton);

        }

        function test3() {

            var myElement = document.createElement("input");

            myElement.type = "text";

            myElement.value = "我是输入框";

            myElement.id = "text_id1";

            document.getElementById("div1").appendChild(myElement);

        }

        function test4() {

            //删除一个元素(删除一个元素前提：必需获得父元素)

            //这是第一种删除方法(不灵活)

            //document.getElementById("div1").removeChild(document.getElementById("text_id1"));

            //第二种方法(推荐此方法)

            document.getElementById("text_id1").parentNode.removeChild(document.getElementById("text_id1"));

        }

    </script>

</head>

<body>

    <input type="button" value="动态的创建一个超链接" onclick="test1()" />

    <input type="button" value="动态的创建一个按钮" onclick="test2()" />

    <input type="button" value="动态的创建一个输入框" onclick="test3()" />

    <input type="button" value="删除一个元素(id为text_id1)" onclick="test4()" />

    <div id="div1" style="width: 200px; height: 400px; border: 1px solid red;">div1</div>

</body>

</html>

node属性方法的使用[前、后节点功能在IE8以上浏览器未通过测试]

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        function test() {

            //获得div1(乌龟div)

            var wuguidiv = $("wugui");

            //window.alert(wuguidiv.nodeName+" "+wuguidiv.nodeType+" "+wuguidiv.nodeValue);// DIV 1 null

            window.alert(wuguidiv.childNodes.length+" "+wuguidiv.nextSibling.nodeValue);

            window.alert(wuguidiv.childNodes.length+" "+wuguidiv.previousSibling.nodeValue);

            window.alert("父亲："+wuguidiv.parentNode.parentNode);

        }

        function $(id) {

            return document.getElementById(id);

        }

    </script>

</head>

<body>

    <input type="button" value="Node测试" onclick="test()" /><br>

    <table border="1px">

        <tr>

        <td></td>

        <td><input type="button" value="向上走" onclick="move(this)" /></td>

        <td></td>

        </tr>

        <tr>

        <td><input type="button" value="向左走" onclick="move(this)" /></td>

        <td></td>

        <td><input type="button" value="向右走" onclick="move(this)" /></td>

        </tr>

        <tr>

        <td></td>

        <td><input type="button" value="向下走" onclick="move(this)" /></td>

        <td></td>

        </tr>

    </table>

    <!--把乌龟放在div中-->

    <div id="wugui" style="position:absolute;left:100px;top:120px;">

        <img src="1.jpg" border="1px" alt="" />

    </div>

    <!--鸡放在div中-->

    <div id="cock" style="position:absolute;left:200px;top:200px;">

        <img src="2.jpg" border="1px" alt="" />

    </div>

</body>

</html>

document属性的使用[IE9中测试通过]

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>document属性的使用</title>

    <script type="text/javascript">

        document.fgColor = "white";// 前景色

        document.bgColor = "black";// 背景色

        alert(document.title);//获得title信息

        alert(document.URL);//获得URL地址信息

    </script>

</head>

<body>

    hello,world

</body>

<script type="text/javascript">

    window.alert(document.body);

</script>

</html>

body对象

body对象代表文档的主体(HTML body)。

body对象是document对象的一个成员属性，通过document.body来访问。

使用body对象，要求文档的主体创建后才能使用，也就是说不能在文档的body体还没有创建就去访问body。

 innerText()与innerHTML()区别

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        function test() {

            //document.getElementById("myspan").innerText = "<a href='http://www.sohu.com'>连接到搜狐</a>";// innerText   浏览器作为文本解析

            document.getElementById("myspan").innerHTML = "<a href='http://www.sohu.com'>连接到搜狐</a>";//innerHTML   浏览器作为html解析

        }

    </script>

</head>

<body>

    <span id="myspan"></span>

    <input type="button" onclick="test()" value="测试" />

</body>

</html>

onscroll　　用户拉动滚动条时触发

特别说明：onscroll在使用时需要遵循html4.0的标准，否则不能执行，也可以使用window.onscroll=函数名来代替body对象的onscroll事件。

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>onscroll与onselectstart的使用示例</title>

    <script type="text/javascript">

        function window_onscroll() {

            myHref.style.top = document.body.scrollTop + 50;

            myHref.style.left = document.body.scrollLeft;

        }

        function document_onselectstart() {

            alert("版权所有，严禁拷贝");

            //返回false,可以禁止用户选网页中的文本；当用户选文本时会触发onselectstart事件，返回false就不会选中

            return false;//也可在body中加入onselectstart="return false"同样达到这个效果

        }

    </script>

    <!-- 还有这样一种写法哟 -->

    <script type="text/javascript" for="document" event="onselectstart">

        //这样等于在body上写入onselectstart="return false"

        return document_onselectstart();

    </script>

</head>

<body onscroll="window_onscroll()">

    <textarea id="textarea" name="textarea" rows="500" cols="500">这样等于与在body上写入onselectstart="return false"</textarea>

    <a href="http://www.sohu.com" id="myHref" style="left: 0px; top: 50px; position: absolute; word-break: keep-all;">

        <img src="sohu.jpg">

    </a>

</body>

</html>

一个小案例：一个小太阳，当它碰到边框后，就自动的转变方向，很多流氓网站就有这种广告。

知识点：

  1. document.body.clientWidth //获得客户端浏览器的宽度
  2. document.body.clientHeight //获得客户端浏览器的高度
  3. offsetWidth //获得当前对象的宽度
  4. offsetHeight //获得当前对象的高度

代码如下：

<!-- <!DOCTYPE html>特别注意：必须去掉才能显示正常 -->

<html>

<head>

    <meta charset="UTF-8">

    <title>小太阳</title>

    <script type="text/javascript">

        //定两个方向(全局变量)

        directX = 1;//x轴的方向

        directY = 1;//y轴的方向

        //小太阳的坐标

        sunX = 0;

        sunY = 0;

        speed = 2;

        function sunMove() {

            sunX += directX*speed;

            sunY += directY*speed;

            //修改div的left、top

            //var sun = document.getElementById("sun");

            sun.style.top = sunY+"px";

            sun.style.left = sunX+"px";

            //判断什么时候转变方向

            //x方向(offsetWidth可以返回当前对象的实际宽度)

            if(sunX+sun.offsetWidth >= document.body.clientWidth || sunX <= 0) {

                directX = -directX;

            }

            /*

            if(sun.style.left+sun.offsetWidth >= body.clientWidth) {

                directX = -1;

            } else if(sun.style.left <= 0) {

                directX = 1;

            }

            */

            //y方向

            if(sunY + sun.offsetHeight >= document.body.clientHeight || sunY <= 0){

                directY = -directY;

            }

        }

        setInterval("sunMove()", 10);

    </script>

</head>

<body style="background-image: url('ship.jpg');">

    <div id="sun" style="position: absolute;">

        <img src="sun.gif" />

    </div>

</body>

</html>

dom对象详解--document对象(一)的更多相关文章

  1. dom对象详解--document对象(二)

       dom对象详解--style对象 style对象 style对象和document对象下的集合对象styleSheets有关系,styleSheets是文档中所有style对象的集合,这里讲解的 ...

  2. dom对象详解--document对象(三)

     form对象 form对象代表一个HTML表单,在HTML文档中<form>每出现一次,form对象就会被创建.从dom对象层次图看,document.forms对象是当前文档所有for ...

  3. js对象详解(JavaScript对象深度剖析，深度理解js对象)

    js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...

  4. JS中的event 对象详解

    JS中的event 对象详解   JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...

  5. Window 对象详解 转自 http://blog.csdn.net/jcx5083761/article/details/41243697

    详解HTML中的window对象和document对象 标签: HTMLwindowdocument 2014-11-18 11:03 5884人阅读 评论(0) 收藏 举报 分类: HTML& ...

  6. Vuejs vm对象详解

    Vuejs vm对象详解 vue数据是怎么驱动视图的?一堆数据放在那里是不会有任何作用的,它必须通过我们的View Model(视图模型)才能操控视图. 图中的model其实就是数据,一般我们写成js ...

  7. Vue实例初始化的选项配置对象详解

    Vue实例初始化的选项配置对象详解 1. Vue实例的的data对象 介绍 Vue的实例的数据对象data 我们已经用了很多了,数据绑定离不开data里面的数据.也是Vue的核心属性. 它是Vue绑定 ...

  8. JavaScript进阶知识点——函数和对象详解

    JavaScript进阶知识点--函数和对象详解 我们在上期内容中学习了JavaScript的基本知识点,今天让我们更加深入地了解JavaScript JavaScript函数 JavaScript函 ...

  9. jQuery的deferred对象详解

    jQuery的deferred对象详解请猛击下面的链接 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_ ...

随机推荐

  1. Swift学习初步（一）

    前几天刚刚将有关oc的教程草草的看了一遍,发现oc其实也不像传说的那么难.今天又开始马不停蹄的学习Swift因为我很好奇,到底苹果出的而且想要代替oc的编程语言应该是个什么样子呢?看了网上的一些中文教 ...

  2. P1574: [Usaco2009 Jan]地震损坏Damage

    卧槽卧槽卧槽,这道水题竟然让我WA了两遍!!评测系统卡了然后手贱又提交了一次,然后就悲催了呜呜.. 把与不能回家但牛棚完好的牛相邻的牛棚赋值为不能走(false),可以证明,如果该牛回不了家,则周围一 ...

  3. Delphi 路径相关函数

    IncludeTrailingPathDelimiter(const S: string): string; 功能 返回包括最后路径分隔符 说明 最后一个字符是路径分隔符则不变;否则加上一个路径分隔符 ...

  4. Think in java备忘录

    1..new在内部类中的使用 .new可以用使用外部类对象创建一个内部类,对象 DotNew.java package com.gxf.innerclass; public class DotNew ...

  5. 【每日scrum】NO.7

    Yesterday:学习和设计路线的编程 Today:编写代码 Problem:.在设计查询参观路线的时候,整个逻辑特别的混乱,设想了各种树,图以及网的遍历问题,但经过多次与同学的交流以及网上的查询资 ...

  6. 一些 Shell 脚本（持续更新）

    1. 启动日志分析 启动日志格式如下: 开机时间:2015/05/13 周三 16:45:17.79 关机时间:2015/05/13 周三 18:46:03.91 开机时间:2015/05/14 周四 ...

  7. 【Roman To Integer】cpp

    题目: Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range from ...

  8. Google Guava学习笔记——基础工具类针对Object类的使用

    Guava 提供了一系列针对Object操作的方法. 1. toString方法 为了方便调试重写toString()方法是很有必要的,但写起来比较无聊,不管如何,Objects类提供了toStrin ...

  9. 【转】EXT VTYPE自定义举例

    原文地址:http://www.blogjava.net/xiaohuzi2008/archive/2012/12/08/392676.html 近日来对Ext特别感兴趣,也许是它那种OO的设计思想吸 ...

  10. eclipse中本地项目怎么和svn中的项目关联？

    网速不好,通过别的方式把项目下载到本地硬盘,然后导入eclipse,代码修改后怎么提交到svn呢? 这个纠结了好久的问题... 首先要确定eclipse中安装了svn插件. 然后在“svn资源库研究” ...