recursal/MDN huggingface dataset:
Element.setPointerCapture()
===========================

`Element`接口的\*\*`setPointerCapture()`\*\* 方法用于将特定元素指定为未来指针事件的捕获目标。指针的后续事件将以捕获元素为目标，直到捕获被释放（通过`Element.releasePointerCapture()` (en-US)）。

**备注：** 一旦设置了 pointer capture，`pointerover`、`pointerout`、`pointerenter` 和 `pointerleave` 事件将不会被触发，直到越过设置了 capture 的元素的边界。这是因为其他元素将不能再作为 pointer 事件的目标了。这会影响到这些事件在其他元素上的触发。

### 指针捕获概述

指针捕获允许一个特定的指针事件 (`PointerEvent`) 事件从一个事件触发时候的目标重定位到另一个目标上。这个功能可以确保一个元素可以持续的接收到一个 pointer 事件，即使这个事件的触发点已经移出了这个元素（比如，在滚动的时候）。

语法
--
```

targetElement.setPointerCapture(pointerId);
```

### 参数

`pointerId`

`PointerEvent` 对象的`pointerId` (en-US) 。

### 返回值

返回 void。如果`pointerId`不匹配任何当前活动的指针事件，将抛出`DOMException`。

示例
--

当你按下它时，此示例在 `<div>` 上设置指针捕获。这使你可以滑动元素，即使指针移动到其边界之外也是如此。

### HTML


```html
<div id="slider">SLIDE ME</div>
```

### CSS


```css
div {
  width: 140px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fbe;
}
```

### JavaScript


```js
function beginSliding(e) {
  slider.onpointermove = slide;
  slider.setPointerCapture(e.pointerId);
}

function stopSliding(e) {
  slider.onpointermove = null;
  slider.releasePointerCapture(e.pointerId);
}

function slide(e) {
  slider.style.transform = `translate(${e.clientX - 70}px)`;
}

const slider = document.getElementById("slider");

slider.onpointerdown = beginSliding;
slider.onpointerup = stopSliding;
```

### 结果

规范
--

| Specification |
| --- |
| Pointer Events # dom-element-setpointercapture |

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

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

参见
--

* `Element.releasePointerCapture` (en-US)
* `Pointer Events`
Element：afterscriptexecute 事件
=============================

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

**警告：** 此事件是早期版本的规范中的一个提案。不要依赖它。

**`afterscriptexecute`** 事件在一个脚本执行完毕后触发。

这是一个 Gecko（Firefox）特有的私有事件。

|  |  |
| --- | --- |
| 是否冒泡 | 是 |
| 是否可取消 | 是 |
| 接口 | `Event` |
| 事件处理器属性 | 无 |

规范
--

不属于任何规范。

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

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

参见
--

* `beforescriptexecute` 事件
Element：touchmove 事件
====================

`touchmove` 事件在触点于触控平面上移动时触发。

语法
--

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


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

ontouchmove = (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-touchmove |
| Touch Events # dom-globaleventhandlers-ontouchmove |

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

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

参见
--

* Touch 事件
* `mousemove`
* 以 `Document` 为目标的相同事件：`touchmove`
Element：mouseover 事件
====================

当一个定点设备（通常指鼠标）在一个元素本身或者其子元素上移动时，**`mouseover`** 事件在该元素上触发。

语法
--

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


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

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

事件类型
----

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

Event

UIEvent

MouseEvent事件属性
----

*这个接口也继承其父接口 `UIEvent` 和 `Event` 的属性。*

`MouseEvent.altKey` 只读 

当鼠标事件被触发时，如果 `alt` 键已被按下，返回 `true`。

`MouseEvent.button` 只读 

触发鼠标事件时，按下按钮的编号（如果适用）。

`MouseEvent.buttons` 只读 

触发鼠标事件时按下的按钮（如果存在）。

`MouseEvent.clientX` 只读 

鼠标指针相对于局部 DOM 元素的 X 轴坐标。

`MouseEvent.clientY` 只读 

鼠标指针相对于局部 DOM 元素的 Y 轴坐标。

`MouseEvent.ctrlKey` 只读 

当鼠标事件被触发时，如果 `control` 键已被按下，返回 `true`。

`MouseEvent.layerX` (en-US) 
非标准
 只读 

返回事件相对于当前层的水平坐标。

`MouseEvent.layerY` (en-US) 
非标准
 只读 

返回事件相对于当前层的垂直坐标。

`MouseEvent.metaKey` 只读 

当鼠标事件被触发时，如果 `meta` 键已被按下，返回 `true`。

`MouseEvent.movementX` 只读 

鼠标指针相对于最后一次 `mousemove` 事件位置的 X 轴坐标。

`MouseEvent.movementY` 只读 

鼠标指针相对于最后一次 `mousemove` 事件位置的 Y 轴坐标。

`MouseEvent.offsetX` 只读 

鼠标指针相对于目标节点的内填充边的 X 轴坐标。

`MouseEvent.offsetY` 只读 

鼠标指针相对于目标节点的内填充边的 Y 轴坐标。

`MouseEvent.pageX` 只读 

鼠标指针相对于整个文档的 X 轴坐标。

`MouseEvent.pageY` 只读 

鼠标指针相对于整个文档的 Y 轴坐标。

`MouseEvent.relatedTarget` 只读 

事件的次要目标（如果存在）。

`MouseEvent.screenX` 只读 

鼠标指针相对于屏幕的 X 轴坐标。

`MouseEvent.screenY` 只读 

鼠标指针相对于屏幕的 Y 轴坐标。

`MouseEvent.shiftKey` 只读 

当鼠标事件被触发时，如果 `shift` 键已被按下，返回 `true`。

`MouseEvent.mozInputSource` 
非标准
 只读 

生成事件的设备类型（`MOZ_SOURCE_*` 常量之一）。例如，这让你决定鼠标事件是否由实际的鼠标还是触摸事件生成（这可能会在一定程度影响你对事件相关坐标判断的准确性）。

`MouseEvent.webkitForce` (en-US) 
非标准
 只读 

单击时施加的压力。

`MouseEvent.x` 只读 

`MouseEvent.clientX` 的别名。

`MouseEvent.y` 只读 

`MouseEvent.clientY` 的别名。

示例
--

以下的示例阐述了 `mouseover` 和 `mouseenter` 之间的区别。

### HTML


```html
<ul id="test">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>
```

### JavaScript


```js
const test = document.getElementById("test");

// 当光标移到无序列表上时，此处理函数将仅执行一次
test.addEventListener(
  "mouseenter",
  (event) => {
    // 突出显示鼠标悬停目标
    event.target.style.color = "purple";

    // 短暂延迟后重置颜色
    setTimeout(() => {
      event.target.style.color = "";
    }, 500);
  },
  false,
);

// 每次将光标移动到不同的列表项上时，此处理函数都会执行
test.addEventListener(
  "mouseover",
  (event) => {
    // 突出显示鼠标悬停目标
    event.target.style.color = "orange";

    // 短暂延迟后重置颜色
    setTimeout(() => {
      event.target.style.color = "";
    }, 500);
  },
  false,
);
```

### 结果

规范
--

| Specification |
| --- |
| UI Events # event-type-mouseover |
| HTML Standard # handler-onmouseover |

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

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

参见
--

* 事件介绍
* `mousedown`
* `mouseup`
* `mousemove`
* `click`
* `dblclick`
* `mouseover`
* `mouseout`
* `mouseenter`
* `mouseleave`
* `contextmenu`
Element.toggleAttribute()
=========================

`Element` 接口的 **`toggleAttribute()`** 方法切换给定元素的某个布尔值属性的状态（如果属性不存在则添加属性，属性存在则移除属性）。

语法
--
```

Element.toggleAttribute(name [, force]);
```

### 参数

`name`

A `DOMString` specifying the name of the attribute to be toggled. The attribute name is automatically converted to all lower-case when `toggleAttribute()` is called on an HTML element in an HTML document.

`force` 可选

A boolean value to determine whether the attribute should be added or removed, no matter whether the attribute is present or not at the moment.

### 返回值

`true` if attribute **`name`** is eventually present, and `false` otherwise.

### 异常

`InvalidCharacterError`

The specified attribute `name` contains one or more characters which are not valid in attribute names.

示例
--

在下面的例子中，`toggleAttribute()` 被用于切换 `<input>` 的 `readonly` 属性。

### HTML


```html
<input value="text" /> <button>toggleAttribute("readonly")</button>
```

### JavaScript


```js
var button = document.querySelector("button");
var input = document.querySelector("input");

button.addEventListener("click", function () {
  input.toggleAttribute("readonly");
});
```

### 结果

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` | - |

规范
--

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

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

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

`animationstart` 事件会在 CSS 动画开始时触发。如果有 `animation-delay` 延时，事件会在延迟时效过后立即触发。为负数的延时时长会致使事件被触发时事件的 `elapsedTime` 属性值等于该时长的绝对值（并且，相应地，动画将直接播放该时长绝对值之后的动画）。

基本信息
----

规格

CSS Animations

接口

AnimationEvent

是否冒泡

是

事件可取消

否

目标

Document, Element

默认行为

无

属性表
---

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `target` 只读  | `EventTarget` | 事件来源（DOM 顶层目标）。 |
| `type` 只读  | `DOMString` | 事件类型 |
| `bubbles` 只读  | `boolean` | 事件是否正常冒泡？ |
| `cancelable` 只读  | `boolean` | 可否取消该事件？ |
| `animationName` 只读  | `DOMString` | 与该动画相关的 CSS 属性值。 |
| `elapsedTime` 只读  | `Float` | 动画运行时长，单位为秒，与直到该事件被触发的时间相一致，不包括任何动画暂停时的时长。此值应为 0 除非 `animation-delay` 是一个负值，这种情况下此值为 (-1 \* `animation-delay`)，并且动画将直接从此值后的序列开始播放。 |

规范
--

| Specification |
| --- |
| CSS Animations Level 1 # eventdef-globaleventhandlers-animationstart |

相关事件
----

* `animationstart`
* `animationend`
* `animationiteration`
参见
--

* Using CSS Animations (en-US)
Element.childElementCount
=========================

**`Element.childElementCount`** 只读属性返回一个***无符号长整型数字***，表示给定元素的子元素数。

**备注：** This property was initially defined in the `ElementTraversal` pure interface. As this interface contained two distinct set of properties, one aimed at `Node` that have children, one at those that are children, they have been moved into two separate pure interfaces, `Element` and `ChildNode`. In this case, `childElementCount` moved to `Element`. This is a fairly technical change that shouldn't affect compatibility.

语法
--
```

var count = node.childElementCount;
```


```
var elCount = elementNodeReference.childElementCount;
```


count

holds the return value an `unsigned long` (simply an integer) type.

node

is an object representing a `Document`, `DocumentFragment` or `Element`.

例子
--
```

var foo = document.getElementById("foo");
if (foo.childElementCount > 0) {
    // do something
}
```


下例演示了一个元素节点的`childElementCount`属性以及`children`属性的用法。
```

<head>
    <script type="text/javascript">
        function GetChildCount () {
            var container = document.getElementById ("container");

            var childCount = 0;
            //如果支持 childElementCount 属性
            if ('childElementCount' in container) {
                childCount = container.childElementCount;
            }
            else {
            //如果支持 children 属性，IE6/7/8
            //译者注：没有判断 nodeType 是否为 1，可能包含注释节点。
                if (container.children) {
                    childCount = container.children.length;
                }
                else {  //,如果都不支持，Firefox 3.5 之前版本
                    var child = container.firstChild;
                    while (child) {
                        if (child.nodeType == 1 /*Node.ELEMENT_NODE*/) {
                            childCount++;
                        }
                        child = child.nextSibling;
                    }
                }
            }

            alert ("The number of child elements is " + childCount);
        }
    </script>
</head>
<body>
    <div id="container" style="width:300px; background-color:#a0d0e0;">
        Some text inside the container.
        <input type="text" size="40" value="a child element of the container" />
        <div>
            <div>a descendant element of the container</div>
            <div>another descendant element of the container</div>
        </div>
    </div>
    <br /><br />
    <button onclick="GetChildCount ();">Get the number of container's child elements</button>
</body>
```


执行上面的例子：http://help.dottoro.com/external/examples/ljsfamht/childElementCount\_1.htm

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

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

规范
--

childElementCount (W3C)

参见
--

* `children`
* `firstElementChild`
* `lastElementChild`
* `nextElementSibling`
* `previousElementSibling`
Element.scrollTo()
==================

`Element` 的 **`scrollTo()`** 方法可以使界面滚动到给定元素的指定坐标位置。

语法
--


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

### 参数

* `x-coord` 是你想要显示在左上角的元素沿水平轴的像素。
* `y-coord` 是你想要显示在左上角的元素沿垂直轴的像素。

- 或者 -

`options`

包含以下参数的对象：

`top`

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

`left`

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

`behavior`

`smooth` 表示平滑滚动并产生过渡效果、`instant` 表示滚动会直接跳转到目标位置，没有过渡效果。`auto` 或缺省值表示浏览器会自动选择滚动时的过渡效果。


### 返回值

无 (`undefined`)。

示例
--


```js
element.scrollTo(0, 1000);
```


使用 `options`:


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

规范
--

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

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

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

参见
--

* `Element.scrollTop`, `Element.scrollLeft`
* `Window.scrollTo()`
Element.scrollLeftMax
=====================

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

这个 **`Element.scrollLeftMax`** 是只读的属性返回一个 `Number` 表示一个元素横向滚动条可滚动的最大距离。

语法
--
```

var pxl = elt.scrollLeftMax;
```

规范
--

*这个属性还没纳入规范。*

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

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

更多
--

* `Element.scrollTopMax` 纵坐标用法相同。
HTMLElement：transitionstart 事件
==============================

**`transitionstart`** 事件会在 CSS transition 实际开始的时候触发，或者说在某个 `transition-delay` 已经结束之后触发。

|  |  |
| --- | --- |
| 是否冒泡 | 是 |
| 是否可取消 | 否 |
| 接口 | `TransitionEvent` |
| 事件处理器属性 | `ontransitionstart` |

示例
--

下列代码对 `transitionstart` 事件添加了一个监听器：


```js
element.addEventListener("transitionstart", () => {
  console.log("transition 开始");
});
```


一样的代码，但是使用 `ontransitionstart` 属性来替代 `addEventListener()`：


```js
element.ontransitionstart = () => {
  console.log("transition 开始");
};
```

### 运行实例

在下面的例子中，我们有一个简单的 `<div>` 元素，并设置了一个包含 delay 的 transition 样式。


```html
<div class="transition">Hover over me</div>
<div class="message"></div>
```



```css
.transition {
  width: 100px;
  height: 100px;
  background: rgba(255, 0, 0, 1);
  transition-property: transform, background;
  transition-duration: 2s;
  transition-delay: 1s;
}

.transition:hover {
  transform: rotate(90deg);
  background: rgba(255, 0, 0, 0);
}
```


对此，我们再添加一些 JavaScript 代码来指出 `transitionstart` 和 `transitionrun` (en-US) 事件在哪里触发。


```js
const transition = document.querySelector(".transition");
const message = document.querySelector(".message");

transition.addEventListener("transitionrun", function () {
  message.textContent = "transitionrun 触发了";
});

transition.addEventListener("transitionstart", function () {
  message.textContent = "transitionstart 触发了";
});

transition.addEventListener("transitionend", function () {
  message.textContent = "transitionend 触发了";
});
```


不同的地方是：

* transitionrun 在 transition 创建的时候被触发。（或者说在某个 delay 开始的时候）
* transitionstart 在动画实际开始的时候被触发。 (或者说在某个 delay 结束的时候)
规范
--

| Specification |
| --- |
| CSS Transitions # transitionstart |

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

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

参见
--

* `GlobalEventHandlers.ontransitionstart` 事件处理器
* `TransitionEvent` 接口
* CSS 属性：`transition`, `transition-delay`, `transition-duration`, `transition-property`, `transition-timing-function`
* 相关的事件：`transitionend`, `transitionrun` (en-US), `transitioncancel` (en-US)
* 在 `Document` targets 上的此事件：`transitionstart` (en-US)
* 在 `Window` targets 上的此事件：`transitionstart` (en-US)
Element：paste 事件
================

当用户通过浏览器的用户界面发起“粘贴”动作时，将触发 **`paste`** 事件。

如果光标处于可编辑的上下文中（例如，在 `<textarea>` 或 `contenteditable` 属性设置为 `true` 的元素中），那么默认动作是将剪贴板的内容插入光标位置的文档中。

事件处理器可以通过调用事件 `clipboardData` 属性的 `getData()` 方法来访问剪贴板内容。

要覆盖默认行为（例如插入一些不同的数据或转换剪贴板内容），事件处理程序必须使用 `event.preventDefault()` 取消默认动作，然后手动插入其想要的数据。

可以构建和派发一个合成 `paste` 事件，但这不会影响系统剪贴板或文档内容。

语法
--

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


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

onpaste = (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 target = document.querySelector("div.target");

target.addEventListener("paste", (event) => {
  event.preventDefault();

  let paste = (event.clipboardData || window.clipboardData).getData("text");
  paste = paste.toUpperCase();
  const selection = window.getSelection();
  if (!selection.rangeCount) return;
  selection.deleteFromDocument();
  selection.getRangeAt(0).insertNode(document.createTextNode(paste));
  selection.collapseToEnd();
});
```


#### 结果

规范
--

| Specification |
| --- |
| Clipboard API and events # clipboard-event-paste |
| HTML Standard # handler-onpaste |

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

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

参见
--

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

当文本段落的组成完成或取消时，compositionend 事件将被触发 (具有特殊字符的触发，需要一系列键和其他输入，如语音识别或移动中的字词建议)。

|  |  |
| --- | --- |
| Bubbles | Yes |
| Cancelable | Yes |
| Target objects | `Element` |
| Interface | `TouchEvent` |

Properties
----------

| Property | Type | Description |
| --- | --- | --- |
| `target` 只读  | `EventTarget` | 聚焦元素处理成分 |
| `type` 只读  | `DOMString` | 事件类型 |
| `bubbles` 只读  | `boolean` | 事件是否冒泡 |
| `cancelable` 只读  | `boolean` | 是否可以取消该事件 |
| `view` 只读  | `WindowProxy` | `Document.defaultView` (`window` of the document) |
| `detail` 只读  | `long` (`float`) | 0. |
| `data` 只读  | `DOMString` (string) | 正在编辑的原始字符串，否则为空字符串。只读。 |
| `locale` | `DOMString` (string) | 组合事件的语言代码 (如果可用);否则，为空字符串。只读。 |

规范
--

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

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

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

Related events
--------------

* `compositionstart`
* `compositionupdate`
Element.prepend()
=================

**`Element.prepend`** 方法可以在父节点的第一个子节点之前插入一系列`Node`对象或者`DOMString`对象。`DOMString`会被当作`Text` (en-US)节点对待（也就是说插入的不是 HTML 代码）。

语法
--
```

Element.prepend((Node or DOMString)... nodes);
```

### 参数

`nodes`

要插入的一系列`Node`或者`DOMString`。

### 返回值

`undefined`.

### 异常

* `HierarchyRequestError`：节点不能插入当前层级内。
示例
--

### Prepending an element


```js
var parent = document.createElement("div");
var p = document.createElement("p");
var span = document.createElement("span");
parent.append(p);
parent.prepend(span);

console.log(parent.childNodes); // NodeList [ <span>, <p> ]
```

### Prepending text


```js
var parent = document.createElement("div");
parent.append("Some text");
parent.prepend("Headline: ");

console.log(parent.textContent); // "Headline: Some text"
```

### Appending an element and text


```js
var parent = document.createElement("div");
var p = document.createElement("p");
parent.prepend("Some text", p);

console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
```

### `Element.prepend()` is unscopable

`prepend()` 不能在 with 语句内使用，详情参考 `Symbol.unscopables`。


```js
var parent = document.createElement("div");

with (parent) {
  prepend("foo");
}
// ReferenceError: prepend is not defined
```

规范
--

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

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

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

参见
--

* `Element.append()`
* `Node.appendChild()`
* `Node.insertBefore()`
* `Element.before()`
* `Element.insertAdjacentElement()`
* `NodeList`
GlobalEventHandlers.onpointerout
================================

一个`global event handler` 用于处理 `pointerout` 事件。

语法
--
```

var outHandler = targetElement.onpointerout;
```

### 返回值

`outHandler`

元素`targetElement`的指针输出事件处理程序。

例子
--

这个例子展示了两种方式来使用 onpointerout 设置元素的 pointerout 事件处理程序。


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

规范
--

| Specification |
| --- |
| Pointer Events # the-pointerout-event |
| Pointer Events # dom-globaleventhandlers-onpointerout |

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

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

参见
--

* 相关事件
    + `gotpointercapture`
    + `lostpointercapture`
    + `pointerover`
    + `pointerenter`
    + `pointerdown`
    + `pointermove`
    + `pointerup`
    + `pointercancel`
    + `pointerleave`
Element.getAttributeNode()
==========================

概要
--

返回指定元素的指定属性节点

语法
--
```

var attrNode = element.getAttributeNode(attrName);
```


* `attrNode` 获得的属性返回值，是 Attr 节点，nodeType 为 2
* `attrName` 是一个包含属性名称的 字符串
举例
--
```

// html: <div id="top" />
var t = document.getElementById("top");
var idAttr = t.getAttributeNode("id");
alert(idAttr.value == "top")
```

注意
--

当在一个被标记为 HTML 文档的 DOM 中的 HTML 元素上调用这个方法时，getAttributeNode 会将参数转变为小写形式。

Attr 节点继承自 Node，但不被认为是文档树的一部分。Node 上定义的常用属性，如 parentNode, previousSibling，和 nextSibling 对于 Attr 节点来说都为 null。然而，你可以使用 ownerElement 来得到拥有这个属性的元素。

getAttribute 通常用于替换 getAttributeNode 方法，来获得元素的属性值。性能也更快。性能对比是 element.id 大于 element.getAttribute('id') 大于 element.getAttributeNode('id').nodeValue.

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: getAttributeNode (introduced in DOM Level 1 Core)
* HTML 5: APIs in HTML documents