recursal/MDN huggingface dataset:
Element.slot
============

`Element`接口的 **`slot`** 属性会返回已插入元素所在的 Shadow DOM slot 的名称。

Slot 是存在于web component内部的占位符，用户可以通过 slot 属性在 web component 的内部插入自定义的标记文本。（详见 Using template and slot）

语法
--
```

var aString = element.slot
element.slot = aString
```

### 值

`DOMString`.

示例
--

在示例 simple-template example (在线查看) 中，我们创建了一个简单的自定义元素叫做 `<my-paragraph>` ，并为它添加了 shadow root，然后使用一个包含以 `my-text`为名称的 slot 的 template 来填充它。

当 `<my-paragraph>` 在文档中被使用时，slot 标签中的内容会被填充到拥有`slot="my-text"`属性的元素之中，我们称这种元素为 slotable element。（事实上可以看作是拥有 slot 属性的元素被填充到了 template 中有`<slot>`标签存在的地方）请看下面的示例：


```js
<my-paragraph>
  <span slot="my-text">Let's have some different text!</span>
</my-paragraph>
```


在 Javascript 代码中我们获取到上面代码中的 span 的引用，然后将对应的 `<slot>` 元素的引用的名称打印在控制台中。


```js
let slottedSpan = document.querySelector("my-paragraph span");
console.log(slottedSpan.slot); // logs 'my-text'
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-slot① |

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

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

`removeAttributeNode` 从当前的 element(元素节点) 删除指定的属性

Syntax
------
```

removedAttr = element.removeAttributeNode(attributeNode)
```


* `attributeNode` 是需要被删除的 Attr 节点。
* `removedAttr` 是被删除了的 Attr 节点。
例如
--
```

// <div id="top" align="center" />
var d = document.getElementById("top");
// getAttributeNode 返回指定元素的指定属性，返回值是 Attr 节点类型
var d_align = d.getAttributeNode("align");
d.removeAttributeNode(d_align);
//  现在 align 被删除了：<div id="top" />
```

注意
--

如果删除有默认值的属性，相当于将属性值替换为默认值。属性只有在具有同样的命名空间、本地名称以及原始前缀时，才会在被删除的时候替换为默认值。

不像 setAttributeNode 和 setAttributeNodeNS 配对使用那样，需要知道要替换哪个现有属性。removeAttributeNode 没有那样的要求，也没有 removeAttributeNodeNS。removeAttributeNode 可以删除命名空间以及非命名空间的属性。

DOM methods dealing with element's attributes:

| Not namespace-aware, most commonly used methods | Namespace-aware variants (DOM Level 2) | DOM Level 1 methods for dealing with `Attr` nodes directly (seldom used) | DOM Level 2 namespace-aware methods for dealing with `Attr` nodes directly (seldom used) |
| --- | --- | --- | --- |
| `setAttribute` (DOM 1) | `setAttributeNS` | `setAttributeNode` | `setAttributeNodeNS` |
| `getAttribute` (DOM 1) | `getAttributeNS` (en-US) | `getAttributeNode` | `getAttributeNodeNS` |
| `hasAttribute` (DOM 2) | `hasAttributeNS` | - | - |
| `removeAttribute` (DOM 1) | `removeAttributeNS` | `removeAttributeNode` | - |

规范
--

DOM Level 2 Core: removeAttributeNode (DOM Level 1 Core 里面的介绍)
Element：contentvisibilityautostatechange 事件
===========================================

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

**`contentvisibilityautostatechange`** 事件会在设置了 `content-visibility: auto` 的元素开始或不再与用户相关，且正在跳过其内容时触发。

在元素不再与用户相关时（在开始和结束事件之间），用户代理会跳过元素的渲染（包括布局和绘制），这可以显著提高页面渲染速度。`contentvisibilityautostatechange` 事件为应用代码在不需要时开始或停止渲染过程（如在 `<canvas>` 上绘画）提供了便利，进而节约了处理能力。

注意因为元素内容即使被隐藏不可见也仍将保持语义相关性（例如使用辅助技术的用户），所以不应使用此事件跳过重要的 DOM 语义更新。

语法
--

在 `addEventListener()` 等方法中使用事件名称，或设置事件处理器属性。


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


**备注：** 事件的类型为 `ContentVisibilityAutoStateChangeEvent`。

示例
--


```js
const canvasElem = document.querySelector("canvas");

canvasElem.addEventListener("contentvisibilityautostatechange", stateChanged);
canvasElem.style.contentVisibility = "auto";

function stateChanged(event) {
  if (event.skipped) {
    stopCanvasUpdates(canvasElem);
  } else {
    startCanvasUpdates(canvasElem);
  }
}

// 在画布需要开始更新时调用此方法。
function startCanvasUpdates(canvas) {
  // …
}

// 在画布需要停止更新时调用此方法。
function stopCanvasUpdates(canvas) {
  // …
}
```

规范
--

| Specification |
| --- |
| CSS Containment Module Level 2 # content-visibility-auto-state-change |

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

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

参见
--

* `ContentVisibilityAutoStateChangeEvent`
* CSS 局限
* `content-visibility` 属性
* `contain` 属性
NonDocumentTypeChildNode.previousElementSibling
===============================================

### 概述

**`previousElementSibling`** 返回当前元素在其父元素的子元素节点中的前一个元素节点，如果该元素已经是第一个元素节点，则返回 `null`, 该属性是只读的。

### 语法
```

var prevNode = elementNodeReference.previousElementSibling;
```

### 例子


```html
<div id="div-01">Here is div-01</div>
<div id="div-02">Here is div-02</div>
<li>This is a list item</li>
<li>This is another list item</li>
<div id="div-03">Here is div-03</div>

<script type="text/javascript">
 var el = document.getElementById("div-03").previousElementSibling;
 document.write("<p>Siblings of div-03</p><ol>");
 while (el) {
 document.write("<li>" + el.nodeName + "</li>");
 el = el.previousElementSibling;
 }
 document.write("</ol>");
</script>
```


上面的例子会输出以下内容：
```

Siblings of div-03

   1. LI
   2. LI
   3. DIV
   4. DIV
```

### 浏览器兼容性

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

**`Element.attributes`** 属性返回一个注册到指定节点的所有属性节点的实时集合。该集合是一个 `NamedNodeMap` 对象，不是 `Array`，所以它没有 `Array` 的方法，其包含的 `Attr` 节点的索引顺序随浏览器不同而不同。更确切地说，`attributes` 是字符串形式的键值对，代表了那个属性的任何信息。

值
-

一个 `NamedNodeMap` 对象。

示例
--

### 基本示例


```js
// 获取文档中的第一个 <p> 元素
const paragraph = document.querySelector("p");
const attributes = paragraph.attributes;
```

### 遍历元素的属性

你可以使用 `for...of` 枚举一个元素的所有属性。

在以下例子中会遍历文档中 id 为“paragraph”的元素的属性节点，并打印出来。


```html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <title>属性示例</title>
    <script>
 function listAttributes() {
 const paragraph = document.getElementById("paragraph");
 const result = document.getElementById("result");
 // 首先，确定那个段落有一些属性
 if (paragraph.hasAttributes()) {
 let output = "Attributes of first paragraph:\n";
 for (const attr of paragraph.attributes) {
 output += `${attr.name} -> ${attr.value}\n`;
 }
 result.textContent = output;
 } else {
 result.textContent = "没有可显示的属性";
 }
 }
 </script>
  </head>

  <body>
    <p id="paragraph" style="color: green;">示例段落</p>
    <form action="">
      <p>
        <input type="button" value="显示第一个属性名及其值"
 onclick="listAttributes();">
        <pre id="result"></pre>
      </p>
    </form>
  </body>
</html>
```

规范
--

| Specification |
| --- |
| DOM Standard # dom-element-attributes |

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

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

参见
--

* `NamedNodeMap`，返回对象的接口
* 跨浏览器兼容性问题可参考：quirksmode
Element.scroll()
================

**`scroll()`** 方法是用于在给定的元素中滚动到某个特定坐标的 `Element` 接口。

语法
--


```js
scroll(x-coord, y-coord)
scroll(options)
```

### 参数

`x-coord`

你想要显示在左上角的元素沿水平轴的像素。

`y-coord`

你想要显示在左上角的元素沿垂直轴的像素。

- 或者 -

`options`

包含以下参数的对象：

`top`

指定沿 Y 轴滚动窗口或元素的像素数。

`left`

指定沿 X 轴滚动窗口或元素的像素数。

`behavior`

`smooth` 表示平滑滚动并产生过渡效果，`auto` 或缺省值会直接跳转到目标位置，没有过渡效果。


### 返回值

无 (`undefined`)。

示例
--


```js
// 将元素沿垂直方向向下滚动 1000 个像素
element.scroll(0, 1000);
```


使用 `options`:


```js
element.scroll({
  top: 100,
  left: 100,
  behavior: "smooth",
});
```

规范
--

| Specification |
| --- |
| CSSOM View Module # dom-element-scroll |

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

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

`Element` 接口的 **`id`** 属性表示元素的标识符，反映了全局属性 **`id`** 的值。

如果 `id` 的值不为空字符串，则在同一文档中必须唯一。

这有助于让常用的 `getElementById()` 方法通过 `id` 的值找到对应的单个元素。另外，在使用 CSS 为文档添加样式时，ID 可作为选择器使用。

**备注：** 虽然 ID 是区分大小写的，但是不应该同时使用仅大小写不同的 ID 值。

值
-

一个字符串。

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-id① |

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

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

参见
--

* DOM 全局属性 **id**。
Element: contextmenu event
==========================

**`contextmenu`** 事件会在用户尝试打开上下文菜单时被触发。该事件通常在鼠标点击右键或者按下键盘上的菜单键时被触发，如果使用菜单键，该上下文菜单会被展示 到所聚焦元素的左下角，但是如果该元素是一棵 DOM 树的话，上下文菜单便会展示在当前这一行的左下角。

任何没有被禁用的鼠标右击事件 (通过调用事件的 `preventDefault()` 方法) 将会使得 `contextmenu` 事件在目标元素上被触发。

|  |  |
| --- | --- |
| Bubbles（冒泡） | Yes |
| Cancelable（可撤销） | Yes |
| Interface（接口） | `MouseEvent` |
| Event handler property（事件处理器） | `oncontextmenu` |

示例
--

在下面的例子中，第一段内容被触发的 `contextmenu` 事件的默认行为被 `preventDefault()` 取消了，因此，在第一段右击鼠标时什么也不会发生，但是右键单击第二段内容时，则会出现标准的菜单内容，与平时右击普通页面出现的菜单内容一致。

### HTML


```html
<p id="noContextMenu">这个段落右键菜单已被禁用。</p>
<p>但是这个段落没有被禁用。</p>
```

### JavaScript


```js
noContext = document.getElementById("noContextMenu");

noContext.addEventListener("contextmenu", (e) => {
  e.preventDefault();
});
```

### 结果

规范
--

| Specification |
| --- |
| UI Events # event-type-contextmenu |

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

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

参见
--

* 事件介绍
* `click`
* `contextmenu`
* `dblclick`
* `mousedown`
* `mouseup`
* `pointerdown`
* `pointerup`
Element.closest()
=================

**`Element.closest()`** 方法用来获取：匹配特定选择器且离当前元素最近的祖先元素（也可以是当前元素本身）。如果匹配不到，则返回 `null`。

语法
--
```

var closestElement = targetElement.closest(selectors);
```

### 参数

* *selectors* 是指定的选择器，比如 `"p:hover, .toto + q"`。
### 返回值

* *elt* 是查询到的祖先元素，也可能是 `null`。
### 异常

`SyntaxError` `DOMException`

如果选择器不合法，则抛出该异常。

示例
--

### HTML


```html
<article>
  <div id="div-01">
    Here is div-01
    <div id="div-02">
      Here is div-02
      <div id="div-03">Here is div-03</div>
    </div>
  </div>
</article>
```

### JavaScript


```js
var el = document.getElementById("div-03");

var r1 = el.closest("#div-02");
// 返回 id 为 div-02 的那个元素

var r2 = el.closest("div div");
// 返回最近的拥有 div 祖先元素的 div 祖先元素，这里的话就是 div-03 元素本身

var r3 = el.closest("article > div");
// 返回最近的拥有父元素 article 的 div 祖先元素，这里的话就是 div-01

var r4 = el.closest(":not(div)");
// 返回最近的非 div 的祖先元素，这里的话就是最外层的 article
```

兼容
--

部分浏览器并不支持`Element.closest()`，但却支持了`element.matches()`（或拥有私有前缀，如 IE9+），一个 polyfill 案例：


```js
if (!Element.prototype.matches)
  Element.prototype.matches =
    Element.prototype.msMatchesSelector ||
    Element.prototype.webkitMatchesSelector;

if (!Element.prototype.closest)
  Element.prototype.closest = function (s) {
    var el = this;
    if (!document.documentElement.contains(el)) return null;
    do {
      if (el.matches(s)) return el;
      el = el.parentElement;
    } while (el !== null);
    return null;
  };
```


然而，如果你需要兼容到 IE8，那么随后这个 polyfill 将会非常缓慢地运行到结束。并且，IE8 只支持 CSS2.1 的选择器，并且使网页运行非常缓慢。


```js
if (window.Element && !Element.prototype.closest) {
  Element.prototype.closest = function (s) {
    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
      i,
      el = this;
    do {
      i = matches.length;
      while (--i >= 0 && matches.item(i) !== el) {}
    } while (i < 0 && (el = el.parentElement));
    return el;
  };
}
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-closest① |

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

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

### 兼容性说明

* 当在 Edge 15-18 里使用 `document.createElement(tagName).closest(tagName)` ，如果元素不是第一个（直接地或间接地）连接到上下文对象的话将会返回 `null` ，例如在一般情况下 DOM 中的 `Document` 对象。
参见
--

* `Element` 接口。
* 选择器语法 (en-US)
* 其他相关选择器方法：`element.querySelector()` and `element.matches()`.
Element: keyup event
====================

**`keyup`** 事件在按键被松开时触发。

| 冒泡 | 是 |
| 可取消 | 是 |
| 接口 | `KeyboardEvent` |
| 事件处理函数属性 | `onkeyup` |

`keydown` 和 `keyup` 事件提供指出哪个键被按下的代码，而 `keypress` 指出哪些字符被输入。例如，小写字母“a”在 `keydown` 和 `keyup` 时会被报告为 65，但在 `keypress` 时为 97。所有事件均将大写字母“A”报告为 65。

从 Firefox 65 开始，`keyup` 和 `keydown` 事件在 IME 编辑时也会被触发，以提升 CJKT 用户的跨浏览器兼容性（Firefox bug 354358）。要忽略 IME 编辑时的所有 `keyup` 事件，请执行以下操作（229 是一个关于被 IME 加工过的事件的 `keyCode` 的特殊值）：


```js
eventTarget.addEventListener("keyup", (event) => {
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
  // do something
});
```

例子
--

### addEventListener keyup 例子

在这个例子中，每当你在 `<input>` 元素里松开一个键，将会打印 `KeyboardEvent.code` 的值。


```html
<input placeholder="Click here, then press and release a key." size="40" />
<p id="log"></p>
```



```js
const input = document.querySelector("input");
const log = document.getElementById("log");

input.addEventListener("keyup", logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}
```

### 等效的 onkeyup


```js
input.onkeyup = logKey;
```

规范
--

| Specification |
| --- |
| UI Events # event-type-keyup |
| HTML Standard # handler-onkeyup |

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

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

参见
--

* `input`
* `keydown`
* `keypress`
* Document `keyup` 事件 (en-US)
Element.hasAttribute()
======================

概述
--

`hasAttribute` 返回一个布尔值，指示该元素是否包含有指定的属性（attribute）。

语法
--
```

var result = element.hasAttribute(attName);
```


* `result` 为返回的布尔值：`true` 或 `false`。
* `attName` 是一个字符串，表示属性的名称。
例子
--


```js
// 在为属性设置新值前检测该属性是否存在
var d = document.getElementById("div1");

if (d.hasAttribute("align")) {
  d.setAttribute("align", "center");
}
```

备注
--

DOM methods dealing with element's attributes:

| Not namespace-aware, most commonly used methods | Namespace-aware variants (DOM Level 2) | DOM Level 1 methods for dealing with `Attr` nodes directly (seldom used) | DOM Level 2 namespace-aware methods for dealing with `Attr` nodes directly (seldom used) |
| --- | --- | --- | --- |
| `setAttribute` (DOM 1) | `setAttributeNS` | `setAttributeNode` | `setAttributeNodeNS` |
| `getAttribute` (DOM 1) | `getAttributeNS` (en-US) | `getAttributeNode` | `getAttributeNodeNS` |
| `hasAttribute` (DOM 2) | `hasAttributeNS` | - | - |
| `removeAttribute` (DOM 1) | `removeAttributeNS` | `removeAttributeNode` | - |

规范
--

* DOM Level 2 Core: hasAttribute
* DOM Level 3 Core: hasAttribute
Element：touchstart 事件
=====================

`touchstart` 事件在一个或多个触点与触控设备表面接触时被触发。

语法
--

在类似 `addEventListener()` 这样的方法中使用事件名称，或设置事件处理器属性。


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

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

事件类型
----

一个 `TouchEvent`。继承自 `Event`。

Event

UIEvent

TouchEvent事件属性
----

*此接口从其父接口 `UIEvent` 和 `Event` 继承属性。*

`TouchEvent.altKey` (en-US) 只读 

一个布尔值，表示在事件触发时 Alt 键是否被按下。

`TouchEvent.changedTouches` 只读 

一个包含所有的 `Touch` 对象的 `TouchList`，这些 `Touch` 对象表示在前一个 touch 事件和当前的事件之间，状态发生变化的独立触点。

`TouchEvent.ctrlKey` (en-US) 只读 

一个布尔值，表示在事件触发时控制键是否被按下。

`TouchEvent.metaKey` (en-US) 只读 

一个布尔值，表示在事件触发时 Meta 键是否被按下。

`TouchEvent.shiftKey` (en-US) 只读 

一个布尔值，表示在事件触发时 Shift 键是否被按下。

`TouchEvent.targetTouches` 只读 

一个包含所有的 `Touch` 对象的 `TouchList`，这些 `Touch` 对象表示当前与触摸表面接触的触点，且触点起始于事件发生的目标元素。

`TouchEvent.touches` 只读 

一个包含所有的 `Touch` 对象的 `TouchList`，这些 `Touch` 对象表示当前与表面接触的触点（不论事件目标或状态变化）。

`TouchEvent.rotation` 
非标准
 只读 

自事件开始以来的旋转角度变化（以度为单位）。正值表示顺时针旋转；负值表示逆时针旋转。初始值为 `0.0`。

`TouchEvent.scale` 
非标准
 只读 

自事件开始以来，两个数值之间的距离（缩放倍数）。表示事件开始至现在，触点距离的缩放倍数（浮点数）。小于 1.0 表示向内收缩（缩小），大于 1.0 表示向外松开（放大）。初始值为 `1.0`。

示例
--

这些事件的代码示例可在这个专用页面查看：Touch 事件。

规范
--

| Specification |
| --- |
| Touch Events # event-touchstart |
| Touch Events # dom-globaleventhandlers-ontouchstart |

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

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

参见
--

* Touch 事件
* 以 `Document` 为目标的相同事件：`touchstart`
Element.getAttributeNodeNS()
============================

概要
--

通过命名空间 URI 和名称来获取属性节点。

语法
--
```

attributeNode = element.getAttributeNodeNS(namespace,nodeName)
```


* `attributeNode` 获取的属性节点。
* `namespace` 命名空间字符串
* `nodeName` 属性节点的名称。

== Example == TBD The example needs to be fixed pre> // html: <div id="top" /> t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "http://www.mozilla.org/ns/specialspace", "id"); // iNode.value = "full-top" </pre

笔记
--

`getAttributeNodeNS` 相比 getAttributeNode 更加具体，允许你在特定的命名空间里获取属性。对应的 setter 方法是 setAttributeNodeNS.

DOM methods dealing with element's attributes:

| Not namespace-aware, most commonly used methods | Namespace-aware variants (DOM Level 2) | DOM Level 1 methods for dealing with `Attr` nodes directly (seldom used) | DOM Level 2 namespace-aware methods for dealing with `Attr` nodes directly (seldom used) |
| --- | --- | --- | --- |
| `setAttribute` (DOM 1) | `setAttributeNS` | `setAttributeNode` | `setAttributeNodeNS` |
| `getAttribute` (DOM 1) | `getAttributeNS` (en-US) | `getAttributeNode` | `getAttributeNodeNS` |
| `hasAttribute` (DOM 2) | `hasAttributeNS` | - | - |
| `removeAttribute` (DOM 1) | `removeAttributeNS` | `removeAttributeNode` | - |

规格
--

DOM Level 2 Core: getAttributeNodeNS
Element：copy 事件
===============

当用户通过浏览器的用户界面发起复制动作时，将触发 **`copy`** 事件。

该事件的默认行为是将当前选中的内容（如有）复制到系统剪贴板。

事件处理器可以通过调用 `ClipboardEvent.clipboardData` 属性上的 `setData(format, data)` *修改*剪贴板内容，并通过 `event.preventDefault()` 取消默认行为。

然而，事件处理器不可以*读取*剪贴板数据。

可以构建和派发一个合成 `copy` 事件，但这不会影响系统剪贴板。

语法
--

在类似于 `addEventListener()` 这样的方法中使用事件名，或设置事件处理器属性。


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

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

事件类型
----

`ClipboardEvent`。继承自 `Event`。

Event

ClipboardEvent示例
--

### 实时示例

#### HTML


```html
<div class="source" contenteditable="true">从这个盒子复制文字</div>
<div class="target" contenteditable="true">在这里粘贴</div>
```


```
div.source,
div.target {
  border: 1px solid gray;
  margin: 0.5rem;
  padding: 0.5rem;
  height: 1rem;
  background-color: #e9eef1;
}
```


#### JavaScript


```js
const source = document.querySelector("div.source");

source.addEventListener("copy", (event) => {
  const selection = document.getSelection();
  event.clipboardData.setData("text/plain", selection.toString().toUpperCase());
  event.preventDefault();
});
```


#### 结果

规范
--

| Specification |
| --- |
| Clipboard API and events # clipboard-event-copy |
| HTML Standard # handler-oncopy |

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

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

参见
--

* 相关联事件：`cut`、`paste`
* `Document` 目标上的这个事件：`copy` (en-US)
* `Window` 目标上的这个事件：`copy`
Element：append() 方法
===================

**`Element.append()`** 方法在当前 `Element` 的最后一个子节点之后插入一组 `Node` 对象或字符串对象。被插入的字符串对象等价为 `Text` (en-US) 节点。

其与 `Node.appendChild()` 的差异：

* `Element.append()` 允许附加字符串对象，而 `Node.appendChild()` 只接受 `Node` 对象。
* `Element.append()` 没有返回值，而 `Node.appendChild()` 返回附加的 `Node` 对象。
* `Element.append()` 可以附加多个节点和字符串，而 `Node.appendChild()` 只能附加一个节点。
语法
--


```js
append(param1)
append(param1, param2)
append(param1, param2, /\* …, \*/ paramN)
```

### 参数

`param1`、…、`paramN`

一组要插入的 `Node` 或字符串对象。

### 返回值

无（`undefined`）。

### 异常

`HierarchyRequestError` `DOMException`

当层次结构中的指定位置不能插入节点时抛出该异常。

示例
--

### 附加元素


```js
let div = document.createElement("div");
let p = document.createElement("p");
div.append(p);

console.log(div.childNodes); // NodeList [ <p> ]
```

### 附加文本


```js
let div = document.createElement("div");
div.append("一些文本");

console.log(div.textContent); // "一些文本"
```

### 附加元素和文本


```js
let div = document.createElement("div");
let p = document.createElement("p");
div.append("一些文本", p);

console.log(div.childNodes); // NodeList [ #text "一些文本", <p> ]
```

### append 是非作用域方法

`append()` 方法无法被绑定到 `with` 语句的作用域中。参见 `Symbol.unscopables` 以了解更多信息。


```js
let div = document.createElement("div");

with (div) {
  append("foo");
}
// ReferenceError: append is not defined
```

规范
--

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

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

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

参见
--

* `Element.prepend()`
* `Node.appendChild()`
* `Element.after()`
* `Element.insertAdjacentElement()`
* `NodeList`
Element.scrollTop
=================

**`Element.scrollTop`** 属性可以获取或设置一个元素的内容垂直滚动的像素数。

一个元素的 `scrollTop` 值是这个元素的**内容顶部**（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 `scrollTop` 值为`0`。

**警告：** 在使用显示比例缩放的系统上，`scrollTop`可能会提供一个小数。

语法
--
```

// 获得滚动的像素数
var  intElemScrollTop = someElement.scrollTop;
```


运行此代码后， `intElemScrollTop` 是一个整数，即`element`的内容向上滚动的像素数。
```

// 设置滚动的距离
element.scrollTop = intValue;
```


`scrollTop` 可以被设置为任何整数值，同时注意：

* 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"\*\*non-scrollable"\*\*属性）， `scrollTop`将被设置为`0`。
* 设置`scrollTop`的值小于 0，`scrollTop` 被设为`0`
* 如果设置了超出这个容器可滚动的值，`scrollTop` 会被设为最大值。
例子
--

padding-top

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

padding-bottom

**Left** **Top** **Right** **Bottom** *margin-top* *margin-bottom* *border-top* *border-bottom*

规范
--

| Specification |
| --- |
| CSSOM View Module # dom-element-scrolltop |

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

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

参考
--

* MSDN's Measuring Element Dimension and Location
* `Element.scrollLeft`
* `Element.scrollTo()`
GlobalEventHandlers.onpointerdown
=================================

**`pointerdown`** 事件的 `全局事件处理程序`

语法
--
```

var downHandler = targetElement.onpointerdown;
```

### 返回值

`downHandler`

*pointerdown* 事件触发对象的事件处理程序。

示例
--

当前示例展示两种方式使用 *onpointerdown* 去设置元素的 pointerdown 事件处理程序。


```js
<html>
<script>
function downHandler(ev) {
 // Process the pointerdown event
}
function init() {
 var el=document.getElementById("target1");
 el.onpointerdown = downHandler;
}
</script>
<body onload="init();">
<div id="target1"> Touch me ... </div>
<div id="target2" onpointerdown="downHandler(event)"> Touch me ... </div>
</body>
</html>
```

规范
--

| Specification |
| --- |
| Pointer Events # the-pointerdown-event |
| Pointer Events # dom-globaleventhandlers-onpointerdown |

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

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

参见
--

* 相关事件
    + `gotpointercapture`
    + `lostpointercapture`
    + `pointerover`
    + `pointerenter`
    + `pointermove`
    + `pointercancel`
    + `pointerup`
    + `pointerout`
    + `pointerleave`
Element：scrollIntoViewIfNeeded() 方法
===================================

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

**`Element.scrollIntoViewIfNeeded()`** 方法将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。此方法是标准的 `Element.scrollIntoView()` 方法的专有变体。

语法
--


```js
scrollIntoViewIfNeeded()
scrollIntoViewIfNeeded(centerIfNeeded)
```

### 参数

`centerIfNeeded` 可选

一个可选的布尔值，默认为`true`：

* 如果为 `true`，则元素将在其所在滚动区的可视区域中居中对齐。
* 如果为 `false`，则元素将与其所在滚动区的可视区域最近的边缘对齐。根据可见区域最靠近元素的哪个边缘，元素的顶部将与可见区域的顶部边缘对准，或者元素的底部边缘将与可见区域的底部边缘对准。

### 返回值

无（`undefined`）。

示例
--


```js
const element = document.getElementById("my-el");

element.scrollIntoViewIfNeeded(); // 将元素置于可见区域的中心
element.scrollIntoViewIfNeeded(false); // 将元素与可见区域中最近的边缘对齐
```

规范
--

不属于任何规范。这是一种 WebKit 专有的方法。

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

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

参见
--

* W3C CSSOM bug 17152：支持在元素滚动入视图时将其居中。（等同于 `scrollIntoViewIfNeeded` 的标准特性的请求）