一. 整体介绍

　   这里介绍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. Node 连接池pool

    //1:加载相应的模块 http url fs mysqlconst http = require("http");const url = require("url&qu ...

  2. linux中tomcat修改错误日志路径

    涉及文件 log4j.properties   (一般开发将该文件放在项目的缺省目录即源包下,在文件系统里,就是在项目的/src/java目录下,缺省的文件名是log4j.properties,这样项 ...

  3. Java之List使用方法

    package basic; import java.util.ArrayList; import java.util.Arrays; import java.util.Iterator; impor ...

  4. BZOJ1916[USACO 2010 Open Gold 2.Water Slides]——DP+记忆化搜索

    题目描述 受到秘鲁的马丘比丘的新式水上乐园的启发,Farmer John决定也为奶牛们建 一个水上乐园.当然,它最大的亮点就是新奇巨大的水上冲浪.超级轨道包含 E (1 <= E <=15 ...

  5. 【Linux】Centos7 解压zip文件

    如果输入unzip无反应那么请安装相应软件包 yum install -y unzip 语法 unzip [参数] [文件] 参数 -c:将解压缩的结果显示到屏幕上,并对字符做适当的转换: -f:更新 ...

  6. Chinese Postman Problem Aizu - DPL_2_B（无向图中国邮路问题）

    题意: 带权无向图上的中国邮路问题:一名邮递员需要经过每条边至少一次,最后回到出发点,一条边多次经过权值要累加,问最小总权值是多少.(2 <= N <= 15, 1 <= M < ...

  7. P3312 [SDOI2014]数表

    啊啊啊我昨天怎么没写题解wwww 补昨日题解... 题目链接 : https://www.luogu.org/problemnew/show/P3312 也是莫反 我要把fft留到今天写 [和zyn小 ...

  8. centos Install Docker

    安装必备软件 $ yum -y install iptables iptables-services net-tools vim wget $ wget -P ~ https://github.com ...

  9. 【BZOJ1822】[JSOI2010]冷冻波（二分，网络流）

    [BZOJ1822][JSOI2010]冷冻波(二分,网络流) 题面 BZOJ 洛谷 题解 先预处理每个巫妖可以打到哪些小精灵,然后二分答案,网络流判定即可. #include<iostream ...

  10. emwin之GUIBuilder使用控件命名技巧

    @2018-07-30 使用emwin-GUIBuilder布局界面时,各控件命名技巧及规则如下图所示(遵循此规则在写代码时好处多多) > 如上图所示所使用的第一组控件分别为 Text.Edit ...