每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

属性

1  document.anchors  返回对文档中所有 Anchor 对象的引用。还有document.links/document.forms/document.images等

2  document.URL       返回当前文档的url

3  document.title       返回当前文档的标题

4  document.body    返回body元素节点

方法

1  document.close()     关闭用 document.open() 方法打开的输出流，并显示选定的数据。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script>
  5. function createDoc()
  6. {
  7. var w=window.open();
  8. w.document.open();
  9. w.document.write("<h1>Hello World!</h1>");
  10. w.document.close();
  11. }
  12. </script>
  13. </head>
  14.  
  15. <body>
  16. <input type="button" value="New document in a new window" onclick="createDoc()">
  17. </body>
  18. </html>

2  document.createElement()     创建元素节点。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <!DOCTYPE html>
  4. <head>
  5. </head>
  6. <body>
  7.     <p>hello world</p>
  8.  
  9. <script>
  10.     var a = document.createElement('hr');
  11.     document.body.appendChild(a)
  12.  
  13. </script>
  14. </body>
  15. </html>

3  document.createAttribute()   创建属性节点。

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4.  
  5. <p id="demo">Click the button to make a BUTTON element.</p>
  6.  
  7. <button onclick="myFunction()">Try it</button>
  8.  
  9. <script>
  10.  
  11. function myFunction()
  12. {
  13. var btn=document.createElement("BUTTON");
  14. document.body.appendChild(btn);
  15. };
  16.  
  17. </script>
  18.  
  19. </body>
  20. </html>

4  document.createTextNode()  创建文本节点。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <!DOCTYPE html>
  4. <head>
  5. </head>
  6. <body>
  7.     <p>hello world</p>
  8.  
  9. <script>
  10.     var a = document.createTextNode('hahahah');
  11.     document.body.appendChild(a)
  12.  
  13. </script>
  14. </body>
  15. </html>

5  document. getElementsByClassName()   返回文档中所有指定类名的元素集合，作为 NodeList 对象集合。所谓NodeList对象集合，是一个类似于数组的数据格式，仅仅提供了length属性，像数组中的push  pop方法等都未提供。

6  document.getElementById() 返回对拥有指定 id 的第一个对象的引用。

7  document.getElementsByName() 返回带有指定名称的对象集合。

8  document.getElementsByTagName() 返回带有指定标签名的对象集合。

9  document.write() 向文档写 HTML 表达式 或 JavaScript 代码。注意：当html文档加载完后再使用write方法，会导致write内容覆盖掉原本的html文档。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <!DOCTYPE html>
  4. <head>
  5. </head>
  6. <body>
  7.     <p>hello world</p>
  8.  
  9. <script>
  10.     document.write('hahahh')
  11.  
  12. </script>
  13. </body>
  14. </html>

DOM中document对象的常用属性方法的更多相关文章

  1. js基础之DOM中document对象的常用属性方法

    -----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.an ...

  2. JavaScript BOM-11-BOM的核心-window对象; window对象的控制,弹出窗口方法; 超时调用; 间歇调用; location对象常用属性; 位置操作--location.reaplace,location.reload(); BOM中的history对象; Screen对象及其常用属性; Navigator对象;

    JavaScript BOM 学习目标 1.掌握什么是BOM 2.掌握BOM的核心-window对象 3.掌握window对象的控制.弹出窗口方法 什么是bom BOM(browser object ...

  3. express模块中的req，res参数的常用属性方法

    express模块中的req,res参数的常用属性方法 const express = require('express'); const router = express.Router() rout ...

  4. Delphi中TStringList类常用属性方法详解

    TStrings是一个抽象类,在实际开发中,是除了基本类型外,应用得最多的. 常规的用法大家都知道,现在来讨论它的一些高级的用法. 先把要讨论的几个属性列出来: 1.CommaText 2.Delim ...

  5. WebBrowser常用属性方法介绍

    WebBrowser 常用属性方法 ■■方法 ==============================  ▲GoBack    相当于IE的"后退"按钮,使你在当前历史列表中后 ...

  6. DOM中Event 对象如何使用

    DOM中Event 对象如何使用 一.总结 一句话总结: 1.将event作为参数传递进来,然后就可以调用event对象的各种属性和方法了. <body onmousedown="wh ...

  7. javascript之DOM(二Document对象)

    javascript通过Document类型来表示文档.在浏览器中document是HTMLDocument对象(继承自Document)的一个实例,表示整个html页面.而且在浏览器中documen ...

  8. 【JavaScript】DOM之Document对象

    JS(JavaScript) 一.Document对象 1.Document对象是什么 Document对象 是DOM的基本规范也是重要的对象之一,以访问,更新页面内容的属性和方法通过conslie. ...

  9. jquery ajax中支持哪些返回类型以及js中判断一个类型常用的方法？

    1 jquery ajax中支持哪些返回类型在JQuery中,AJAX有三种实现方式:$.ajax() , $.post , $.get(). 预期服务器返回的数据类型.如果不指定,jQuery 将自 ...

随机推荐

  1. Java入门（3）—— 数组

    数组 概述:数组就是一个容器可以存放固定个数的单一数据类型 特点: 容器 长度是固定的 数组里面的元素的数据类型要一致 定义数组: 1.先声明,后初始化 声明: 数据类型[] 数组名; // 标识符命 ...

  2. Java-break，continue，return用法

    当年的我也算是基础小王子,但是长时间的不用导致我与他们越来越陌生了,所以我要把他们记在我的本本上. 首先我们要明白,java中到底有多少个循环关键字? 答:没错,就是3个,他们分别是:for(初始值: ...

  3. linux（十二）之用户管理

    前面学习了那么多关于linux的东西,相信大家都对linux应该 有一个大概的了解了.现在给大家分享的是linux中的用户管理,接下来让我们进入正题吧! 今天其实放松了一整天了,有点后悔自己没有把这些 ...

  4. 使用idea和studio进行调试的方法

    新入职一个公司,使用得IDE发生了一些变化 ,对于idea的使用,之前有提到过,今天主要的内容是使用idea和studio进行调试的快捷键. 虽然现在计算机开发的语言多种多样,但是使用C#写客户端,使 ...

  5. 在ubantu上安装hive

    上次我们在ubantu上安装了hadoop,那我们现在再进一步,开始我们的学习之旅--hive板块吧! 第一步:准备! 软件: I.一个搭建好的hadoop环境 II.hive的bin文件(前往apa ...

  6. 【JavaScript基础系列】决定你的人生能走多远的，是基础。

    前言 javaScript门槛非常低,一点语法,一个dom,一个bom就可以使用它开发大部分js应用,再加上现在层出不穷的框架极大的简化抽象了javaScript的使用方式,但是我们始终不能忘记的一点 ...

  7. (4)ES6解构赋值-字符串篇

    字符串的解构赋值 let [a,b,c,d,e] = 'Apple'; console.log(a); //A console.log(b); //p console.log(c); //p cons ...

  8. 个人作业3—个人总结（Alpha阶段)

    一.个人总结 在Alpha阶段,我们团队通过合作的方式,完成了之前觉得不大可能会完成的事(至少在我看来是这样的),大家其实之前的写代码能力都不太好,这期间大家都是边学边做,边做边学,最后跌跌撞撞的完成 ...

  9. Java201521123071《Java程序设计》第八周学习总结

    第八周-集合与泛型 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1. <T extends Comparable>表示T是绑定类型(Compa ...

  10. 201521123003《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 我们利用Sca ...