jsdom是一个纯粹由 javascript 实现的一系列 web标准，特别是 WHATWG 组织制定的和 标准，用于在 nodejs 中使用。大致上来讲，该项目的目标是模拟足够的Web浏览器子集，以便用于测试和挖掘真实世界的Web应用程序。javascript

• url 设置的值能够经过"，jsdom会自动规范化解释为"/"）;这样作会致使虚拟控制台发出"jsdomError"，说明此功能未实现，而且没有任何变化,也将不会有新的Window或Document对象，而且现有/"

  若是URL有效且请求成功，则onFullfilled回调执行并返回JSDOM实例。任何URL重定向都将遵循其最终目的地。

  fromURL()提供的参数选项与提供给JSDOM构造函数的选项相似，但具备如下额外的限制和后果：

初始的请求并不能无限定制到像 npm 包同样的程度;fromURL()旨在为大多数状况提供便利的API。若是您须要更好地控制初始请求，您应该本身执行它，而后手动使用JSDOM构造函数。

若是能够打开给定的文件，则onFullfilled回调执行并返回JSDOM实例。和Node.js API同样，文件名是相对于当前工做目录的。

fromFile()提供的选项与提供给JSDOM构造函数的选项类似，但具备如下额外的默认值：

• url选项将默认为给定文件名相对应的文件URL，而不是"about：blank"

对于最简单的状况，你可能不须要一个完整的JSDOM实例及其全部相关的功能。您甚至可能不须要Window或Document！相反，你只须要解析一些HTML片断，并得到一个你能够操做的DOM对象。为此，咱们提供了fragment()，它能够从给定的字符串中建立一个DocumentFragment：

frag是DocumentFragment的实例对象，其内容是经过提供的字符串解析建立的。解析是经过使用<template>元素完成的，所以您能够在其中包含任何元素（包括具备奇怪解析规则的元素，如<td>）。

请注意，对DocumentFragments的序列化并不像使用JSDOM对象那样容易。若是你须要序列化你的DOM，你应该直接使用JSDOM构造函数。但对于包含单个元素的片断的特殊状况，经过常规方法就很容易作到。

jsdom支持使用或包来扩展任何使用canvas API的<canvas>元素。为了作到这一点，您须要将canvas做为依赖项加入到您的项目中，和

请注意，在许多状况下，提供字节这种方式可能比提供字符串更好。例如，若是您试图使用Node.js的buffer.toString('utf-8')API，则Node.js将不会去除任何前导BOM。若是您将此字符串提供给jsdom，它会逐字解释，从而使BOM保持不变。但jsdom的二进制数据解码代码将剥离前导的BOM，就像浏览器同样;在这种状况下，直接提供buffer将会获得想要的结果。

jsdom中定义的定时器（经过window.setTimeout或window.setInterval设置）将在window上下文中执行代码。因为进程在不活跃的状况下没法执行将来的定时器代码，因此卓越的jsdom定时器将保持您的Node.js进程处于活动状态。一样，对象不活跃的状况下也没有办法在对象的上下文中执行代码，卓越的jsdom定时器将阻止垃圾回收调度它们的window。

若是你想确保关闭jsdom窗口，使用window.close()，它将终止全部正在运行的定时器（而且还会删除 window和document上的任何事件监听器）。

使用模块，jsdom某些方面也支持在Web浏览器中运行。也就是说，在Web浏览器中，您可使用被browserify模块编译过的jsdom去建立彻底独立的普通JavaScript对象集，其外观和行为与浏览器的现有DOM对象很是类似，但彻底独立于它们，也就是"虚拟DOM"！

jsdom的主要目标对象仍然是Node.js，所以咱们使用仅存在于最新Node.js版本（即Node.js v6 +）中的语言特性功能。所以，在旧版浏览器可能没法正常工做。（即便编译也不会有多大帮助：咱们计划在jsdom v10.x的整个过程当中普遍使用Proxy。）

值得注意的是，jsdom在web worker中能很好的运行。项目的开发者使这一功能点成为可能，他发表了一篇关于他的，该论文就使用了这种能力。

在Web浏览器中运行jsdom时，并不是全部的工做都完美。有些状况下，这是因为基础的条件限制（好比没有文件系统访问），但有些状况下也是由于咱们没有花足够的时间去进行适当的小调整。欢迎你们来提BUG。

默认状况下，jsdom元素在控制台中被格式化为普通的旧JS对象。为了便于调试，可使用，它可让你像真正的DOM元素同样调试它们。

使用jsdom时，开发者在加载异步脚本时常常遇到麻烦。许多页面异步加载脚本，但没法分辨脚本何时完成，所以没法知道什么时候是运行代码并检查生成的DOM结构的好时机。这是一个基本的限制;咱们没法预测网页上的哪些脚本会作什么，所以没法告诉您脚本什么时候加载完毕。

这个问题能够经过几种方法来解决。若是您能控制页面逻辑，最好的方法是使用脚本加载器提供的机制来检测什么时候加载完成。例如，若是您使用像RequireJS这样的模块加载器，代码可能以下所示：

若是您不能控制该页面，则能够尝试其余解决方法，例如轮询检查特定元素是否存在。有关更多详细信息，请查看中的讨论，尤为是的。

目前，对于大多数Web平台API，jsdom在多个看似独立的jsdoms之间共享相同的类定义。这将意味着，可能会出现如下状况

这主要是出于性能和内存的缘由：若是在Web平台上每次建立jsdom时,建立全部类的单独副本，开销将会至关昂贵。

尽管如此，咱们仍然有兴趣在有一天提供一个选项配置来建立一个“独立”的jsdom，但要牺牲一些性能。

API相比，新API显然缺乏对资源加载的精细控制。先前版本的jsdom容许您设置request时使用的选项（既能够用于初始请求，也能够用于旧版本的JSDOM.fromURL()和子资源请求）。他们还容许您控制请求哪些子资源并将其应用于主文档，以便您能够下载样式表，但不下载脚本文件。最后，他们提供了一个可定制的资源加载器，能够拦截任何传出的请求并用彻底合成的response

以上这些功能还没有在新的jsdom API中实现，尽管咱们也但愿尽快将它们添加回来，但不幸的是，这须要至关大的幕后工做去实施。

同时，请随时使用旧的jsdom API来访问此功能。它一直处于支持和维护中，但它不会得到新功能。旧的文档位于中。

未实现的Web平台部分

目前jsdom中有不少缺失的API，尽管咱们也想要在jsdom中添加新的功能并保持最新的Web规范。请随时为缺失的任何内容提交issue，但咱们是一个很小而且忙碌的团队，所以你们一块儿来提交 pull request可能会更好。

除了咱们还没有拥有的功能以外，还有两个主要功能目前超出了jsdom的范围。这些是：

• Navigation：在点击连接或赋值location.href或相似操做时能够更改全局对象和全部其余的对象。

目前，jsdom对某些功能的某些方面具备虚拟行为，例如操做navigation 时向虚拟控制台发送“未实现的”"jsdomError"，或者为许多与布局相关的属性返回0。您一般能够在代码中解决这些限制，例如经过在爬网过程当中为每一个页面建立新的JSDOM实例，或使用Object.defineProperty更改各类与布局相关的getter和方法的返回值

请注意，相同领域中的其余工具（如PhantomJS）确实支持这些功能。在wiki上，咱们有关于的更完整的比较介绍。

若是您须要jsdom的帮助，请随时使用如下任何方式：

以上文档翻译自开源项目 jsdom，若有翻译错误，欢迎指正。

在网页中所有对象和内容都被称为节点，如文档、元素、文本、属性、注释等。节点（Node）是 DOM 最基本的单元，并派生出不同类型的节点，它们共同构成了文档的树形结构模型。

根据 DOM 规范，整个文档是一个文档节点，每个标签是一个元素节点，元素包含的文本是文本节点，元素的属性是一个属性节点，注释属于注释节点，以此类推。

DOM 支持的节点类型说明如表所示。

使用 nodeType 属性可以判断一个节点的类型，取值说明如表所示。

下面示例演示如何借助节点 nodeType 属性检索当前文档中包含元素的个数。

 

 
 

 
 
 

 在上面的 Script 脚本中定义一个计数函数，然后通过递归调用的方式逐层检索 document 下所包含的全部节点，在计数函数中再通过 node.nodeType == 1 过滤掉非元素节点，进而统计文档中包含的全部元素个数。
 
 

 

 使用 nodeName 和 nodeValue 属性可以读取节点的名称和值。属性取值说明如表所示。
 
 

通过上表可以看到，不同类型的节点，nodeName 和 nodeValue 属性取值不同。元素的 nodeName 属性返回值是标签名，而元素的 nodeValue 属性返回值为 null。因此在读取属性之前，应该先检测类型。

 

 nodeName 属性在处理标签时比较实用，而 nodeValue 属性在处理文本信息时比较实用。
 
 

 

 DOM 把文档视为一棵树形结构，也称为节点数。节点之间的关系包括：上下父子关系、相邻兄弟关系。简单描述如下：
 
 

• 在节点树中，最顶端节点为根节点。
• 除了根节点之外，每个节点都有一个父节点。
• 节点可以包含任何数量的子节点。
• 叶子时没有子节点的节点。
• 同级节点是拥有相同父节点的节点。

 

 针对下面这个 HTML 文档结构。
 
 

 

 在上面的 HTML 结构中，首先是 DOCTYPE 文档类型声明，然后是 html 元素，网页里所有元素都包含在这个元素里。从文档结构看，html 元素既没有父辈，也没有兄弟。如果用树来表示，这个 html 元素就是树根，代表整个文档。由 html 元素派生出 head 和 body 两个子元素，它们属于同一级别，且互不包含，可以称之为兄弟关系。head 和 body
 元素拥有共同的父元素 html，同时它们又是其他元素的父元素，担保函的子元素不同。head 元素包含 title 元素，title 元素又包含文本节点“标准 DOM 示例”。body 元素包含 3 个子元素：h1、p 和 ul，它们是兄弟关系。如果继续访问，ul 元素也是一个父元素，它包含 3 个 li
 子元素。整个文档如果使用树形结构表示，如下图所示。使用树形结构可以很直观的把文档结构中各个元素之间的关系表现出来。
 
 

 
 
 

• parentNode：返回当前节点的父节点，所有的节点都仅有一个父节点。
• childNodes：返回当前节点的所有子节点的节点列表。
• firstChild：返回当前节点的第一个子节点。
• lastChild：返回当前节点的最后一个子节点。
• nextSibling：返回当前节点之后相邻的同级节点。
• previousSibling：返回当前节点之前相邻的同级节点。

 

 childNodes 返回所有子节点的列表，它是一个随时可变的类数组。
 
 

 

 下面示例演示了如何访问 childNodes 中的节点。
 
 

 

 使用中括号语法或者 item() 方法都可以访问 childNodes 包含的子元素。childNodes 的 length 属性可以动态返回子节点的个数，如果列表项目发生变化，length 属性值也会随之变化。
 
 

 

 childNodes 是一个类数组，不能直接使用数组的方法，但是可以通过动态调用数组的方法把它转换为数组。下面示例把 childNodes 转换为数组，然后调用数组的 reverse() 方法颠倒数组中元素的顺序。
 
 

 

 
 

 
 
 

 文本节点和属性节点都不包含任何子节点，所以它们的 childNodes 属性返回值是一个空集合。可以使用 haschildNodes() 方法或者 childNodes.length>0了来判断一个节点是否包含子节点。
 
 

 

 nextSibling 返回下一个相邻节点，previousSibling 返回上一个相邻节点。如果没有同属一个父节点的相邻节点，则返回 null。
 
 

 

 可以使用下面方法访问 body 元素。
 
 

 

 通过下面方法可以访问 span 包含的文本。
 
 

 

 操作节点的基本方法如表所示。
 
 

appendChild()、insertBefore()、removeChild()、replaceChild() 四个方法用于对子节点进行操作。使用这四个方法之前，可以使用 parentNode 属性先获取父节点。另外，并不是所有类型的节点都有子节点，如果在不支持子节点的节点上调用了这些方法将会导致错误发生。

下面示例为列表框绑定一个 click 事件处理程序，通过深度克隆，新的列表框没有添加 JavaScript 事件，仅克隆了 HTML 类样式和 style 属性。