一. 整体介绍

　   这里介绍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. activiti 选人的实现

    activiti默认是不带有选人的功能的,它默认的是在调用complete 方法的时候自动根据下一个节点的 assignee属性或者candidate属性 设置下一节点的候选人或者 assginee. ...

  2. linux的LNMP架构介绍、MySQL安装、PHP安装

    LNMP架构介绍 和LAMP唯一不同的是,LNMP中的N指的是Nginx(类似于Apache的一种web服务软件).目前这种环境的应用也非常多.Nginx设计的初衷是提供一种快速.高效.多并发的Web ...

  3. 深入浅出——float

    FLOAT  参考张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]的CSS float浮动的深入研究.详解及拓展 1.FLOAT的特性 float属性的初衷只是为了实现文字 ...

  4. Check failed: status == CUBLAS_STATUS_SUCCESS (11 vs. 0) CUBLAS_STATUS_MAPPING_ERROR

    I0930 21:23:15.115576 30918 solver.cpp:281] Learning Rate Policy: multistepF0930 21:23:17.263314 310 ...

  5. python---集合及深浅copy

    一.集合 相信大家都在数学中接触过集合,在python中集合也是有这相同的性质,1.去重,集合会将内部元素自定去重 2.关系测试,类似数学中的交集并集子集一样 1.1如何创建集合 集合在python中 ...

  6. SQL将Null转化为0

    使用ifnull() ) ; 使用判断 public function getGold($table,$querry,$start,$end,$status,$field) { $gold = Db: ...

  7. EF 事务

    http://yanwushu.byethost7.com/?p=87 1. EF对事务进行了封装:context的saveChange()是有事务性的. 2. 依赖多个不同的Context的操作(即 ...

  8. Minimum Cost POJ - 2516 （模板题 spfa最小费用最大流）

    题意: 人回家,一步一块钱,有x个人,y个房子,求能回家的最大人数且使之费用最小 解析: 就是....套模板,,,, 建图(⊙﹏⊙)...要仔细观察呐 对于人拆不拆都可以  都能过,,,,这里贴上拆开 ...

  9. python构建bp神经网络_鸢尾花分类(一个隐藏层)__1.数据集

    IDE:jupyter 目前我知道的数据集来源有两个,一个是csv数据集文件另一个是从sklearn.datasets导入 1.1 csv格式的数据集(下载地址已上传到博客园----数据集.rar) ...

  10. 在 Linux 上安装配置 BitTorrent Sync [转]

    背景介绍:目前我们线上的前端服务器数量比较多,超过200多台,每次发布新应用的时候,都是将软件包放在一台专门的Push服务器上,再由所有的前端服务器通过rsync自动同步.但随着前端服务器的数量越来越 ...