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

    --------小尾巴 ________一个人欣赏-最后一朵颜色的消逝-忠诚于我的是·一颗叫做野的心.决不受人奴役.怒火中生的那一刻·终将结束...
  • 相关阅读:
    2017icpc青岛
    训练赛
    CF1598F
    CF1581
    CF1594
    CF1581D
    codeforces round 746 div2 C-E
    How I Think About Learning
    Linux Sysadmin Basics 4.1 -- Filtering Output and Finding Things (&&, cut, sort, uniq, wc, grep)
    Linux Sysadmin Basics 04 -- Shell Features -- Pipes and Redirection
  • 原文地址：https://www.cnblogs.com/tianxiaxuange/p/9875160.html
Copyright © 2020-2023  润新知