recursal/MDN huggingface dataset:
DocumentOrShadowRoot.activeElement
==================================

`Document` 和 `ShadowRoot` 接口的 **`activeElement`** 只读属性，用来返回当前在 DOM 或者 shadow DOM 树中处于聚焦状态的`Element`。

通常情况下，如果 `HTMLInputElement` 或者 `HTMLTextAreaElement`元素中有文字被选中时， `activeElement`属性就会返回该元素。这时，你可以调用该元素的`selectionStart` 和 `selectionEnd` 属性获取更多选中文字的信息。其他情况下，焦点元素也可能是`<select>`元素 (menu) 或者一个别的 `<input>` 元素，比如 `"button"`、`"checkbox"` 或者 `"radio"`。

通常用户可以使用 tab 键来切换页面中的焦点元素获得焦点，使用空格键使元素 active (比如按下一个按钮或者 切换一个 radio). 具体哪些元素可以获得焦点与系统和浏览器的设置有关。比如，在 macOS 系统上，不是 text input 元素默认情况下是不能获得焦点的。

**备注：** Focus (可收到 input 事件的元素) 和 selection (目前页面被高亮的部分) 不是一回事。你可以通过 `window.getSelection()`获取当前用户选择的文本。

Syntax
------
```

element = DocumentOrShadowRoot.activeElement
```

### Value

当前获得焦点的 `Element` ，如果没有焦点元素，会返回 `<body>` 或者 `null` 。

Example
-------

### HTML


```html
<p>Select some text from one of the text areas below:</p>

<form>
  <textarea name="ta-example-one" id="ta-example-one" rows="7" cols="40">
This is Text Area One. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.</textarea
 >
  <textarea name="ta-example-two" id="ta-example-two" rows="7" cols="40">
This is Text Area Two. Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.</textarea
 >
</form>

<p>Active element ID: <b id="output-element"></b></p>
<p>Selected text: <b id="output-text"></b></p>
```

### JavaScript


```js
function onMouseUp(e) {
  const activeTextarea = document.activeElement;
  const selection = activeTextarea.value.substring(
    activeTextarea.selectionStart,
    activeTextarea.selectionEnd,
  );

  const outputElement = document.getElementById("output-element");
  const outputText = document.getElementById("output-text");
  outputElement.innerHTML = activeTextarea.id;
  outputText.innerHTML = selection;
}

const textarea1 = document.getElementById("ta-example-one");
const textarea2 = document.getElementById("ta-example-two");
textarea1.addEventListener("mouseup", onMouseUp, false);
textarea2.addEventListener("mouseup", onMouseUp, false);
```

### Result

规范
--

| Specification |
| --- |
| HTML Standard # dom-documentorshadowroot-activeelement-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Document.querySelectorAll
=========================

概述
--

返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 `NodeList` 。

**备注：** 此方法基于`ParentNode` mixin 的`querySelectorAll()` 实现。

语法
--


```js
querySelectorAll(selectors)
```

### 参数

`selectors`

一个包含一个或多个匹配的选择器的字符串。其必须是一个有效的 CSS 选择器字符串，如果不是，会抛出 `SyntaxError` 异常。有关使用选择器标识元素的更多信息，请参阅使用选择器定位 DOM 元素，可以通过使用逗号分隔多个选择器来指定它们。


**备注：** 必须使用反斜杠字符转义不属于标准 CSS 语法的字符。由于 JavaScript 也使用反斜杠转义，因此在使用这些字符编写字符串文字时必须特别小心。有关详细信息，请参阅转义特殊字符

### 返回值

一个静态 `NodeList`，包含一个与至少一个指定选择器匹配的元素的`Element`对象，或者在没有匹配的情况下为空`NodeList`

**备注：** 如果 `selectors` 参数中包含 CSS 伪元素，则返回的列表始终为空。

### 异常

`SyntaxError`

如果指定的 `选择器` 不合法，会抛出错误。如$("##div")

示例
--

### 获取匹配列表

要获取文档中所有`<p>`元素的`NodeList`。


```js
var matches = document.querySelectorAll("p");
```


此示例返回文档中所有`<div>`元素的列表，其中 class 包含"`note`"或"`alert`"：


```js
var matches = document.querySelectorAll("div.note, div.alert");
```


在这里，我们得到一个`<p>`元素的列表，其直接父元素是一个 class 为`"highlighted"`的`div`，并且位于 ID 为`"test"`的容器内。


```js
var container = document.querySelector("#test");
var matches = container.querySelectorAll("div.highlighted > p");
```


此示例使用属性选择器返回文档中属性名为`"data-src"`的`iframe`元素列表：


```js
var matches = document.querySelectorAll("iframe[data-src]");
```


这里，属性选择器用于返回 ID 为`"userlist"`的列表中包含值为`"1"`的`"data-active"`属性的元素


```js
var container = document.querySelector("#userlist");
var matches = container.querySelectorAll("li[data-active='1']");
```

### 访问匹配项

一旦返回匹配元素的`NodeList`，就可以像任何数组一样检查它。如果数组为空（即，其`length`属性为 0），则找不到匹配项。

否则，你只需使用标准数组方法来访问列表的内容。你可以使用任何常见的循环语句，例如：


```js
var highlightedItems = userList.querySelectorAll(".highlighted");

highlightedItems.forEach(function (userItem) {
  deleteUser(userItem);
});
```

用户备注
----

`querySelectorAll()` 的行为与大多数常见的 JavaScript DOM 库不同，这可能会导致意外结果。

### HTML

考虑这个 HTML 及其三个嵌套的`<div>`块


```html
<div class="outer">
  <div class="select">
    <div class="inner"></div>
  </div>
</div>
```

### JavaScript


```js
var select = document.querySelector(".select");
var inner = select.querySelectorAll(".outer .inner");
inner.length; // 1, not 0!
```


在这个例子中，当在`<div>`上下文中选择带有`"select"`类的`".outer .inner"`时，仍然会找到类`".inner"`的元素，即使`.outer`不是基类的后代 执行搜索的元素（`".select"`）。默认情况下，`querySelectorAll()`仅验证选择器中的最后一个元素是否在搜索范围内。

`:scope` 伪类符合预期的行为，只匹配基本元素后代的选择器：


```js
var select = document.querySelector(".select");
var inner = select.querySelectorAll(":scope .outer .inner");
inner.length; // 0
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-queryselectorall① |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Locating DOM elements using selectors
* Attribute selectors in the CSS Guide
* Attribute selectors in the MDN Learning Area
* `Element.querySelector()` and `Element.querySelectorAll()`
* `Document.querySelector()`
* `DocumentFragment.querySelector()` and `DocumentFragment.querySelectorAll()`
* `ParentNode.querySelector()` and `ParentNode.querySelectorAll()`
* Code snippets for `querySelector()`
document.createComment
======================

### 概述

`createComment()` 方法用来创建并返回一个注释节点。

### 语法
```

var commentNode = document.createComment(data)
```

### 参数

* `commentNode` 是一个注释节点。
* `data` 是一个字符串，包含了注释的内容。
### 例子
```

var docu = new DOMParser().parseFromString('<xml></xml>',  "application/xml")

var comment = docu.createComment('这是注释内容');

docu.getElementsByTagName('xml')[0].appendChild(comment);

alert(new XMLSerializer().serializeToString(docu));
// 弹出 <xml><!--这是注释内容--></xml>
```

### 备注

* 如果 data 字符串包含了 "--" ,则会抛出 `NS_ERROR_DOM_INVALID_CHARACTER_ERR`异常，这种情况需要对"--" 字符串进行转义。
### 规范

createComment
document.doctype
================

返回当前文档关联的文档类型定义 (DTD). 返回的对象实现了 DocumentType 接口。使用 `DOMImplementation.createDocumentType()` 方法可以创建一个`DocumentType`类型的对象。语法
--
```

doctype = document.doctype;
```


* `doctype` 是一个只读属性。
示例
--


```js
var doctypeObj = document.doctype;

console.log(
  "doctypeObj.name: " +
    doctypeObj.name +
    "\n" +
    "doctypeObj.internalSubset: " +
    doctypeObj.internalSubset +
    "\n" +
    "doctypeObj.publicId: " +
    doctypeObj.publicId +
    "\n" +
    "doctypeObj.systemId: " +
    doctypeObj.systemId,
);
```

附注
--

如果当前文档没有 DTD，则该属性返回`null`。

DOM level 2 不支持编辑文档类型定义。

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-doctype① |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
TransformStream.writable
========================

`TransformStream` 接口的只读属性 **`writable`** 返回由这个 `TransformStream` 控制的 `WritableStream` 实例。

值
-

一个 `WritableStream`。

示例
--

以下示例创建了一个新的 `TransformStream` 并将其赋值给 `textEncoderStream`，然后将 `writable` 的值打印到控制台上。


```js
const textEncoderStream = new TransformStream();
console.log(textEncoderStream.writable); // a WritableStream
```

规范
--

| Specification |
| --- |
| Streams Standard # ref-for-ts-writable② |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
TransformStream.readable
========================

`TransformStream` 接口的只读属性 **`readable`** 返回由这个 `TransformStream` 控制的 `ReadableStream` 实例。

值
-

一个 `ReadableStream`。

示例
--

以下示例创建了一个新的 `TransformStream` 并将其赋值给 `textEncoderStream`，然后将 `readable` 的值打印到控制台上。


```js
const textEncoderStream = new TransformStream();
console.log(textEncoderStream.readable); // a ReadableStream
```

规范
--

| Specification |
| --- |
| Streams Standard # ref-for-ts-readable② |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
TransformStream()
=================

**`TransformStream()`** 构造函数创建一个新的 `TransformStream` 对象，该对象表示一对流：一个 `WritableStream` 表示可写端，和一个 `ReadableStream` 表示可读端。

语法
--


```js
new TransformStream()
new TransformStream(transformer)
new TransformStream(transformer, writableStrategy)
new TransformStream(transformer, writableStrategy, readableStrategy)
```

### 参数

`transformer`可选

一个表示 `transformer` 的对象。如果未提供，则生成的流将是一个**恒等变换流**，它将所有写入可写端的分块转发到可读端，不会有任何改变。

transformer 对象可以包含以下任何方法。每个方法的 `controller` 都是一个 `TransformStreamDefaultController` 实例。

`start(controller)`

当 `TransformStream` 被构造时调用。它通常用于使用 `TransformStreamDefaultController.enqueue()` 对分块进行排队。

`transform(chunk, controller)`

当一个写入可写端的分块准备好转换时调用，并且执行转换流的工作。如果没有提供 `transform()` 方法，则使用恒等变换，并且分块将在没有更改的情况下排队。

`flush(controller)`

当所有写入可写端的分块成功转换后被调用，并且可写端将会关闭。


`writableStrategy`可选

一个定义了队列策略的可选对象。它需要两个参数：

`highWaterMark`

一个非负整数。它定义了在应用背压之前内部队列包含的分块的总数。

`size(chunk)`

一个包含参数 `chunk` 的方法。它表示用于每一个块的大小，以字节为单位。


`readableStrategy`可选

一个定义了队列策略的可选对象。它需要两个参数：

`highWaterMark`

一个非负整数。它定义了在应用背压之前内部队列包含的分块的总数。

`size(chunk)`

一个包含参数 `chunk` 的方法。它表示用于每一个块的大小，以字节为单位。


**备注：** 你可以自定义 `readableStrategy` 或 `writableStrategy`，或者使用 `ByteLengthQueuingStrategy` 或 `CountQueuingStrategy` 的实例作为对象的值。

示例
--

### 将文本转换为大写

以下示例将文本逐块转换为大写。这个示例来自数据流——权威指南，它有关于不同类型流的一些示例。


```js
function upperCaseStream() {
  return new TransformStream({
    transform(chunk, controller) {
      controller.enqueue(chunk.toUpperCase());
    },
  });
}

function appendToDOMStream(el) {
  return new WritableStream({
    write(chunk) {
      el.append(chunk);
    },
  });
}

fetch("./lorem-ipsum.txt").then((response) =>
  response.body
    .pipeThrough(new TextDecoderStream())
    .pipeThrough(upperCaseStream())
    .pipeTo(appendToDOMStream(document.body)),
);
```

### 创建一个恒等变换流

如果没有提供 `transformer` 参数，那么结果将是一个恒等流，它将所有写入可写端的分块转发到可读端，并且不做任何改变。在以下示例中，一个恒等转换流被用于向一个管道添加缓冲。


```js
const writableStrategy = new ByteLengthQueuingStrategy({
  highWaterMark: 1024 \* 1024,
});
readableStream
  .pipeThrough(new TransformStream(undefined, writableStrategy))
  .pipeTo(writableStream);
```

规范
--

| Specification |
| --- |
| Streams Standard # ref-for-ts-constructor④ |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
WorkerGlobalScope.self
======================

**`self`** 是 `WorkerGlobalScope` (en-US) 的只读属性，它指向 `WorkerGlobalScope` 自身。通常情况下，它是如 `DedicatedWorkerGlobalScope`, `SharedWorkerGlobalScope` (en-US), 或 `ServiceWorkerGlobalScope` 类型的 scope。

语法
--


```js
var selfRef = self;
```

### 值

当前 worker 的全局 scope（值取决于你创建的 worker 类型）。

示例
--

在 worker 中运行这行代码：


```js
console.log(self);
```


console 中会输出当前 worker 的全局 scope，如下所示：


```js
DedicatedWorkerGlobalScope {
undefined: undefined, Infinity: Infinity, Math: MathConstructor, NaN: NaN, Intl: Object…}
    Infinity: Infinity
    Array: function Array() { [native code] }
      arguments: null
      caller: null
      isArray: function isArray() { [native code] }
      length: 1
      name: "Array"
      observe: function observe() { [native code] }
      prototype: Array[0]
      unobserve: function unobserve() { [native code] }
      \_\_proto\_\_: function Empty() {}
      <function scope>
    ArrayBuffer: function ArrayBuffer() { [native code] }
    Blob: function Blob() { [native code] }
    Boolean: function Boolean() { [native code] }
    DataView: function DataView() { [native code] }
    Date: function Date() { [native code] }
    DedicatedWorkerGlobalScope: function DedicatedWorkerGlobalScope() { [native code] }
    Error: function Error() { [native code] }
// etc. etc.
```


这会列出当前 worker scope 上完整的属性列表，在需要检测某个属性是否可用时非常有用。详细列表也可查阅 Functions and classes available to Web Workers (en-US).

规范
--

| Specification |
| --- |
| HTML Standard # dom-workerglobalscope-self-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

`WorkerGlobalScope` (en-US)
WorkerGlobalScope.importScripts()
=================================

`WorkerGlobalScope` (en-US) 接口的\*\*`importScripts()`\*\* 方法将一个或多个脚本同步导入到工作者的作用域中。

语法
--


```js
self.importScripts('foo.js');
self.importScripts('foo.js', 'bar.js', ...);
```

### 参数

`DOMString` 对象的一个逗号分隔列表，表示要导入的脚本。

### 返回值

*无。*

### 异常

| 异常 | 描述 |
| --- | --- |
| `NetworkError` | 要导入的脚本不具有有效的 JavaScript MIME 类型（有效的类型如 `text/javascript`）。 |

例子
--

如果你在一个名为 foo.js 的单独脚本中编写了一些你想在 worker.js 中使用的功能，则可以使用以下行导入它：


```js
importScripts("foo.js");
```


`importScripts()` 和 `self.importScripts()` 实际上是等效的 — 都表示从工作者的内部范围内调用的 `importScripts()`。

规范
--

| Specification |
| --- |
| HTML Standard # dom-workerglobalscope-importscripts-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `WorkerGlobalScope` (en-US)
* Using Web workers
URLSearchParams.has()
=====================

`URLSearchParams` 的 **`has()`** 方法返回一个布尔值，表示一个指定的键名对应的值是否存在。

语法
--
```

var hasName = URLSearchParams.has(name)
```

### 参数

键名

要查找的参数的键名。

### 返回值

一个 `Boolean`.

示例
--


```js
let url = new URL("https://example.com?foo=1&bar=2");
let params = new URLSearchParams(url.search.slice(1));

params.has("bar") === true; //true
```

规范
--

| Specification |
| --- |
| URL Standard # dom-urlsearchparams-has |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
URLSearchParams.get()
=====================

`URLSearchParams` 接口的**get()**方法返回第一个与搜索参数对应的值**。**

语法
--
```

URLSearchParams.get(name)
```

### 参数

键名

将要返回的参数的键名。

### 返回值

返回一个 `USVString` ；如果没找到，返回 **`null`**.

示例
--

如果一个页面的 URL 是 `https://example.com/?name=Jonathan&age=18` ，你可以这样解析参数“name”和“age”:
```

let params = new URLSearchParams(document.location.search.substring(1));
let name = params.get("name"); // is the string "Jonathan"
let age = parseInt(params.get("age"), 10); // is the number 18
```


查找一个不存在的键名则返回 **`null`**:
```

let address = params.get("address"); // null
```

规范
--

| Specification |
| --- |
| URL Standard # dom-urlsearchparams-get |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
URLSearchParams.sort()
======================

**`URLSearchParams.sort()`** 方法对包含在此对象中的所有键/值对进行排序，并返回 undefined。排序顺序是根据键的 Unicode 代码点。该方法使用稳定的排序算法 (即，将保留具有相等键的键/值对之间的相对顺序)。

Syntax
------
```

searchParams.sort();
```

### Return value

Returns `undefined`.

Example
-------


```js
// Create a test URLSearchParams object
var searchParams = new URLSearchParams("c=4&a=2&b=3&a=1");

// Sort the key/value pairs
searchParams.sort();

// Display the sorted query string
console.log(searchParams.toString());
```


The result is:
```

a=2&a=1&b=3&c=4
```

Specifications
--------------

| Specification |
| --- |
| URL Standard # dom-urlsearchparams-sort |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
URLSearchParams.delete()
========================

**delete()** 是 `URLSearchParams` 接口的一个方法。可以删除指定名称的所有搜索参数。

语法
--
```

URLSearchParams.delete(name)
```

### 参数

name

需要删除的键值名称

### 返回

无

规范
--

| Specification |
| --- |
| URL Standard # dom-urlsearchparams-delete |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
URLSearchParams()
=================

**`URLSearchParams()`** 构造函数创建并返回一个新的 `URLSearchParams` 对象。

**备注：** 此特性在 Web Worker 中可用

语法
--


```js
new URLSearchParams()
new URLSearchParams(options)
```

### 参数

`options` 可选

可以是以下之一：

* 一个字符串，这个字符串从 `application/x-www-form-urlencoded` 的格式解析而来。开头的 `'?'` 字符会被忽略。
* 一系列基于字面量的字符串键值对，或者任何对象（例如 `FormData` 对象），能提供一系列字符串对的迭代器对象。需要注意，`File` 将被序列化为 `[object File]`，而不是它们的文件名（就像 `application/x-www-form-urlencoded` 格式中的那样）。
* 一个由字符串键和字符串值组成的键值对对象。请注意，不支持嵌套。

### 返回值

一个 `URLSearchParams` 实例。

示例
--

下面的例子展示了用各种传入的参数来创建一个 `URLSearchParams` 对象。


```js
// Pass in a string literal
var url = new URL("https://example.com?foo=1&bar=2");
// Retrieve from window.location
var url2 = new URL(window.location);

// Retrieve params via url.search, passed into ctor
var params = new URLSearchParams(url.search);
var params2 = new URLSearchParams(url2.search);

// Pass in a sequence
var params3 = new URLSearchParams([
  ["foo", 1],
  ["bar", 2],
]);

// Pass in a record
var params4 = new URLSearchParams({ foo: 1, bar: 2 });
```


这个示例展示了如何使用来自一个带有查询参数（search parameter）的 URL 构建的查询参数对象创建一个新的 URL。


```js
const url = new URL("https://example.com/?a=hello&b=world");

console.log(url.href);
// https://example.com/?a=hello&b=world

console.log(url.origin);
// https://example.com

const add_params = {
  c: "a",
  d: new String(2),
  e: false.toString(),
};

const new_params = new URLSearchParams([
  ...Array.from(url.searchParams.entries()), // [["a","hello"],["b","world"]]
  ...Object.entries(add_params), // [["c","a"],["d","2"],["e","false"]]
]).toString();
console.log(new_params);
// a=hello&b=world&c=a&d=2&e=false

const new_url = new URL(`${url.origin}${url.pathname}?${new\_params}`);

console.log(new_url.href);
// https://example.com/?a=hello&b=world&c=a&d=2&e=false

// Here it is as a function that accepts (URL, Record<string, string>)
const addSearchParams = (url, params = {}) =>
  new URL(
    `${url.origin}${url.pathname}?${new URLSearchParams([
 ...Array.from(url.searchParams.entries()),
 ...Object.entries(params),
 ])}`,
  );
```

规范
--

| Specification |
| --- |
| URL Standard # dom-urlsearchparams-urlsearchparams |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
URLSearchParams.forEach()
=========================

URLSearchParams 的实例对象上的方法 forEach 允许通过回调函数来遍历 URLSearchParams 实例对象上的键值对

**备注：** 此特性在 Web Worker 中可用

语法
--
```

searchParams.forEach(callback(value,key,searchParams));
```

### 参数

回调函数

该回调函数可以接收到 3 个参数 value,key,searchParams，我们可以在回调函数中对接收到的参数进行处理。而三个参数的含义如下：

`value`

当前遍历到的键值

`key`

当前遍历到的键名

`searchParams`

当前调用 forEach 方法的实例对象

### 返回值

空

例子
--


```js
// 创建 URLSearchParams 对象的实例对象，用于测试
var searchParams = new URLSearchParams("key1=value1&key2=value2");

let returnValue = searchParams.forEach(function (value, key, searchParams) {
  // 打印值
  console.log(value, key, searchParams);
});

// 输出返回值
console.log(returnValue);
```


结果是：
```

value1 key1 当前调用 forEach 方法的实例对象 (也就是 searchParams)
value2 key2 当前调用 forEach 方法的实例对象 (也就是 searchParams)
undefined  // 即没有返回值
```

Specifications
--------------

| Specification |
| --- |
| URL Standard # dom-urlsearchparams-urlsearchparams |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The `URL` interface.
URLSearchParams.entries()
=========================

**`URLSearchParams.entries()`** 方法返回一个`迭代器`，允许遍历该对象中包含的所有键/值对。迭代器返回键/值对，其顺序与它们在查询字符串中出现的顺序相同。每一组键和值都是字符串对象。

**备注：** 该方法在 Web Workers也是可用的。

语法
--
```

searchParams.entries();
```

### 返回值

返回一个 `iterator`.

例子
--


```js
// 创建一个测试用 URLSearchParams 对象
var searchParams = new URLSearchParams("key1=value1&key2=value2");

// 显示键/值对
for (var pair of searchParams.entries()) {
  console.log(pair[0] + ", " + pair[1]);
}
```


结果如下：
```

key1, value1
key2, value2
```

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 其他 URL 相关接口：`URL`, `URLUtils`.
URLSearchParams.toString()
==========================

`URLSearchParams` 接口的 **`toString()`** 方法返回适用在 URL 中的查询字符串。

语法
--
```

URLSearchParams.toString()
```

### 返回值

字符串

实例
--


```js
let url = new URL("https://example.com?foo=1&bar=2");
let params = new URLSearchParams(url.search.slice(1));

//Add a second foo parameter.
params.append("foo", 4);
console.log(params.toString());
//Prints 'foo=1&bar=2&foo=4'.
```

规范
--

| Specification |
| --- |
| URL Standard # urlsearchparams-stringification-behavior |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参考
--

* Other URL-related interfaces: `URL`, `URLUtils`.
* Google Developers: Easy URL manipulation with URLSearchParams
URLSearchParams.append()
========================

**append()** 是 `URLSearchParams` 接口的一个方法。可以插入一个新搜索参数。

语法
--
```

URLSearchParams.append(name, value)
```

### 参数

name

需要插入搜索参数的键名。

value

需要插入搜索参数的值。

### 返回

无

例子
--


```js
let url = new URL("https://example.com?foo=1&bar=2");
let params = new URLSearchParams(url.search.slice(1));

//添加第二个 foo 搜索参数。
params.append("foo", 4);
//查询字符串变成：'foo=1&bar=2&foo=4'
```

规范
--

| Specification |
| --- |
| URL Standard # dom-urlsearchparams-append |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 其他 URL 相关的接口：`URL`, `URLUtils`.
* 谷歌开发者：简单 URL 与 URLSearchParams 操纵
URLSearchParams.values()
========================

URLSearchParams.values() 方法返回一个`iterator`，该遍历器允许遍历对象中包含的所有值。这些值都是`USVString`对象。

**备注：** 该方法在Web Workers中也可使用

语法
--
```

searchParams.values();
```

### 返回值

返回一个`iterator`.

例子
--


```js
// 创建一个测试用 URLSearchParams 对象
var searchParams = new URLSearchParams("key1=value1&key2=value2");

// 输出值
for (var value of searchParams.values()) {
  console.log(value);
}
```


结果如下：
```

value1
value2
```

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

另请参考
----

* 其他 URL 相关接口：`URL`, `URLUtils`.
URLSearchParams.getAll()
========================

`URLSearchParams`接口的 **`getAll()`** 方法以数组的形式返回与指定搜索参数对应的所有值。

语法
--
```

URLSearchParams.getAll(name)
```

### 参数

name

要返回的参数的名称。

### 返回值

一个`USVString`数组。

例子
--
```

let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search.slice(1));

//为 foo 参数添加第二个值
params.append('foo', 4);

console.log(params.getAll('foo')) //输出 ["1","4"].
```

规范
--

| Specification |
| --- |
| URL Standard # dom-urlsearchparams-getall |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
URLSearchParams.keys()
======================

URLSearchParams.keys() 返回一个`iterator`，遍历器允许遍历对象中包含的所有键。这些键都是字符串对象。

**备注：** 该方法在 Web Workers中也可使用

语法
--
```

searchParams.keys();
```

### 返回值

返回一个`iterator`.

例子
--


```js
// 建立一个测试用 URLSearchParams 对象
var searchParams = new URLSearchParams("key1=value1&key2=value2");

// 输出键值对
for (var key of searchParams.keys()) {
  console.log(key);
}
```


结果如下：
```

key1
key2
```

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

另请参考
----

* 其他 URL 相关接口：`URL`, `URLUtils`.
URLSearchParams.set()
=====================

`URLSearchParams`接口的 **`set()`** 方法用于设置和搜索参数相关联的值。如果设置前已经存在匹配的值，该方法会删除多余的，如果将要设置的值不存在，则创建它。

语法
--
```

URLSearchParams.set(name, value)
```

### 参数

键名

将要设置的参数的健值名。

参数值

所要设置的参数值。

### 返回值

Void

例子
--


```js
let url = new URL("https://example.com?foo=1&bar=2");
let params = new URLSearchParams(url.search.slice(1));

//Add a third parameter.
params.set("baz", 3);
```

Specifications
--------------

| Specification |
| --- |
| URL Standard # dom-urlsearchparams-set |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.