一. 整体介绍

　   这里介绍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. Qt__QMessageBox

    转自豆子空间 显示窗口 Qt提供了五个类似的接口,用于显示类似的窗口. QMessageBox::information(NULL, "Title", "Content& ...

  2. python下划线

    单下划线(_) 通常情况下,会在以下3种场景中使用: 1.在解释器中:在这种情况下,“_”代表交互式解释器会话中上一条执行的语句的结果.这种用法首先被标准CPython解释器采用,然后其他类型的解释器 ...

  3. 【 HDU - 4456 】Crowd (二维树状数组、cdq分治)

    BUPT2017 wintertraining(15) #5A HDU 4456 题意 给你一个n行n列的格子,一开始每个格子值都是0.有M个操作,p=1为第一种操作,给格子(x,y)增加z.p=2为 ...

  4. Spring Security和 JWT两大利器来打造一个简易的权限系统。

    写在前面 关于 Spring Security Web系统的认证和权限模块也算是一个系统的基础设施了,几乎任何的互联网服务都会涉及到这方面的要求.在Java EE领域,成熟的安全框架解决方案一般有 A ...

  5. Stack Overflow：研究发现访问PHP和 Android的流量更可能来自低收入国家

    Stack Overflow 的数据科学家  David Robinson 发现,软件行业的分工让不同发达地区的程序员依赖于不同的编程语言.软件已经是一个全球性的行业,也有高端低端之分,最高端的是数据 ...

  6. 自学Zabbix12.3 Zabbix命令-zabbix_agentd

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 自学Zabbix12.3 Zabbix命令-zabbix_agentd 1. zabbix_age ...

  7. [luogu3505][bzoj2088][POI2010]TEL-Teleportation【分层图】

    题目大意 给出了一个图,然后让你加最多的边,让点\(1\)到\(2\)之间至少要经过5条边 解法 比较清楚,我们可以将这个图看作一个分层图,点\(1\)为第一层,再将\(2\)作为第五层,这样第一层和 ...

  8. 洛谷 P1462 通往奥格瑞玛的道路 解题报告

    P1462 通往奥格瑞玛的道路 题目背景 在艾泽拉斯大陆上有一位名叫歪嘴哦的神奇术士,他是部落的中坚力量 有一天他醒来后发现自己居然到了联盟的主城暴风城 在被众多联盟的士兵攻击后,他决定逃回自己的家乡 ...

  9. poj1038 Bugs Integrated,Inc. (状压dp)

    题意:N*M的矩阵,矩阵中有一些坏格子,要在好格子里铺2*3或3*2的地砖,问最多能铺多少个. 我的方法好像和网上流传的方法不太一样...不管了.... 由数据范围很容易想到状压dp 我们设某个状态的 ...

  10. c++11 条件变量 生产者-消费者 并发线程

    http://baptiste-wicht.com/posts/2012/04/c11-concurrency-tutorial-advanced-locking-and-condition-vari ...