1 概述

  1. document 节点对象代表整个文档
  2. 获取方式：
  • document 或window.document
  • iframe框架中，使用contentDocument属性
  • 内部节点的ownerDocument属性

  1. document 对象继承了EventTarget接口和Node接口，并混入ParentNode接口

    2 快捷属性

    2.1 document.defaultView

  2. 返回document对象所属的window对象

  3. 如果当前文档不属于window对象，则返回null

    2.2 document.doctype

  4. document对象一般有两个子节点，第一个子节点是document.doctype

    2.3 document.documentElement

  5. 返回当前文档的根元素节点(root)

  6. 通常是document的第二个节点，紧跟在document.doctype节点后面

  7. HTML网页的该属性，一般是<html>节点

    2.4 document.body 和document.head

  8. document.body指向节点

  9. document.head 指向节点

    2.5 document.scrollingElement

  10. f返回文档的滚动元素

  11. 标准模式下，返回document.documentElement；兼容模式下，返回body标签

    1. // 页面滚动到浏览器顶部
    2. document.scrollingElement.scrollTop = 0;

    2.6 document.activeElement

  12. 返回获得当前焦点的DOM元素,比如:input,textarea等

  13. 如果没有则返回body标签

    2.7 document.fullscreenElement

  14. 返回当前全屏展示的DOM元素

  15. 如果没有则返回null

    1. if (document.fullscreenElement.nodeName == 'VIEDEO'){
    2.  console.log("全屏播放");
    3. }

    3 节点集合属性

    3.1 document.links

  16. 返回所有具有href属性的HTMLCollection实例

    3.2 document.images

  17. 返回所有img的HTMLCollection实例

    3.3 document.forms

  18. 返回所有表单的HTMLCollection实例

    3.4 document.scripts

  19. 返回所有script的HTMLCollection实例

    3.5 document.styleSheets

  20. 返回网页内嵌入或引入的CSS样式表StyleSheetList实例

    4 文档静态信息属性

    4.1 document.documentURI和document.URL

  21. 两个属性都返回一个字符串，表示当前文档的网址

  22. documentURI继承自Document接口，用于所有文档

  23. URL继承自HTMLDocument，只能用于HTML文档

    4.2 document.domain

  24. 该属性返回文档的域名，不包含协议和端口

  25. 该属性只读；

    4.3 document.location

  26. Location对象是浏览器提供的原生对象

  27. 通过该属性可以获取Location对象

    4.4 document.lastModified

  28. 返回一个字符串，表示文档最后修改的时间

    4.5 document.title

    4.6 document.characterSet

    4.7 document.referrer

  29. 返回一个字符串，表示当前文档的访问者来自哪里

  30. document.referrer的值，和HTTP头信息的Referer字段保持一致

    4.8 document.dir

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

    4.9 document.compatMode

  32. 返回浏览器处理文档的模式；

  33. 可能取值为：BackCompat和CSS1Compat(严格模式)

    5 文档状态属性

    5.1 document.hidden

  34. 返回一个布尔值，表示当前页面是否可见

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

    5.2 document.visibilityState

  36. 返回文档的可见状态

  • visible: 页面可见
  • hidden: 页面不可见
  • prerender: 页面处于正在渲染 状态，对用户来说该页面不可见
  • unloaded: 页面从内存中卸载

    5.3 document.readyState

  1. 该属性返回当前文档的状态：
  • loadinng: 加载HTML代码阶段
  • interactive: 加载外部资源阶段
  • complete: 加载完成

    5.4 document.cookie

  1. 操作浏览器cookie

    6 方法

    6.1 document.querySelector()

  2. 方法接收一个CSS选择器作为参数，返回匹配该选择器的元素节点

  3. 如果有多个节点满足匹配条件，则返回第一个匹配的节点
  4. 如果没有匹配的节点，则返回null

  5. 该方法不仅定义在document上，在元素节点上也可以调用

    6.2 document.querySelectorAll()

  6. 返回一个NodeList对象，包含所有匹配给定选择器的节点

  7. 参数可以用逗号分隔多个CSS选择器
  8. 参数是*，返回文档中所有元素节点
  9. 返回的结果不是动态集合，不会实时反映元素节点的变化
  10. 该方法不仅定义在document上，在元素节点上也可以调用

  11. 不支持CSS伪元素的选择器

    6.3 document.getElementsByTagName()

  12. 返回符合条件的HTML标签的元素集合

  13. 返回值是类数组对象，是HTMLCollection实例

  14. 该方法不仅定义在document上，也可以在元素节点上调用该方法

    6.4 document.getElementsByClassName()

  15. 返回一个类数组的对象（HTMLCollection实例)

  16. 包含了所有class 名字符合指定条件的元素

  17. 该方法不仅在document上，也可以在元素节点上调用该方法

    6.5 document.getElementsByName()

  18. 选择拥有name属性的HTML元素

  19. 是一个类数组的对象（NodeList)

    6.6 document.getElementById()

  20. 返回指定id属性的元素节点

    6.7 document.createElement()

  21. 生成元素节点并返回该节点

    6.8 document.createTextNode()

  22. 生成文本节点，参数是文本节点内容，并返回文本节点

    6.9 document.createAttribute()

  23. 生成一个新的属性节点（Attr实例),并返回它

    1. var attribute = document.createAttruibute(name);

  24. 参数是name，是属性的名称 ```javascript var node = document.getElementById(“div1”);

var a = document.createAttribute(“my_attr”); a.value = “val”;

node.setAttributeNode(a);

// 或者 node.setAttribute(“my_attr”,”val”);

  1. <a name="l2A2M"></a>
  2. ### 6.10 document.createComment()
  3. <a name="VVFcS"></a>
  4. ### 6.11 document.createDocumentFragment()
  6. 1. 该方法生成一个空的文档片段对象（DocumentFragment实例）
  7. 1. DocumentFragment是一个存在于内存的DOM片段，不属于当前文档，常用来生成一段复杂的DOM结构，然后在插入当前文档
  8. ```javascript
  9. var docfrag = document.createDocumentFragment();
  10. [1,23,3,4].forEach(function(num){
  11.    var li = document.createElement("li");
  12.   li.textContent = e;
  13.   docfrag.appendChild(li);
  14. });
  15. var element = document.getElementById("ul");
  16. element.appendChild(docfrag);

6.12 document.createEvent()

6.13 document.addEventListener() document.removeEventListener() document.dispatchEvent()