一. 整体介绍

　   这里介绍DOM对象中的Document对象。

　　何为Document对象？每个载入浏览器的HTML文档都会成为Document对象，Document对象可以帮助我们对所有的HTML文档进行访问。

　　任何一个对象都会有属性和方法，当然Document对象也不例外，Document对象有对象集合、对象属性、对象方法，但对象集和对象属性用的相对不是很多，这里不过多介绍（感兴趣的话可以查阅

W3C：http://www.w3school.com.cn/jsref/dom_obj_document.asp），主要介绍Document对象的方法。

二. 详细介绍

　 Document对象的方法包括：

　　　　最重要的三个查找方法：getElementById()、getElementsByClassName()、getElementsByTagName() ; 分别是根据id、类名、标签名来查找。

其他方法：open() 、close() 、write() 、writeIn() 。

　 1. getElementById()

　    根据元素的id来获取该元素对象，通过该方法获取的元素对象是唯一的，可以直接对其进行操作。

  2. getElementsByClassName()

　    根据元素的class类名来获取该元素对象，通过该方法获取的元素对象是一个伪数组，需要通过伪数组的方式对其进行访问。

3. getElementsByTagName()

　    根据元素的标签名来获取该元素对象，通过该方法获取的元素对象是一个伪数组，需要通过伪数组的方式对其进行访问。

补充：什么是伪数组？伪数组和数组有什么区别？

　　伪数组是只有数组的部分功能（下标的调用和length属性），但是却不能调用数组中的方法(eg: pop()、push()、unshift())。

       常见的伪数组有：A：arguments集合(后续介绍Function对象时介绍)

　　　　　　　　　　  B：DOM集合(getElementsByClassName和getElementsByTagName)

                                  C：JQuery框架本身就是一个伪数组

      下面通过代码来详细分析一下伪数组的用法，以及伪数组和真数组如何转换

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             div {

                 width: 50px;

                 height: 50px;

                 border: 1px solid black;

             }

         </style>

         <script type="text/javascript">

             window.onload = function() {

                 /* 伪数组：只有数组的部分功能(length和下标)，无法访问数组对象中的方法

                       常见的伪数组有：

                       1. arguments

                       2. Dom集合    : document.getElementsByClassName()

                                   document.getElementsByTagName()

                       3. JQuery框架本身就是一个伪数组

                  * */

                 //1. 运用

                 var divs = document.getElementsByTagName('div');

                 //下面这句话报错

                 //因为divs是一个伪数组，不能调用数组的pop方法

                 //divs.pop().style.backgroundColor = "yellow";

                 //核心知识点：将伪数组转换成真数组

                 //Array.prototype.slice.call("伪数组名");

                 var realdivs = Array.prototype.slice.call(divs);

                 realdivs.pop().style.backgroundColor = "pink";

                 //2. 自定义伪数组

                 var firstDivs = { 0: 'name', 1: 'maru' ,length:2};

                 console.log(firstDivs);

                 console.log(Array.prototype.slice.call(firstDivs));

             };

         </script>

     </head>

     <body>

         <div>1</div>

         <div>2</div>

         <div>3</div>

         <div>4</div>

     </body>

 </html>

　下面通过代码继续介绍以上三个方法的具体使用：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <script type="text/javascript">

             window.onload = function() {

                 //1.getElementById()

                 document.getElementById("btn1").onclick = function() {

                     var obj = document.getElementById("btn1");

                     console.log(obj);

                 };

                 //2.getElementsByClassName()

                 document.getElementById("btn2").onclick = function() {

                     var obj = document.getElementsByClassName("box1");

                     console.log(obj);

                     //调用伪数组

                     console.log('个数为:' + obj.length);

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

                         console.log('逐个输出:' + obj[i]);

                     }

                     //转换成真数组

                     console.log(Array.prototype.slice.call(obj));

                 };

                 //3.getElementsByTagName()

                 document.getElementById("btn3").onclick = function() {

                     var obj = document.getElementsByTagName("div");

                     console.log(obj);

                     //调用伪数组

                     console.log('个数为:' + obj.length);

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

                         console.log('逐个输出:' + obj[i]);

                     }

                     //转换成真数组

                     console.log(Array.prototype.slice.call(obj));

                 };

             };

         </script>

     </head>

     <body>

         <button id="btn1">getElementById</button>

         <button id="btn2">getElementsByClassName</button>

         <button id="btn3">getElementsByTagName</button>

         <div id="123">

         </div>

         <div id="div1">

             <div class="box1">

                 <div class="box1">

                 </div>

             </div>

         </div>

         <div class="box1">

         </div>

     </body>

 </html>

　 结论：

 　　4. open()-close()

　      打开一个新文档，并擦出当前文档的内容，新文档用 write() 方法或 writeln() 方法编写，但必须要用close()方法关闭该文档，迫使其内容显示出来。

　　　注意：一旦调用了 close()，就不应该再次调用 write()，因为这会隐式地调用 open() 来擦除当前文档并开始一个新的文档。

　　5. write()-writeIn()

　     向文档写 HTML 表达式 或 JavaScript 代码，但是write不换行，writeIn换行

 var newDoc = document.open("text/html", "replace");

                     var txt = "<html><body>Learning about the DOM is FUN!</body></html>";

                     newDoc.write(txt);

                     newDoc.write(txt);

                     //write不换行，writeIn换行

                     newDoc.writeln(txt);

                     newDoc.writeln(txt);

                     newDoc.close();

　

DOM-Document对象的更多相关文章

  1. HTML DOM Document 对象

    HTML DOM Document 对象 HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点: 文档是一个文档. 所有的HTML ...

  2. JavaScript -- 时光流逝（十一）：DOM -- Document 对象

    JavaScript -- 知识点回顾篇(十一):DOM -- Document 对象 (1) document.activeElement: 返回文档中当前获得焦点的元素. <!doctype ...

  3. 浏览器端-W3School-JavaScript-HTML DOM：HTML DOM Document 对象

    ylbtech-浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Document 对象 1.返回顶部 1. HTML DOM Document 对象 Docume ...

  4. HTML DOM Document对象 元素对象 属性对象 事件对象

    DOM Document对象 DOM 元素 对象 DOM 属性 对象 DOM 事件 菜鸟教程上 总结挺全的,就不多废话,链接点进去即可.. 后期对经常用到的会在此更新一些总结..... 开学了...自 ...

  5. javascript DOM document对象

    document对象代表整个html文档 用来访问页面所有元素最复杂的一个dom对象 也是window对象的一个子对象. 对于dom编程中,一个html就会当成一个dom树dom会把所有的html元素 ...

  6. JavaScript之HTML DOM Document 对象

    文档对象代表您的网页. 如果您希望访问 HTML 页面中的任何元素,那么您总是从访问 document 对象开始. 下面是一些如何使用 document 对象来访问和操作 HTML 的实例. 查找 H ...

  7. HTML DOM 知识点整理（一）—— Document对象

    一.DOM对象 DOM对象整体包括: HTML DOM Document对象 HTML DOM 元素对象 HTML DOM 属性对象 HTML DOM 事件对象 HTML DOM Console 对象 ...

  8. DOM Document

    1.DOM Document对象 定义:每个载入浏览器的 HTML 文档都会成为 Document 对象.Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. Docume ...

  9. org.w3c.dom document 和xml 字符串 互转

    转自:https://blog.csdn.net/wmyasw/article/details/8686420 package com.mymhotel.opera; import java.io.F ...

  10. 报表软件JS开发引用HTML DOM的location和document对象

    上一次提到,在报表软件FineReport的JavaScript开发中,可以访问并处理的HTML DOM对象有windows.location.document三种.这次就继续介绍后两种,locati ...

随机推荐

  1. phpstorm 注释模板

    /** * Created by ${PRODUCT_NAME}. * User: ${USER} * Date: ${DATE} * Time: ${TIME} */

  2. iphone 与 PC端电脑投屏设置

    1. iphone端安装: 屏幕投影助手 下载地址 https://itunes.apple.com/cn/app/ping-mu-tou-ying-zhu-shou/id1152332174?mt= ...

  3. QQ互联登录提示redirect uri is illegal(100010)完美解决方法

    大概2015年3月低,腾讯QQ互联开发平台调整了有关QQ登录应用回调地址填写规则,用来修复QQ登录过程因回调地址的漏洞可能导致存在的安全问题. 博主接触这块较多,但也是四月才了解此事,从4月起,所有新 ...

  4. flask+mako+peewee(下)(解决了Error 2006: MySQL server has gone away)

    这篇主要介绍在这次项目中使用的peewee 文档地址:http://peewee.readthedocs.org/en/latest/index.html 首先我们要初始化一个数据库连接对象.这里我使 ...

  5. Nginx ACCESS阶段 统一的用户权限验证系统

    L59 需要编译到Nginx --with-http_auth_request_module 功能介绍: 主要当收到用户请求的时候 通过反向代理方式生成子请求至上游服务器,如果上游服务器返回2xx 则 ...

  6. python 模块之-hashlib

    python 模块hashlib import hashlib m=hashlib.md5()         # 生成MD5加密对象 m.update('jiami-string'.encode(' ...

  7. C# 枚举值 （二） 多属性 操作

    很多时候,我们的枚举值可能需要中英文, 那么可以使用下面的方法: 下面这个类,包含2部分. 1 BaseDescriptionAttribute特性的重载 2 枚举的操作类 EnumOperate n ...

  8. postgresql c library use

    #include <stdio.h> #include <libpq-fe.h> int main() { int lib_ver = PQlibVersion(); prin ...

  9. Python3网络爬虫（3）：使用User Agent和代理IP隐藏身份

    Python版本: python3 IDE: pycharm2017.3.3 一.为何要设置User Agent 有一些网站不喜欢被爬虫访问,所以会检测对象,如果是爬虫程序,他就会不让你访问,通过设置 ...

  10. uoj【UNR #3】To Do Tree 【贪心】

    题目链接 uojUNR3B 题解 如果不输出方案,是有一个经典的三分做法的 但是要输出方案也是可以贪心的 设\(d[i]\)为\(i\)节点到最深的儿子的距离 贪心选择\(d[i]\)大的即可 #in ...