前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新!

  Document 类型表示文档,或文档的根节点,这个节点是隐藏的,没有具体的节点标签;而 html 是根标签;

  如果想得到 HTMLHtmlElement,不必使用 childNodes 这么麻烦,可以使用 documentElement 即可;

  有时候我们只是想得到 body 标签,还可以用 document.body 获取;

        <script type="text/javascript">
console.log(document.nodeType);//9
console.log(document.childNodes[0]);//<!DOCTYPE html>
console.log(document.childNodes[0].nodeType);//10 IE8及以下返回8 console.log(document.childNodes[1]);//<html>...</html>
console.log(document.childNodes[1].nodeType);//1
console.log(document.childNodes[1].nodeName);//HTML //如果想得到HTMLHtmlElement,不必使用 childNodes 这么麻烦,可以使用 documentElement 即可;
console.log(document.documentElement);//<html>...</html> //有时候我们只是想得到 body 标签
//我们之前用的 document.getElementsByTagName('body')[0]; 获得
//还可以用 document.body 获取
console.log(document.body === document.getElementsByTagName('body')[0]);
</script>

  下面是一些前端常用到的 document 属性:

   属性 说明
主要属性 document.title 设置文档标题等价于HTML的<title>标签
  document.bgColor 设置页面背景色
  document.fgColor 设置页面前景色(文本颜色)
  document.linkColor 未点击过的链接颜色
  document.alinkColor 激活链接(焦点在此链接上)的颜色
  document.vlinkColor 已点击过的链接颜色
  document.URL 设置URL属性从而在同一窗口打开另一网页
  document.fileCreatedDate 文件建立日期,只读属性
  document.fileModifiedDate 文件修改日期,只读属性
  document.fileSize 文件大小,只读属性
  document.cookie 设置和读出cookie
  document.charset 设置字符集 国际编码格式:utf-8
     
指向其他节点或对象的属性 document.doctype <!DOCTYPE html>
  document.documentElement <html>...</html>
  document.head <head>...</head>
  document.defaultView window
  document.activeElement 获得焦点的元素
     
指向特定元素集合的属性 document.all 文档中的所有元素,Firefox不支持此属性
  document.anchors 文档中所有的锚点,已废弃
  document.links 文档中所有的 a 超链接元素
  document.forms 文档中所有的 forms 元素
  document.images 文档中所有的 img 元素
  document.scripts 文档中所有的 script 元素
  document.styleSheets 文档中所有的 style 元素
     

jacascript document对象的更多相关文章

  1. 报表软件JS开发引用HTML DOM的location和document对象

    上一次提到,在报表软件FineReport的JavaScript开发中,可以访问并处理的HTML DOM对象有windows.location.document三种.这次就继续介绍后两种,locati ...

  2. Document对象和window对象

    window对象--- 代表浏览器中的一个打开的窗口或者框架,window对象会在<body>或者<frameset>每次出现时被自动创建,在客户端JavaScript中,Wi ...

  3. Window.document对象

    1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:     var a =docunme ...

  4. JavaScript的DOM操作。Window.document对象

    间隔执行一段代码:window.setlnteval("需要执行的代码",间隔毫秒数) 例 :      window.setlnteval("alert("你 ...

  5. HTML DOM Document 对象

    HTML DOM Document 对象 HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点: 文档是一个文档. 所有的HTML ...

  6. JS中document对象和window对象有什么区别

    简单来说,document是window的一个对象属性.Window 对象表示浏览器中打开的窗口.如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 windo ...

  7. 9.22 window对象、document对象

    一.window对象: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null,可以利用这个属性来关闭源窗口 dialogArgume ...

  8. Window.document对象 轮播练习

    Window.document对象 一.找到元素:     docunment.getElementById("id"):根据id找,最多找一个:     var a =docun ...

  9. javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,

    javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...

随机推荐

  1. Eclipse安卓开发环境搭建

    前提,Java SDK和Eclipse搭建完毕 下载android SDK并安装 (官网:http://sdk.android-studio.org/ ) 找到安装目录,运行“SDK Manager. ...

  2. Java 容器 接口

    Java 中容器框架的内容可以分为三层: 接口(模型), 模板和具体实现. 在开发中使用容器正常的流程是,首先根据需求确定使用何种容器模型,然后选择一个符合性能要求的容器实现类或者自己实现一个容器类. ...

  3. 数据系统的未来------《Designing Data-Intensive Applications》读书笔记17

    终于来到这本书最后的一章了<Designing Data-Intensive Applications>大部头,这本书应该是我近两年读过最棒的技术书籍.作者Martin Kleppmann ...

  4. [poj2752]Seek the Name, Seek the Fame_KMP

    Seek the Name, Seek the Fame poj-2752 题目大意:给出一个字符串p,求所有既是p的前缀又是p的后缀的所有字符串长度,由小到大输出. 注释:$1\le strlen( ...

  5. java并发包——阻塞队列BlockingQueue及源码分析

    一.摘要 BlockingQueue通常用于一个线程在生产对象,而另外一个线程在消费这些对象的场景,例如在线程池中,当运行的线程数目大于核心的线程数目时候,经常就会把新来的线程对象放到Blocking ...

  6. react的基本使用,及常用填坑

    import React, { Component } from 'react'; import PropTypes from 'prop-types'; import './First.css'; ...

  7. 乘法表(24.9.2017) (WARNING!!!!!!!!!!!)

    #include "stdio.h" main() { int i,j,result; printf("\n"); ;i<;i++) { ;j<;j ...

  8. PYTHON 词云

    #!/usr/bin/env python # -*- coding:utf-8 -*- import matplotlib.pyplot as plt from wordcloud import W ...

  9. 201421123042 《Java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 答: 2. 为你的系统增加网络功能(购物车.图书馆管理.斗地主等)-分组完成 为了让你的系统可以被多个用户 ...

  10. PCB名詞解釋:通孔、盲孔、埋孔(转载)

    文章转载自:https://www.researchmfg.com/2011/07/pth-blind-hole-buried-hole/ PCB名詞解釋:通孔.盲孔.埋孔 Posted by 工作熊 ...