浏览器中的DOM学习笔记

DOM 是js操作网页的接口， 又称 文档对象模型

‘Document Object Model’, 浏览器会根据DOM模型将节点解析成树状结构

 

DOM的组成最新单位称为节点  Nodo

节点的类型有七种

Document DocumentType Element Attr Text Comment DocumentFragment

浏览器提供原生的节点对象Node

Node接口的属性

属性

Node.prototype.nodeType   节点类型

Node.prototype.nodeName 节点名称

Node.prototype.nodeValue 节点文本值

Node.prototype.textContent 节点和所有后代文本内容

Node.prototype.baseURI 节点当前网页的绝对路径

Node.prototype.ownerDocument 顶层文档对象

Node.prototype.nextSibling 下一个同级节点

Node.prototype.previousSibling 上一个同级节点

Node.prototype.parentNode 父节点（元素，节点，节点片段）

Node.prototype.parentElement 父元素

Node.prototype.firstChild，第一个子节点

Node.prototype.lastChild 最后一个子节点

Node.prototype.childNodes 返回子节点集合NodoList

Node.prototype.isConnected 判断节点是否在文档中

方法

Node.prototype.appendChild() 将节点插入文档中，如果文档已经存在会是移动操作

Node.prototype.hasChildNodes() 是否有子节点

Node.prototype.cloneNode() 克隆节点，如果参数是true也会克隆节点的子节点

Node.prototype.insertBefore() 两个参数 插入第一个参数到第二个参数前面

Node.prototype.removeChild() 移除子节点

Node.prototype.replaceChild() 替换某子节点

Node.prototype.contains() 参数节点是当前节点或后代节点

Node.prototype.compareDocumentPosition() 

Node.prototype.isEqualNode()，Node.prototype.isSameNode()

Node.prototype.normalize()

Node.prototype.getRootNode()

-------------------------------------------------------------------------------------------------------

节点都是单个对象，有时需要一种数据结构，能够容纳多个节点。DOM 提供两种节点集合，用于容纳多个节点：NodeList和HTMLCollection。

这两种集合都属于接口规范。许多 DOM 属性和方法，返回的结果是NodeList实例或HTMLCollection实例。主要区别是，NodeList可以包含各种类型的节点，HTMLCollection只能包含 HTML 元素节点。

 

--------------------------------------------------------------------------------------------

document 对象

代表整个文档，可以四种获取方式

1 document或 window.document

2 iframe使用 iframe节点的 contentDocment

3. ajax操作返回文档 可以使用 XMLHttpRequest的responseXML属性

4. 内部节点的ownerDocument属性

 

快捷方式属性

　　是指向文档内部的某个节点的快捷方式

　　　　　　 document.defaultView 返回windowd对象

　　　　　　doctype返回文档类型

　　　　　　document.documentElement属性返回当前文档的根元素节点（root）

　　　　　　document.scrollingElement属性返回文档的滚动元素

　　　　　　document.activeElement属性返回获得当前焦点（focus）的 DOM 元素。　　　　

　　　　　　document.fullscreenElement属性返回当前以全屏状态展示的 DOM 元素

节点集合属性

　　返回一个HTMLCollection实例，表示文档内部特定元素的集合

　　document.links属性返回当前文档所有设定了href属性的<a>及<area>节点

　　document.forms属性返回所有<form>表单节点

　　document.images属性返回页面所有<img>图片节点

　　 document.embeds属性和document.plugins属性，都返回所有<embed>节点。

　　document.scripts属性返回所有<script>节点。

　　document.styleSheets属性返回文档内嵌或引入的样式表集合

文档静态属性信息

document.documentURI属性和document.URL属性都返回一个字符串，表示当前文档的网址

document.domain属性返回当前文档的域名，不包含协议和端口

Location对象是浏览器提供的原生对象，提供 URL 相关的信息和操作方法

document.lastModified属性返回一个字符串，表示当前文档最后修改的时间

document.title属性返回当前文档的标题

document.characterSet属性返回当前文档的编码

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

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

compatMode属性返回浏览器处理文档的模式，可能的值为BackCompat（向后兼容模式）和CSS1Compat（严格模式）。

 

文档状态属性

document.hidden属性返回一个布尔值，表示当前页面是否可见

document.visibilityState返回文档的可见状态。

document.readyState属性返回当前文档的状态，共有三种可能的值。

• loading：加载 HTML 代码阶段（尚未完成解析）
• interactive：加载外部资源阶段
• complete：加载完成

document.cookie属性用来操作浏览器 Cookie

document.designMode属性控制当前文档是否可编辑

document.currentScript属性只用在<script>元素的内嵌脚本或加载的外部脚本之中，返回当前脚本所在的那个 DOM 节点，即<script>元素的 DOM 节点。

 

方法

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

document.close方法用来关闭document.open()打开的文档。

document.write方法用于向当前文档写入内容。

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

document.querySelector方法接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点

document.querySelectorAll方法与querySelector用法类似，区别是返回一个NodeList对象，包含所有匹配给定选择器的节点。

document.getElementsByTagName()方法搜索 HTML 标签名，返回符合条件的元素。

document.getElementsByClassName()方法返回一个类似数组的对象（HTMLCollection实例）

document.getElementsByName()方法用于选择拥有name属性的 HTML 元素

document.getElementById()方法返回匹配指定id属性的元素节点

document.elementFromPoint()方法返回位于页面指定位置最上层的元素节点。

document.createElement方法用来生成元素节点，并返回该节点。

document.createTextNode方法用来生成文本节点（Text实例），并返回该节点。

document.createAttribute方法生成一个新的属性节点（Attr实例），并返回它

document.createComment方法生成一个新的注释节点，并返回该节点。

document.createDocumentFragment方法生成一个空的文档片段对象（DocumentFragment实例）。

document.createEvent方法生成一个事件对象（Event实例），该对象可以被element.dispatchEvent方法使用，触发指定事件。

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.hasFocus方法返回一个布尔值，表示当前文档之中是否有元素被激活或获得焦点。

document.createNodeIterator方法返回一个子节点遍历器。

document.queryCommandEnabled()方法返回一个布尔值，表示当前是否可用document.execCommand()的某个命令

// HTML 代码为
// <input type="button" value="Copy" onclick="doCopy()">

function doCopy(){
  // 浏览器是否支持 copy 命令（选中内容复制到剪贴板）
  if (document.queryCommandSupported('copy')) {
    copyText('你好');
  }else{
    console.log('浏览器不支持');
  }
}

function copyText(text) {
  var input = document.createElement('textarea');
  document.body.appendChild(input);
  input.value = text;
  input.focus();
  input.select();

  // 当前是否有选中文字
  if (document.queryCommandEnabled('copy')) {
    var success = document.execCommand('copy');
    input.remove();
    console.log('Copy Ok');
  } else {
    console.log('queryCommandEnabled is false');
  }
}

　　document.queryCommandSupported()方法返回一个布尔值，表示浏览器是否支持document.execCommand()的某个命令。