一. 整体介绍

　   这里介绍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. Pyhton语句

    一.if条件语句 1.python 并不支持 switch 语句 num = 5 if num == 3: # 判断num的值 print 'boss' elif num == 2: print 'u ...

  2. LY tomcat 的闪退问题

    http://www.cnblogs.com/1693977889zz/archive/2018/04/06/8726920.html 在bin文件夹里打开此文件setclasspath.bat 举例 ...

  3. rem布局进阶

    <script>!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loa ...

  4. 归并排序详解(python实现)

    因为上个星期leetcode的一道题(Median of Two Sorted Arrays)所以想仔细了解一下归并排序的实现. 还是先阐述一下排序思路: 首先归并排序使用了二分法,归根到底的思想还是 ...

  5. python threading模块使用 以及python多线程操作的实践(使用Queue队列模块)

    今天花了近乎一天的时间研究python关于多线程的问题,查看了大量源码 自己也实践了一个生产消费者模型,所以把一天的收获总结一下. 由于GIL(Global Interpreter Lock)锁的关系 ...

  6. Java之修改文件内容：字符串逐行替换

    依赖包: <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</a ...

  7. Java之多线程（实现Runnable接口）

    package test_demo.ThreadsDemo; public class TestRunnable { public static void main(String[] args) { ...

  8. BZOJ3456 城市规划（多项式求逆）

    设f[i]为连通图的数量,g[i]为不连通图的数量,显然有f[i]=2i*(i-1)/2-g[i],g[i]通过枚举1所在连通块大小转移,有g[i]=Σf[j]*C(i-1,j-1)·2(i-j)*( ...

  9. Spring的编程式事务和声明式事务

    事务管理对于企业应用来说是至关重要的,当出现异常情况时,它也可以保证数据的一致性. Spring事务管理的两种方式 spring支持编程式事务管理和声明式事务管理两种方式. 编程式事务使用Transa ...

  10. P2577 [ZJOI2005]午餐

    题目描述 上午的训练结束了,THU ACM小组集体去吃午餐,他们一行N人来到了著名的十食堂.这里有两个打饭的窗口,每个窗口同一时刻只能给一个人打饭.由于每个人的口味(以及胃口)不同,所以他们要吃的菜各 ...