(87)Wangdao.com第二十天_JavaScript document 节点对象

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，插入当前文档

posted @ 2018-10-30 10:04  耶梦加德  阅读(278)  评论(0)  编辑  收藏  举报