document 节点对象，

代表整个文档，每张网页都有自己的 document 对象。

window.document 当浏览器开始加载文档时就存在了

  • 正常的网页使用 document 或者 window.document
  • iframe 框架中使用 iframe 节点对象的 contentDocument 属性
  • Ajax 操作返回的文档，使用 XMLHttpRequest 对象的 responseXML 属性
  • 内部节点的 ownerDocument 属性
  • 属性

    • document.defaultView 属性，如果文档属于 window ，则指向 window
    • 对于 HTML 文档，document 对象含有两个子节点

      • document.doctype 返回文档类型（Document Type Declaration）节点。如果没写DTD，则返回 null
      • document.documentElement 返回文档的根元素节点。一般是 <html> 节点
    • document.head 和 document.body

      • 不管网页中是否有 <head> <body>，这两个节点始终存在
      • 浏览器会自动创建
      • 这两个属性可写！
    • document.scrollingElement 返回文档滚动元素。

      • 也就是说，当文档滚动时，到底是哪个元素滚动
      • // 页面滚动到浏览器顶部
        
document.scrollingElement.scrollTop = 0;
    • document.activeElement 返回获得当前焦点（focus）的 DOM 元素

      • 如果当前没有焦点元素，返回 <body> 元素或 null 
    • document.fullScrreenElement 返回当前全屏状态展示的 DOM 元素

      • 如果不是全屏状态，则返回 null
      • // 判断 video 元素是不是全屏状态
        
if (document.fullscreenElement.nodeName == 'VIDEO') {
        
    console.log('全屏播放视频');
        
}
  • 返回一个节点集合 HTMLCollection 的属性

这些集合都是动态的，网页节点发生任何变化，都会反映在这些集合中。

    • document.links 

      • 返回当前文档所有设定了href属性的 <a> 及 <area> 节点
      • // 打印文档所有的链接
        
var links = document.links;
        
for(var i = 0; i < links.length; i++) {
        
    console.log(links[i]);
        
}
    • document.forms

      • 返回所有 <form> 表单节点
      • 获取文档的第一个表单
      • id 属性和 name 属性也可以用来引用表单
    • document.images

      • 返回页面所有 <img> 元素节点
    • document.embeds 和 document.plugins

      • 都是返回页面所有 <embed> 元素节点
    • document.scripts

      • 返回页面所有 <script> 元素节点
    • document.styleSheets

      • 返回文档内嵌或引入的样式集合
      • 除了 document.styleSheets，以上的集合属性返回的都是 HTMLCollection 实例
  • 文档静态信息属性

    • document.documentURI  和  document.URL

        • 都返回一个字符串，表示当前文档的网址

          • documentURI 继承自 Document 接口，可用于所有文档
          • URL继承自HTMLDocument接口，只能用于 HTML 文档
        • 如果文档的锚点（#anchor）变化，这两个属性都会跟着变化
    • document.domain

      • 返回当前文档的域名，不包含协议和接口

        • // http://www.example.com:80/hello.html
          
document.domain;    // www.example.com
      • 如果无法获取域名，该属性返回 null 
      • 对于顶级域名 document.domain 是一个只读属性
        • 对于次级域名，属性可读可写，但是修改后会导致端口号为 null，因此两个网页进行通信时，应该具有相同设置。
    • document.location

      • 指向浏览器提供的原生对象 Location
      • 该对象提供 URL 相关的信息和操作方法
      • 可以通过 window.location 或者 document.location 获取该对象
    • document.lastModified

      • 返回文档的最后 修改时间
      • 不同的浏览器返回的时间格式不一样
      • 返回值类型是字符串
      • 如果页面上有 JavaScript 生成的内容，document.lastModified 属性返回的总是当前时间
    • document.title

      • 返回当前文档的标题
      • 返回 <title> 标签内的值
      • <title> 标签可写，如果改写了，则返回修改后的值。
    • document.characterSet

      • 返回当前文本编码，比如 UTF-8
    • document.referrer

      • 返回当前文档访问者的来源，即用户通过点击哪个网页进入到当前网页
      • 如果无法获取来源，或者用户直接输入网址，document.referrer 返回一个空字符串
      • document.referrer 的值，总是与 HTTP 头信息的Referer字段保持一致
        • 注意，document.referrer 的拼写有两个 r，而 HTTP 头信息的 Referer 字段只有一个 r
    • document.dir

      • 返回一个字符串，表示文字方向

        • rtl    表示文字从右到左    阿拉伯文字
        • ltr    表示文字从左到右    大多数文字
    • document.compatMode

      • 返回浏览器处理文档的模式

        • 向后兼容模式    BackCompat
        • 严格模式    CSS1Compat
  • 文档状态属性

    • document.hidden

      • 返回一个布尔值，表示当前页面是否可见
      • 如果窗口最小化、浏览器切换了 Tab，都会导致导致页面不可见，使得 document.hidden 返回 true
    • document.visibilityState

      • 返回文档的可见状态

        • visible：页面可见

          • 页面可能是部分可见，即不是焦点窗口，前面被其他窗口部分挡住了。
        • hidden： 页面不可见
          • 有可能窗口最小化，或者浏览器切换到了另一个 Tab
        • prerender：页面处于正在渲染状态
          • 对于用户来说，该页面不可见
        • unloaded：页面从内存里面卸载了
      • 用途：
        • 在页面加载时，防止加载某些资源
        • 或者页面不可见时，停掉一些页面功能
    • document.readyState

      • 返回当前文档的状态

        • loading    加载 HTML 代码阶段
        • interactive    加载外部资源阶段
        • complete    加载完成
      • 该属性变化过程：
        • 浏览器开始解析 HTML 文档，document.readyState 属性等于 loading
        • 遇到 HTML 文档中的 <script> 元素，并且没有 async 或 defer 属性，就暂停解析，开始执行脚本，这时 document.readyState 属性还是等于 loading
        • HTML 文档解析完成，document.readyState 属性变成 interactive
        • 浏览器等待图片、样式表、字体文件等外部资源加载完成，一旦全部加载完成，document.readyState 属性变成 complete
      • 每次状态变化都会触发一个 readystatechange 事件
    • document.cookie 

      • 操作浏览器的 cookie
    • document.designMode

      • 控制当前文档是否可编辑 on / off
      • 下面代码打开 iframe 元素内部文档的 designMode 属性，就能将其变为一个所见即所得的编辑器 
        • // HTML 代码如下
          
// <iframe id="editor" src="about:blank"></iframe>
          
var editor = document.getElementById('editor');
          
editor.contentDocument.designMode = 'on';
    • document.implementation

      • 返回一个 DOMImplementation 对象，主要用于创建独立于当前文档的新的 Document 对象，对象有三个方法

        • DOMImplementation.createDocument()    创建一个 XML 文档
        • DOMImplementation.createHTMLDocument()    创建一个 HTML 文档
        • DOMImplementation.createDocumentType()：创建一个 DocumentType 对象
      • 生成一个新的 HTML 文档doc，然后用它的根元素 document.documentElement 替换掉 document.documentElement
      • 这会使得当前文档的内容全部消失，变成 hello world 
        • var doc = document.implementation.createHTMLDocument('Title');
          
var p = doc.createElement('p');
          
p.innerHTML = 'hello world';
          
doc.body.appendChild(p);

document.replaceChild(
          
    doc.documentElement,
          
    document.documentElement
          
);
  • document 方法

    • document.open()

      • 清除当前文档所有内容，使得文档处于可写状态，供document.write() 方法写入内容
    • document.close()

      • 用来关闭 document.open() 打开的文档
    • document.write()

      • 用于向当前文档写入内容
      • 在网页的首次渲染阶段，只要页面没有关闭写入（即没有执行document.close()），document.write写入的内容就会追加在已有内容的后面
      • 如果页面已经解析完成（DOMContentLoaded事件发生之后），再调用write方法，它会先调用open方法，擦除当前文档所有内容，然后再写入
      • 注意，document.write会当作 HTML 代码解析，不会转义
      • 除了某些特殊情况，应该尽量避免使用 document.write() 这个方法
    • document.writeln()

      • 与write方法完全一致，除了会在输出内容的尾部添加换行符
    • document.querySelector()

      • 接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点
      • 如果有多个节点满足匹配条件，则返回第一个匹配的节点。
      • 如果没有发现匹配的节点，则返回 null
      • 它们不支持 CSS 伪元素的选择器（比如 :first-line 和 :first-letter）和伪类的选择器（比如 :link 和 :visited）
    • document.querySelectorAll()

      • 与 .querySelector() 用法类似
      • 区别是返回一个 NodeList 对象，包含所有匹配给定选择器的节点
      • 它们不支持 CSS 伪元素的选择器（比如 :first-line 和 :first-letter）和伪类的选择器（比如 :link和 :visited）
      • 注意：返回结果不是动态集合，不会实时反映元素节点的变化
    • document.getElementById()
    • document.getElementsByTagName()
    • document.getElementsByClassName()
    • document.getElementsByName()
    • document.elementFromPoint()

      • 返回位于页面指定位置最上层的元素节点
      • 相对于当前视口左上角的横坐标和纵坐标，单位是像素
      • 如果位于该位置的 HTML 元素不可返回（比如文本框的滚动条），则返回它的父元素（比如文本框）
      • 如果坐标值无意义（比如负值或超过视口大小），则返回 null
      • var element = document.elementFromPoint(50, 50);
    • document.elementsFromPoint()

      • 返回一个数组，成员是位于指定坐标（相对于视口）的所有元素
    • document.caretPositionFromPoint()

      • 返回一个 CaretPosition 对象，包含了指定坐标点在节点对象内部的位置信息
      • CaretPosition 对象就是光标插入点的概念，用于确定光标点在文本对象内部的具体位置。 
        • var range = document.caretPositionFromPoint(clientX, clientY);
      • 上面代码中，range 是指定坐标点的 CaretPosition 对象。
      • CaretPosition 对象有两个属性
        • CaretPosition.offsetNode    该位置的节点对象
        • CaretPosition.offset       该位置在offsetNode对象内部，与起始位置相距的字符数
    • document.createElement()
    • document.createTextNode() 
      • 用来生成文本节点（Text实例），并返回该节点
      • 它的参数是文本节点的内容。
      • 确保返回的节点，被浏览器当作文本渲染，而不是当作 HTML 代码渲染
      • 因此，可以用来展示用户的输入，避免 XSS 攻击 
        • var div = document.createElement('div');
          
div.appendChild(document.createTextNode('<span>Foo & bar</span>'));
          
console.log(div.innerHTML)    // &lt;span&gt;Foo &amp; bar&lt;/span&gt;
      • 以上代码，createTextNode方法对大于号和小于号进行转义，从而保证即使用户输入的内容包含恶意代码，也能正确显示
      • 注意： 该方法不对单引号和双引号转义，所以不能用来对 HTML 属性赋值
    • document.createAttribute()

    • document.createComment()

    • document.createDocumentFragment()
      • DocumentFragment 是一个存在于内存的 DOM 片段，不属于当前文档，常常用来生成一段较复杂的 DOM 结构，然后再插入当前文档。
      • 因为DocumentFragment不属于当前文档，对它的任何改动，都不会引发网页的重新渲染，比直接修改当前文档的 DOM 有更好的性能表现
      • var docfrag = document.createDocumentFragment();

[1, 2, 3, 4].forEach(function (e) {
        
    var li = document.createElement('li');
        
    li.textContent = e;
        
    docfrag.appendChild(li);
        
});

var element  = document.getElementById('ul');
        
element.appendChild(docfrag);

        上面代码中，文档片断docfrag包含四个<li>节点，这些子节点被一次性插入了当前文档。

    • document.createEvent()

      • 生成一个事件对象（Event实例），
      • 该对象可以被 element.dispatchEvent() 方法使用，触发指定事件
      • 参数是事件类型，比如 UIEvents、MouseEvents、MutationEvents、HTMLEvents
      • 实例：
        • 新建了一个名为 build 的事件实例，然后触发该事件

          var event = document.createEvent('Event');
          
event.initEvent('build', true, true);
          
document.addEventListener('build', function (e) {
          
  console.log(e.type); // "build"
          
}, false);
          
document.dispatchEvent(event);
    • document.addEventListener()
      • 承自EventTarget接口
      • 1
    • document.removeEventListener()

      • 承自EventTarget接口
      • 1
    • document.dispatchEvent()

      • 承自EventTarget接口
      • // 添加事件监听函数
        
document.addEventListener('click', listener, false);

// 移除事件监听函数
        
document.removeEventListener('click', listener, false);

// 触发事件
        
var event = new Event('click');
        
document.dispatchEvent(event);
    • document.hasFocus()

      • 返回一个布尔值，表示当前文档之中是否有元素被激活或获得焦点
      • 注意，有焦点的文档必定被激活（active），反之不成立，激活的文档未必有焦点。
      • 比如，用户点击按钮，从当前窗口跳出一个新窗口，该新窗口就是激活的，但是不拥有焦点
    • document.adoptNode()

      • 将某个节点及其子节点，从原来所在的文档 或 DocumentFragment 里面移除，归属当前 document 对象
      • 返回插入后的新节点
      • 插入的节点对象的 ownerDocument 属性，会变成当前的 document 对象，而 parentNode 属性是null。
    • document.importNode()

      • 则是从原来所在的文档或 DocumentFragment 里面，拷贝某个节点及其子节点，让它们归属当前 document 对象
      • 拷贝的节点对象的 ownerDocument 属性，会变成当前的 document 对象，而 parentNode 属性是null
      • 第一个参数是外部节点
      • 第二个参数是一个布尔值，表示对外部节点是深拷贝还是浅拷贝，默认是浅拷贝（false）。
      • 虽然第二个参数是可选的，但是建议总是保留这个参数，并设为 true
      • 注意，document.importNode() 方法只是拷贝外部节点，这时该节点的父节点是null。下一步还必须将这个节点插入当前文档树。
      • var iframe = document.getElementsByTagName('iframe')[0];
        
var oldNode = iframe.contentWindow.document.getElementById('myNode');
        
var newNode = document.importNode(oldNode, true);
        
document.getElementById("container").appendChild(newNode);

        上面代码从 iframe 窗口，拷贝一个指定节点 myNode，插入当前文档

(87)Wangdao.com第二十天_JavaScript document 节点对象的更多相关文章

  1. (88)Wangdao.com第二十一天_JavaScript 元素节点Element 节点

    Element 节点 (元素节点) 是一组对象 对应网页的 HTML 元素 每一个 HTML 元素,在 DOM 树上都会转化成一个 Element 节点对象(以下简称元素节点) 所有元素节点的 nod ...

  2. (89)Wangdao.com第二十二天_JavaScript DocumentFragment 节点

    DocumentFragment 节点 代表一个文档的片段,本身就是一个完整的 DOM 树形结构. 它没有父节点,.parentNode 返回 null 可以插入任意数量的子节点. 不属于当前文档,操 ...

  3. Document节点

    概述 document节点对象代表整个文档,每张网页都有自己的document对象.window.document属性就指向这个对象.只要浏览器开始载入 HTML 文档,该对象就存在了,可以直接使用. ...

  4. DOM Document节点类型详解

    在前面 DOM 概况 中,我们知道了 DOM 总共有 12 个节点类型,今天我们就来讲下 DOM 中最重要的节点类型之一的 document 节点类型. 1.概况 Javascript 通过 Docu ...

  5. javascript高级程序设计---document节点

    document节点是文档的根节点,每张网页都有自己的document节点,window.document就是指向这个节点.只要浏览器开始载入文档,这个节点就开始了 对于HTML文档来说,docume ...

  6. (89)Wangdao.com第二十二天_JavaScript 属性

    属性 属性本身是一个对象(Attr 对象) Element.attributes  返回一个类似数组的动态对象,成员是该元素标签的所有属性节点对象 属性的实时变化都会反映在这个节点对象上. 其他类型的 ...

  7. (85)Wangdao.com第十八天_JavaScript NodeList 接口，HTMLCollection 接口

    NodeList 接口        HTMLCollection 接口 节点都是单个对象,有时需要一种数据结构,能够容纳多个节点 DOM 提供两种节点集合,用于容纳多个节点:NodeList 和 H ...

  8. (84)Wangdao.com第十八天_JavaScript 文档对象模型 DOM

    文档对象模型 DOM DOM 是 JavaScript 操作网页的接口, 全称为“文档对象模型”(Document Object Model). 作用是将网页转为一个 JavaScript 对象,从而 ...

  9. JS中Document节点总结

    document对象是documentHTML的一个实例,也是window对象的一个属性,因此可以将document对象作为一个全局对象来访问. Document节点的子节点可以是DocumentTy ...

随机推荐

  1. 目前的.NET(C#)世界里，主流的ORM框架

    推荐一些常用的asp.net ORM框架 SqlSugar (国内) Dos.ORM (国内) Chloe (国内) StackExchange/Dapper (国外) Entity Framewor ...

  2. DirectX11 With Windows SDK--06 DirectXMath数学库

    前言 xnamath.h原本是位于DirectX SDK的一个数学库,但是现在Windows SDK包含的数学库已经抛弃掉原来的xnamath.h,并演变成了现在的DirectXMath.h.其实本质 ...

  3. docker学习-----docker服务的安装

    docker 以下观点个人理解,只做参考 一.docker本身的优势 1.docker他本身是一个容器,用来方便我们项目打包,做服务器虚拟化,统一开发者环境等多种优势:运行于docker上的项目可以快 ...

  4. centos7安装notepadqq

    这是在centos7 上发表的第一篇博文 对linux系统陌生,折腾了一天,安装好了搜狗输入法.相关文章也不少,但照着一步一步来,都没有成功.最后照着这篇弄成了: ****** 安装notepadd+ ...

  5. MacOS下使用远程桌面VNC

    1 分为一个server 和 viewer,server端就是可以加入组然后允许远程连接,viewer就是远程连接端 2 server下载地址 https://www.realvnc.com/en/c ...

  6. POJ 2031 Building a Space Station (计算几何+最小生成树)

    题目: Description You are a member of the space station engineering team, and are assigned a task in t ...

  7. Chrome 远程代码执行漏洞CVE-2019-5786-EXP

    0x01 漏洞原理 CVE-2019-5786是位于FileReader中的UAF漏洞,由Google's Threat Analysis Group的Clement Lecigne于2019-02- ...

  8. Linux下安装VMware Tools（使虚拟机支持文件拖拽）

    如图点击虚拟机找到安装VMware Tools选项,点击后会在虚拟机桌面显示一个光盘,双击进入如下页面: 选择压缩包将其复制放入Home中不带中文的文件夹: 打开终端,输入cd命令进入文件夹,将压缩包 ...

  9. 【原创】大叔问题定位分享（4）Kafka集群broker节点从zookeeper上消失

    kafka_2.8.0-0.8.1 一 现象 生产环境一组kafka集群经常发生问题,现象是kafka在zookeeper上的broker节点消失,此时kafka进程和端口都在,然后每个broker都 ...

  10. P2866 [USACO06NOV]糟糕的一天Bad Hair Day--单调栈

    P2866 [USACO06NOV]糟糕的一天Bad Hair Day 题意翻译 农夫约翰有N (N \leq 80000)N(N≤80000)头奶牛正在过乱头发节.每一头牛都站在同一排面朝东方,而且 ...