recursal/MDN huggingface dataset:
DocumentOrShadowRoot.elementFromPoint()
=======================================

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

`DocumentOrShadowRoot` 接口的 **`elementFromPoint()`** 方法返回给定坐标点下最上层的 `element` 元素。

If the element at the specified point belongs to another document (for example, an iframe's subdocument), the subdocument's parent element is returned (the iframe itself). If the element at the given point is anonymous or XBL generated content, such as a textbox's scroll bars, then the first non-anonymous ancestor element (for example, the textbox) is returned.

如果指定的坐标点在文档的可视范围外，或者两个坐标都是负数，那么结果返回 `null`。

If you need to find the specific position inside the element, use `Document.caretPositionFromPoint()`.

Syntax
------
```

var element = document.elementFromPoint(x, y);
```

### Parameters

x

坐标点的横坐标。

y

坐标点的纵坐标。

### Returns

在给定的坐标点处的顶端 `Element`（译者注：如果元素层叠的话，返回最上层的元素）。

示例
--


```html
<!doctype html>
<html lang="en">
  <head>
    <title>elementFromPoint example</title>

    <script>
 function changeColor(newColor) {
 elem = document.elementFromPoint(2, 2);
 elem.style.color = newColor;
 }
 </script>
  </head>

  <body>
    <p id="para1">Some text here</p>
    <button onclick="changeColor('blue');">blue</button>
    <button onclick="changeColor('red');">red</button>
  </body>
</html>
```

### Demo

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

| Specification |
| --- |
| CSSOM View Module # dom-document-elementfrompoint |

Browser Compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Document：fullscreenchange 事件
============================

`fullscreenchange` 事件会在浏览器进入或退出全屏模式后立即触发。

该事件被发送到正在进入或退出全屏模式的 `Element`，并且此事件会向上冒泡到 `Document` 对象。

要确定 `Element` 是进入还是退出全屏模式，请检查 `Document.fullscreenElement` 的值：如果此值为 `null`，则表示该元素正在退出全屏模式，否则表示该元素正在进入全屏模式。

此事件不能被取消。

语法
--

在诸如 `addEventListener()` 之类的方法中使用事件名称，或设置事件处理程序属性。


```js
addEventListener("fullscreenchange", (event) => {});

onfullscreenchange = (event) => {};
```

事件类型
----

通用的 `Event` 类型

示例
--

在此示例中，向 `Document` 添加了 `fullscreenchange` 事件处理程序。

如果用户单击“切换全屏模式”按钮，`click` 处理程序将切换 `div` 的全屏模式。如果 `document.fullscreenElement` 具有值，则会退出全屏模式。否则，div 将被置于全屏模式。

请记住，在处理 `fullscreenchange` 事件时，元素的状态已经发生了变化。因此，如果更改是为了全屏模式，`document.fullscreenElement` 将指向现在处于全屏模式的元素。另一方面，如果 `document.fullscreenElement` 为 `null`，则全屏模式已被取消。

对于示例代码，这意味着，如果元素当前处于全屏模式，则 `fullscreenchange` 处理程序将将全屏元素的 `id` 记录在控制台中。如果 `document.fullscreenElement` 为 `null`，则代码记录消息表示更改是为了退出全屏模式。

### HTML


```html
<h1>fullscreenchange 事件示例</h1>
<div id="fullscreen-div">
  <button id="toggle-fullscreen">切换全屏模式</button>
</div>
```

### JavaScript


```js
function fullscreenchanged(event) {
  // 如果有元素处于全屏模式，则 document.fullscreenElement 将指向该元素。如果没有元素处于全屏模式，则该属性的值为 null。
  if (document.fullscreenElement) {
    console.log(
      `Element: ${document.fullscreenElement.id} entered fullscreen mode.`,
    );
  } else {
    console.log("Leaving fullscreen mode.");
  }
}

document.addEventListener("fullscreenchange", fullscreenchanged);
// 或
document.onfullscreenchange = fullscreenchanged;

// 在 toggle 按钮被点击时，将会进入或退出全屏模式
document
  .getElementById("toggle-fullscreen")
  .addEventListener("click", (event) => {
    if (document.fullscreenElement) {
      // exitFullscreen 方法只能在 Document 对象上使用。
      document.exitFullscreen();
    } else {
      el.requestFullscreen();
    }
  });
```

规范
--

| Specification |
| --- |
| Fullscreen API Standard # handler-document-onfullscreenchange |

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

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

参见
--

* `fullscreenerror`
* `Element`：`fullscreenchange` 事件
* Fullscreen API
* Fullscreen API 指南
Document.pictureInPictureElement
================================

只读属性 **`Document.pictureInPictureElement`** 返回当前文档中以画中画模式呈现的 `Element`，如果没有使用画中画模式，则返回 `null`。

尽管这个属性是只读的，但是即使它被修改（甚至是在严格模式下），也不会抛出错误；setter 是无操作的并且将会被忽略。

值
-

对于当前处在画中画模式 `Element` 对象的引用；如果文档当前并未使用画中画模式，则返回值是 `null`。

示例
--

此示例展示了一个 `exitPictureInPicture()` 函数，该函数的运行由 `pictureInPictureElement` 的返回值决定。如果文档处于画中画模式（`pictureInPictureElement` 不是 `null`），`Document.exitPictureInPicture()` 将被运行以退出画中画模式。


```js
function exitPictureInPicture() {
  if (document.pictureInPictureElement) {
    document.exitPictureInPicture();
  }
}
```

规范
--

| Specification |
| --- |
| Picture-in-Picture # ref-for-dom-documentorshadowroot-pictureinpictureelement①⑤ |

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

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

参见
--

* `HTMLVideoElement.requestPictureInPicture()`
* `HTMLVideoElement.disablePictureInPicture`
* `Document.pictureInPictureEnabled`
* `Document.exitPictureInPicture()`
* `:picture-in-picture`
Document：readystatechange 事件
============================

当文档的 `readyState` 属性发生改变时，会触发 `readystatechange` 事件。

|  |  |
| --- | --- |
| 是否冒泡 | 否 |
| 是否可取消 | 否 |
| 接口 | `Event` |
| Event handler 属性 | `onreadystatechange` |

示例
--

### 实时演示

#### HTML


```html
<div class="controls">
  <button id="reload" type="button">Reload</button>
</div>

<div class="event-log">
  <label>Event log:</label>
  <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea>
</div>
```


```
body {
  display: grid;
  grid-template-areas: "control log";
}

.controls {
  grid-area: control;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-log {
  grid-area: log;
}

.event-log-contents {
  resize: none;
}

label,
button {
  display: block;
}

#reload {
  height: 2rem;
}
```


#### JavaScript


```js
const log = document.querySelector(".event-log-contents");
const reload = document.querySelector("#reload");

reload.addEventListener("click", () => {
  log.textContent = "";
  window.setTimeout(() => {
    window.location.reload(true);
  }, 200);
});

window.addEventListener("load", (event) => {
  log.textContent = log.textContent + "load\n";
});

document.addEventListener("readystatechange", (event) => {
  log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
});

document.addEventListener("DOMContentLoaded", (event) => {
  log.textContent = log.textContent + `DOMContentLoaded\n`;
});
```


#### 结果

规范
--

| Specification |
| --- |
| HTML Standard # event-readystatechange |

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

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

参见
--

* 相关事件：`DOMContentLoaded`、`load`、`beforeunload`、`unload`
Document.lastStyleSheetSet
==========================

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

**`Document.lastStyleSheetSet`** 返回最后一个启用的样式表集合。当 `document.selectedStyleSheetSet` 属性发生变化时，这个属性的值就会随之发生变化。

语法
--
```

var lastStyleSheetSet = document.lastStyleSheetSet
```


返回时，*lastStyleSheetSet* 指示最近设置的样式表。如果当前样式表集尚未通过设置更改 `document.selectedStyleSheetSet`, 则返回值为 `null`。

**备注：** 当`document.enableStyleSheetsForSet()` (en-US) 被执行时，该值不会该变。

示例
--


```js
let lastSheetSet = document.lastStyleSheetSet;

if (!lastSheetSet) {
  lastSheetSet = "Style sheet not yet changed";
} else {
  console.log("The last style sheet set is: " + lastSheetSet);
}
```

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

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

参见
--

* `document.preferredStyleSheetSet`
* `document.selectedStyleSheetSet`
* `document.styleSheetSets`
* `document.enableStyleSheetsForSet()` (en-US)
Document.scrollingElement
=========================

**`scrollingElement`**（`Document` 的只读属性）返回滚动文档的 `Element` 对象的引用。在标准模式下，这是文档的根元素， `document.documentElement`。

当在怪异模式下，`scrollingElement` 属性返回 HTML `body` 元素（若不存在返回 null）。

语法
--
```

var element = document.scrollingElement;
```

示例
--


```js
var scrollElm = document.scrollingElement;
scrollElm.scrollTop = 0;
```

规范
--

| Specification |
| --- |
| CSSOM View Module # dom-document-scrollingelement |

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

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

**`createCDATASection()`** 创建并返回一个新的 CDATA 片段节点。

语法
--
```

var CDATASectionNode = document.createCDATASection(data);
```


* *CDATASectionNode* 是一个 CDATA 片段节点。
* *data* 包含了要被添加至 CDATA 片段的数据的字符串。
示例
--


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

var cdata = docu.createCDATASection("Some <CDATA> data & then some");

docu.getElementsByTagName("xml")[0].appendChild(cdata);

alert(new XMLSerializer().serializeToString(docu));
// Displays: <xml><![CDATA[Some <CDATA> data & then some]]></xml>
```

备注
--

* This will only work with XML, not HTML documents (as HTML documents do not support CDATA sections); attempting it on an HTML document will throw `NOT_SUPPORTED_ERR`.
* Will throw a `NS_ERROR_DOM_INVALID_CHARACTER_ERR` exception if one tries to submit the closing CDATA sequence ("`]]>`") as part of the data, so unescaped user-provided data cannot be safely used without with this method getting this exception (`createTextNode()` can often be used in its place).
规范
--

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Document：pointerLockElement 属性
==============================

`Document` 接口的 `pointerLockElement` 只读属性提供了指针锁定时鼠标事件的目标元素。如果指针处于锁定等待中、指针没有被锁定或目标元素在另外一个文档中，返回 `null`。

值
-

一个 `Element` 或 `null`。

示例
--

确定一个 canvas 元素当前是否被指针锁定。


```js
if (document.pointerLockElement === canvasElement) {
  console.log("指针当前已锁定");
  // 做一些有用的响应
} else {
  console.log("指针当前已解锁");
  // 做一些有用的响应
}
```

规范
--

| Specification |
| --- |
| Pointer Lock 2.0 # dom-documentorshadowroot-pointerlockelement |

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

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

参见
--

* `Document.exitPointerLock()`
* `Element.requestPointerLock()`
* Pointer Lock
document.images
===============

`Document` 接口的只读属性 images 返回当前文档中所有 image 元素的集合。

语法
--
```

var imageCollection = document.images;
```

### 值

一个 `HTMLCollection`，提供了包含在该文档中的所有 images 元素实时的列表。集合中的每条代表了一个单 image 元素的`HTMLImageElement`

备注
--

你可以在返回的结果中使用 JavaScript 数组符号 ('[]'，译注)，或者`item()` 方法去获取集合中的每个元素。下面方法是等价的：


```js
firstImage = imageCollection.item(0);

firstImage = imageCollection[0];
```

例子
--

该例是一次通过遍历图片列表找到名称为`"banner.gif"`的图片。


```js
var ilist = document.images;
for (var i = 0; i < ilist.length; i++) {
  if (ilist[i].src == "banner.gif") {
    // 发现了 banner 图片
  }
}
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-document-images-dev |

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

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

将外部文档的一个节点拷贝一份，然后可以把这个拷贝的节点插入到当前文档中。

语法
--


```js
importNode(externalNode)
importNode(externalNode, deep)
```


`externalNode`

导入当前文档的外部 `Node` 或 `DocumentFragment`。

`deep` 可选

一个布尔值，默认为 `false`。表明是否要导入 `externalNode` 的整个 DOM 子树。

* `deep` 设置为 `true`，则拷贝 `externalNode` 和它的所有后代。
* `deep` 设置为 `false`，则仅拷贝 `externalNode`——新的节点没有后代。

示例
--


```js
const iframe = document.querySelector("iframe");
const oldNode = iframe.contentWindow.document.getElementById("myNode");
const newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);
```

备注
--

源节点不会从外部文档中删除，被导入的节点是源节点的一个拷贝。

将外部文档的节点插入当前文档之前，你必须使用 `document.importNode()` 从外部文档导入源节点，或者使用 `document.adoptNode()`导入源节点，想要了解更多的 `Node.ownerDocument` 问题，请参考 W3C DOM FAQ.

即使你不执行导入动作，就执行插入外部文档中的节点.Firefox 目前也不会报错 (如果严格按标准执行，很多已有的网站都无法正常运行). 我们鼓励开发者严格按标准修改自己已有的不符合上述标准的代码。

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

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

规范
--

* DOM Level 2 Core: Document.importNode
* DOM4 (draft): Document.importNode
参见
--

* `document.adoptNode()`
document.createExpression
=========================

该方法将编译生成一个 `XPathExpression` (en-US)，可以于来多次执行。

你必须在将要运行表达式的同一文档上调用此方法。

### 语法


```js
createExpression(xpathText, namespaceURLMapper)
```

### 参数

`xpathText`

一个将被编译的 XPath 字符串表达式。

`namespaceURLMapper`

将命名空间前缀映射到命名空间 URL 的函数（若不需要，则为 `null`）。

### 返回值

`XPathExpression` (en-US)示例
--


```js
const xpathExpr = document.createExpression("//div");
const xpathResult = xpathExpr.evaluate(document); // 返回一个 XPathResult 对象
const nodeContext = document.querySelector("nav");
// 重复使用 XPathExpression "xpathExpr"
const otherResult = xpathExpr.evaluate(nodeContext); // 返回一个 XPathResult 对象
```

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

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

参见
--

* `Document.evaluate()`
* `XPathExpression` (en-US)
Document.createElementNS()
==========================

创建一个具有指定的命名空间 URI 和限定名称的元素。

要创建一个元素而不指定命名空间 URI，请使用 createElement 方法。

语法
--


```js
let element =
document.createElementNS(namespaceURI, qualifiedName[, options]);
```

### 参数

`namespaceURI`

指定与元素相关联的命名空间 URI的字符串。创建的元素的namespaceURI (en-US)属性使用 namespaceURI 的值进行初始化。参见有效的命名空间 URL。

`qualifiedName`

指定要创建的元素的类型的字符串。创建的元素的nodeName (en-US)属性使用 qualifiedName 的值进行初始化。

`options`可选的

 一个可选的包含单个属性的 ElementCreationOptions 对象，其值是预先使用 customElements.define() 定义的自定义元素的标签名称。为了向后兼容自定义元素规范的早期版本，一些浏览器允许你在此使用字符串替代对象，其中字符串的值是自定义元素的标签名称。有关如何使用此参数的详情，请参阅原生 HTML 元素。
 新元素将被赋予一个属性，其值是自定义元素的标签名称。自定义元素是实验中的功能，目前仅在某些浏览器中可用。


### 返回值

新元素。

有效的命名空间 URI
-----------

* HTML - 参阅 `http://www.w3.org/1999/xhtml`
* SVG - 参阅 `http://www.w3.org/2000/svg`
* XBL - 参阅 `http://www.mozilla.org/xbl`
* XUL - 参阅 `http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul`
示例
--

在XHTML命名空间中创建一个新的<div>元素并将其添加到 vbox 的结尾处。虽然这不是一个非常有用的XUL文档，它演示了在单个文档中使用来自两个不同命名空间的元素：


```xml
<?xml version="1.0"?>
<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
 xmlns:html="http://www.w3.org/1999/xhtml"
 title="||Working with elements||"
 onload="init()">

<script type="text/javascript"><![CDATA[
 var container;
 var newdiv;
 var txtnode;

 function init(){
 container = document.getElementById("ContainerBox");
 newdiv = document.createElementNS("http://www.w3.org/1999/xhtml","div");
 txtnode = document.createTextNode("这是使用 createElementNS 和 createTextNode 动态构造的文本，然后使用 appendChild 插入到文档中。");
 newdiv.appendChild(txtnode);
 container.appendChild(newdiv);
 }

]]></script>

 <vbox id='ContainerBox' flex='1'>
  <html:div>
   此页面上的脚本将添加以下动态内容：
  </html:div>
 </vbox>

</page>
```


**备注：** 上面给出的示例中使用了在 XHTML 文档中不推荐的内联脚本。这个特定的示例实际上是一个嵌入 XHTML 的 XUL 文档，然而，仍然建议适用。

规范
--

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

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

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

参见
--

* `document.createElement()`
* `document.createTextNode()`
* `Element.namespaceURI`
* Namespaces in XML
Document.referrer
=================

**`Document.referrer`** 返回的是一个 URI，当前页面就是从这个 URI 所代表的页面跳转或打开的。

值
-

如果用户直接打开了这个页面（不是通过页面跳转，而是通过地址栏或者书签等打开的），则该属性为空字符串。由于该属性只是返回一个字符串，所以不能够通过该属性引用页面的 DOM。

在 `<iframe>` 中，`Document.referrer` 会初始化为父窗口 `Window.location` 的 `href`。

规范
--

| Specification |
| --- |
| HTML Standard # dom-document-referrer-dev |

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

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

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

这个方法用来在早期版本的 Mozilla 中清除整个指定文档。

在最近版本的基于 Mozilla 的应用以及 Internet Explorer 和 Netscape 4 中这个方法什么也不做

语法
--
```

document.clear()
```

规范
--

* HTML5
Document.timeline
=================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

`Document` 接口的 `timeline` 只读属性表示当前文档的默认时间轴。此时间轴是 `DocumentTimeline` (en-US) 的一个特殊实例，它会在网页加载时自动创建。

此时间轴对于每个文档（`document`）来说都是唯一的，并在文档的生命周期中保持不变，包括调用 `Document.open()`。

该时间线的时间值被计算为与全局时钟的固定偏移，使得零时间对应于`navigationStart`时刻加上称为原始时间的带符号的 delta。在建立导航开始时刻之前，文档时间线是不活动的。

**备注：** 与非活动文档相关联的文档时间轴也被视为是**不活动的**。

语法
--


```js
var pageTimeline = document.timeline;
var thisMoment = pageTimeline.currentTime;
```

### 值

一个 `DocumentTimeline` (en-US) 对象。

规则
--

| Specification |
| --- |
| Web Animations # dom-document-timeline |

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

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

参见
--

* Web Animations API
* `AnimationTimeline`
* `AnimationTimeline.currentTime` (en-US)
* `DocumentTimeline` (en-US)
Document.hasStorageAccess()
===========================

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

`Document`的\*\*`hasStorageAccess()`\*\* 方法返回了一个`Promise`来判断该文档是否有访问第一方储存的权限。
通过 Storage Access API (en-US) 获取更多信息。

语法
--
```

var promise = document.hasStorageAccess();
```

### 参数

None.

### 返回值

一个用来判断文档是否有权利访问其第一方存储的`Promise` 。

If the promise gets resolved and a user gesture event was being processed when the function was originally called, the resolve handler will run as if a user gesture was being processed, so it will be able to call APIs that require user activation.

Examples
--------


```js
document.hasStorageAccess().then((hasAccess) => {
  if (hasAccess) {
    // storage access has been granted already.
  } else {
    // storage access hasn't been granted already;
    // you may want to call requestStorageAccess().
  }
});
```

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

The API is currently only at the proposal stage — the standardization process has yet to begin. You can currently find specification details of the API at Apple's Introducing Storage Access API blog post, and WHATWG HTML issue 3338 — Proposal: Storage Access API.

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

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

See also
--------

Storage Access API (en-US)
Document.preferredStyleSheetSet
===============================

**`preferredStyleSheetSet`** 属性会依网页作者的喜好回传阶层样式集。

语法
--
```

preferredStyleSheetSet = document.preferredStyleSheetSet
```


`preferredStyleSheetSet` 指的是作者偏好的阶层样式集。内容取决于阶层样式集的次序与 `Default-Style` HTTP 标头内容。

如果作者没有定义偏好的阶层样式集，就会回传空白的 ("") 字符串。

范例
--


```js
if (document.preferredStyleSheetSet) {
  console.log(
    "The preferred style sheet set is: " + document.preferredStyleSheetSet,
  );
} else {
  console.log("There is no preferred style sheet.");
}
```

规范
--

* HTML5: Alternate Style Sheets
浏览器相容性
------

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

参见
--

* `document.lastStyleSheetSet`
* `document.selectedStyleSheetSet`
* `document.styleSheetSets`
* `document.enableStyleSheetsForSet()` (en-US)
Document.getElementsByName()
============================

根据给定的`name` (en-US) 返回一个在 (X)HTML document 的节点列表集合。

语法
--
```

elements = document.getElementsByName(name)
```


* `elements` 是一个实时更新的 `NodeList` 集合。当文档中有同一个 name 属性的元素被添加或移除时，这个集合会自动更新。
* `name` 是元素的 `name` 属性的值。
例子
--


```html
<!doctype html>
<html lang="en">
  <head>
    ...
  </head>

  <body>
    <form name="up"><input type="text" /></form>
    <div name="down"><input type="text" /></div>

    <script>
 var up\_forms = document.getElementsByName("up");
 console.log(up\_forms[0].tagName); // returns "FORM"
 </script>
  </body>
</html>
```

注释
--

`name` (en-US) 属性只有在 (X)HTML 文档中可用。

该方法返回一个 live 的 `NodeList` 集合，这个集合包含 `name` (en-US) 属性为指定值的所有元素，例如`<meta>` 、`<object>`，甚至那些不支持 `name` (en-US) 属性但是添加了 `name` (en-US) 自定义属性的元素也包含其中。

**警告：** getElementsByName 在不同的浏览器其中工作方式不同。在 IE 和 Opera 中，getElementsByName() 方法还会返回那些 `id` 为指定值的元素。所以你要小心使用该方法，最好不要为元素的 `name` (en-US) 和 `id` 赋予相同的值。

**警告：** IE 和 Edge 都返回一个 `HTMLCollection`, 而不是`NodeList` 。

规范
--

| Specification |
| --- |
| HTML Standard # dom-document-getelementsbyname-dev |

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

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

参阅
--

* `document.getElementById()` 通过 `id` 返回对元素的引用
* `document.querySelector()` 通过 CSS 选择器返回对元素的引用，例如 `'div.myclass'`
document.URL
============

### 概述

返回当前文档的 URL 地址

### 语法
```

string = document.URL
```

### 备注

`该属性的值和`DOM Level 0 中的`document.location.href` 属性的值是相等的。然而 `document.location.href` 是可写的，`document.URL` 是只读的。

`document.documentURI` 也返回与该属性相同的值，不过它在非 HTML 文档中也可以使用。

### 规范

DOM Level 2 HTML: URL
fonts
=====

`Document`的 **`fonts`** 属性接口返回文档的 `FontFaceSet` 接口。

语法
--
```

let fontFaceSet = document.fonts;
```

### 值

返回值是文档的 `FontFaceSet` 接口。`FontFaceSet` 接口对 加载新字体、检查已加载字体的加载状态 来说非常有用。

例子
--

### 在所有字体加载完成后进行操作


```js
document.fonts.ready.then(function () {
  // 字体加载完成后的逻辑
});
```

说明
--

| Specification |
| --- |
| CSS Font Loading Module Level 3 # FontFaceSet-interface |

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

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

参考资料
----

* `FontFaceSet` interface
* `FontFace`
Document.queryCommandSupported()
================================

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

**`Document.queryCommandSupported()`** 方法确定浏览器是否支持指定的编辑指令。

语法
--
```

isSupported = document.queryCommandSupported(command);
```


`command`

待确定是否支持的命令。

如果命令不被支持，将触发 `NotSupportedError` 异常。

另外：

* 如果命令没有值或未启用，将返回空字符串。
* "fontSize" 命令将被特殊处理，如果值被重写，它将返回最近似标准尺寸的整数倍像素大小。
* 如果命令的值已被重写，将由重写返回。
* 否则，此命令返回命令的值，如同 `document.queryCommandValue()`.
示例
--


```js
var flg = document.queryCommandSupported("SelectAll");

if (flg) {
  // ...Do something
}
```

规范
--

此特性不属于任何规范，也不再有望被标准化。

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

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

参见
--

* `document.execCommand`
Document：createNodeIterator() 方法
================================

**`Document.createNodeIterator()`** 方法返回一个新的 `NodeIterator` 对象。

语法
--


```js
createNodeIterator(root)
createNodeIterator(root, whatToShow)
createNodeIterator(root, whatToShow, filter)
```

### 参数

`root`

`NodeIterator` 遍历起始处的根节点。

`whatToShow` 可选

是一个可选的无符号长整型（`unsigned long`），是由节点过滤器（`NodeFilter`）中的常量属性定义的位掩码。这是筛选特定类型节点的便捷方式。其默认值是 `0xFFFFFFFF`，代表 `SHOW_ALL` 常量。

| 常量 | 数字值 | 描述 |
| --- | --- | --- |
| `NodeFilter.SHOW_ALL` | `4294967295` (即`unsigned long` 的最大值) | 显示所有节点。 |
| `NodeFilter.SHOW_ATTRIBUTE` 
已弃用
 | `2` | 显示 `Attr` 特性节点。这仅在创建以 `Attr` 特性节点为根节点的 `TreeWalker` 时有意义；在这种情况下，这意味着该特性节点会出现在迭代或遍历的第一位。因为特性节点不会是其他节点的子代，遍历文档树时，特性节点不会出现。 |
| `NodeFilter.SHOW_CDATA_SECTION` 
已弃用
 | `8` | 显示 `CDATASection` 节点。 |
| `NodeFilter.SHOW_COMMENT` | `128` | 显示 `Comment` 节点。 |
| `NodeFilter.SHOW_DOCUMENT` | `256` | 显示 `Document` 节点。 |
| `NodeFilter.SHOW_DOCUMENT_FRAGMENT` | `1024` | 显示 `DocumentFragment` 节点。 |
| `NodeFilter.SHOW_DOCUMENT_TYPE` | `512` | 显示 `DocumentType` 节点。 |
| `NodeFilter.SHOW_ELEMENT` | `1` | 显示 `Element` 节点。 |
| `NodeFilter.SHOW_ENTITY` 
已弃用
 | `32` | 旧的，已无法再使用。 |
| `NodeFilter.SHOW_ENTITY_REFERENCE` 
已弃用
 | `16` | 旧的，已无法再使用。 |
| `NodeFilter.SHOW_NOTATION` 
已弃用
 | `2048` | 旧的，已无法再使用。 |
| `NodeFilter.SHOW_PROCESSING_INSTRUCTION` | `64` | 显示 `ProcessingInstruction` (en-US) 节点。 |
| `NodeFilter.SHOW_TEXT` | `4` | 显示 `Text` (en-US) 节点。 |

`filter` 可选

一个回调函数或一个具有 `acceptNode()` 方法的对象。从根节点开始到子树中的每个节点都会调用一次该函数或方法，哪些节点需要进入迭代节点列表等待调用则取决于 whatToShow 标志。该方法需要返回下列常量之一：`NodeFilter.FILTER_ACCEPT`、`NodeFilter.FILTER_REJECT` 或 `NodeFilter.FILTER_SKIP`。参见示例。

### 返回值

一个新的 `NodeIterator` 对象。

示例
--


```js
const nodeIterator = document.createNodeIterator(
  document.body,
  NodeFilter.SHOW\_ELEMENT,
  (node) =>
    node.nodeName.toLowerCase() === "p"
      ? NodeFilter.FILTER\_ACCEPT
      : NodeFilter.FILTER\_REJECT,
);
const pars = [];
let currentNode;

while ((currentNode = nodeIterator.nextNode())) {
  pars.push(currentNode);
}
```


相同，但使用具有 `acceptNode()` 方法的对象：


```js
const nodeIterator = document.createNodeIterator(
  document.body,
  NodeFilter.SHOW\_ELEMENT,
  {
    acceptNode(node) {
      return node.nodeName.toLowerCase() === "p"
        ? NodeFilter.FILTER\_ACCEPT
        : NodeFilter.FILTER\_REJECT;
    },
  },
);
const pars = [];
let currentNode;

while ((currentNode = nodeIterator.nextNode())) {
  pars.push(currentNode);
}
```

规范
--

| Specification |
| --- |
| DOM Standard # dom-document-createnodeiterator |

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

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