JavaScript 复习之 Document 节点

DreamTruth
423 阅读5分钟

documnt 节点对象代表整个文档，每张网页都有自己的document对象。window.document属性就是指向这个对象。

document对象获取方法：

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

属性

快捷方式属性

  • document.defaultView返回window对象，如果文档不属于window，则返回null
  • document.doctype返回文档类型
  • document.documentElement返回当前文档根节点。一般是html
  • document.body, document.head属性分别指向<body>节点，<head>节点
  • document.scrollingElement返回文档的滚动元素。标准模式下，返回<html>。兼容（quirk）模式下，返回的是<body>元素，如果该元素不存在，返回null。
// 页面滚动到浏览器顶部
document.scrollingElement.scrollTop = 0;
  • document.activeElement返回当前焦点元素。如果当前没有焦点元素，返回<body>元素或null。
  • document.fullscreenElement属性返回当前以全屏状态显示的 DOM 元素。如果不是全屏状态，该属性返回null。
if (document.fullscreenElement.nodeName == 'VIDEO') {
  console.log('全屏播放视频');
}

节点集合属性

  • document.links属性返回当前文档所有设定了href属性的<a>,节点
  • document.forms返回所有<form表单节点
  • document.images返回所有<img>图片节点
  • document.embeds属性和document.plugins属性，都返回所有<embed>节点。
  • document.scripts属性返回所有<script>节点。
  • document.styleSheets属性返回文档内嵌或引入的样式表集合
  • 除了document.styleSheets，以上的集合属性返回的都是HTMLCollection实例。

文档静态信息属性

  • document.documentURI,document.documentURL返回当前文档的网址。
  • document.domain返回当前文档的域名。
  • document.location对象提供 URL 相关的信息和操作方法。
  • document.lastModified属性返回一个字符串，表示当前文档最后修改的时间。
  • document.title返回当前文档的标题。
  • document.characterSet属性返回当前文档的编码

文档状态属性

  • document.hidden返回布尔值，如果窗口最小化、浏览器切换了 Tab，都会导致导致页面不可见，使得document.hidden返回true。

  • document.visibliteState返回文档的可见状态，这个属性可以用在页面加载时，防止加载某些资源；或者页面不可见时，停掉一些页面功能。有四个值：

    1. visible页面可见，又可能是部分可见。
    2. hidden页面不可见，窗口最小化或者浏览器切换到另一个 Tab。
    3. prerender页面处于渲染状态
    4. unload页面从内存里卸载了

  • document.readyState返回当前文档的状态，有三个值：

    1. loading加载 HTML 代码阶段
    2. interactive加载外部资源阶段
    3. complete加载完成

  • document.cookie用来操作浏览器 Cookie

  • document.designMode用来控制文档是否可编辑，有两个值on和off。

  • document.implementation属性返回一个DOMImplementation对象，该对象有三个方法，用于创建独立于当前文档的新的 Document 对象。

    1. DOMImplementation.createDocument()：创建一个 XML 文档。
    2. DOMImplementation.createHTMLDocument()：创建一个 HTML 文档。
    3. DOMImplementation.createDocumentType()：创建一个 DocumentType 对象。

方法

  • document.open()清除当前文档所有内容，是文档处于可写状态，使用document.write()方法写入内容。
  • document.close()关闭document.open()打开的文档
  • document.writeIn()与write方法完全一致，除了会在输入内容的尾部添加换行符。
  • document.querySeletor()接收一个 CSS 选择器为参数，返回匹配该选择器的元素节点，如果多个节点满足条件，则返回第一个匹配的节点。不支持 css 伪类选择器
  • document.querySeletorAll()与上面方法类似，区别是返回要给NodeList对象，包含所有匹配给定选择器的节点。不支持 css 伪类选择器
  • document.getElementsByTagName()搜索 HTML 标签名
  • document.getElementsByClassName()通过类名搜索
  • document.getElementsByName()用于选择拥有name属性的 HTML 元素。
  • document.getElementById()返回指定id属性的元素节点
  • document.elementFromPoint()返回位于页面指定位置最上层的元素节点，有两个参数，依次是相对于视口左上角的横坐标和纵坐标，单位是像素。
  • document.elementsFromPoint()返回一个数组，成员是位于指定坐标（相对于视口）的所有元素。
  • document.caretPositionFromPoint()返回一个 CaretPositon 对象，包含了指定坐标点在节点对象内部的位置信息。CaretPosition 对象就是光标插入点的概念，用于确定光标点在文本对象内部的具体位置。
  • document.createElement()生成元素节点
  • document.createTextNode()生产文本节点，并返回该节点。
  • document.createAttribute()生产一个新的属性节点，并返回他。
  • document.createComment()生成一个新的注释节点，并返回该节点。
  • document.createDocumentFragment()生成一个空的文档片段对象。
  • document.createEvent()生成一个事件对象，该对象可以被element.dispatchEvent方法使用，触发指定事件。

document.createEvent方法的参数是事件类型，比如UIEvents、MouseEvents、MutationEvents、HTMLEvents。

var event = document.createEvent('Event');
event.initEvent('build', true, true);
document.addEventListener('build', function (e) {
  console.log(e.type); // "build"
}, false);
document.dispatchEvent(event);
//上面代码新建了一个名为build的事件实例，然后触发该事件。
  • document.addEventListener(), document.removeEventListener(), document.dispatchEvent()
// 添加事件监听函数
document.addEventListener('click', listener, false);

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

// 触发事件
var event = new Event('click');
document.dispatchEvent(event);
  • document.hasFocus()返回一个布尔值，表示当前文档之中是否铀元素被激活或获得焦点。
  • document.adoptNode()将某个节点及其子节点，从原来所在的文档里面移除,归属当前document对象，返回插入口的新节点。
var node = document.adoptNode(externalNode);
document.appendChild(node);

注意，document.adoptNode方法只是改变了节点的归属，并没有将这个节点插入新的文档树。所以，还要再用appendChild方法或insertBefore方法，将新节点插入当前文档树。

  • document.importNode()方法则是从原来所在的文档或DocumentFragment里面，拷贝某个节点及其子节点，让它们归属当前document对象
var node = document.importNode(externalNode, deep);

document.importNode方法的第一个参数是外部节点，第二个参数是一个布尔值，表示对外部节点是深拷贝还是浅拷贝，默认是浅拷贝（false）。虽然第二个参数是可选的，但是建议总是保留这个参数，并设为true。

avatar
文章
阅读
粉丝