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

如果元素被指定的选择器字符串选择，**`Element.matches()`** 方法返回 true; 否则返回 false。

**警告：** 有一些浏览器使用前缀，在非标准名称 matchesSelector () 下实现了这个方法！

语法
--
```

let result = element.matches(selectorString);
```


* `result` 的值为 `true` 或 `false`.
* `selectorString` 是个 css 选择器字符串。
例子
--


```html
<ul id="birds">
  <li>Orange-winged parrot</li>
  <li class="endangered">Philippine eagle</li>
  <li>Great white pelican</li>
</ul>

<script type="text/javascript">
 var birds = document.getElementsByTagName("li");

 for (var i = 0; i < birds.length; i++) {
 if (birds[i].matches(".endangered")) {
 console.log("The " + birds[i].textContent + " is endangered!");
 }
 }
</script>
```



```js
<div id="foo">This is the element!</div>
  <script type="text/javascript">
    var el = document.getElementById("foo");
    if (el.mozMatchesSelector("div")) {
      alert("Match!");
    }
  </script>
```


会显示弹出框，因为"div"选择器可以选择到 el 元素。

异常
--

`SYNTAX_ERR`

如果给定的 css 选择器无效。在 Gecko 2.0 之前，该方法会返回`false,2.0 之后`,会直接抛出异常。

替代方案 (Polyfill)
---------------

对于不支持 `Element.matches()` 或`Element.matchesSelector()，但支持`document.querySelectorAll() 方法的`浏览器，存在以下替代方案`


```js
if (!Element.prototype.matches) {
  Element.prototype.matches =
    Element.prototype.matchesSelector ||
    Element.prototype.mozMatchesSelector ||
    Element.prototype.msMatchesSelector ||
    Element.prototype.oMatchesSelector ||
    Element.prototype.webkitMatchesSelector ||
    function (s) {
      var matches = (this.document || this.ownerDocument).querySelectorAll(s),
        i = matches.length;
      while (--i >= 0 && matches.item(i) !== this) {}
      return i > -1;
    };
}
```


> 
> 关于 Polyfill 的补充：
> 
> 
> * Polyfill Wikipedia
> * What are Polyfills in Javascript ?
> 
> 
> 

规范
--

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

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

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

概述
--

**className** 获取或设置指定元素的 class 属性的值。

语法
--
```

let cName = elementNodeReference.className;

elementNodeReference.className = cName;
```


* *cName*是一个字符串变量，表示当前元素的`class`属性的值，可以是由空格分隔的多个`class`属性值。
示例
--


```js
let elm = document.getElementById("div1");

if (elm.className == "fixed") {
  // 跳过 class 属性为特定值的元素
  goNextElement();
}
```

注释
--

**备注：** 使用名称`className`而不是`class`作为属性名，是因为"class" 在 JavaScript 中是个保留字。

规范
--

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

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

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

参见
--

* `element.classList`
Element：ariaLive 属性
===================

`Element` 接口的 **`ariaLive`** 属性反映了 `aria-live` (en-US) 属性的值，该属性表示一个元素将被更新，并描述了用户代理、辅助技术和用户可以从实时区域中期望的更新类型。

值
-

一个具有以下值之一的字符串：

`"assertive"`

表示对该区域的更新具有最高优先级，并应立即呈现给用户。

`"off"`

表示除非用户当前聚焦于该区域，否则不应向用户呈现对该区域的更新。

`"polite"`

表示应在下一个适当的机会（例如，在说完当前句子或用户暂停输入时）呈现对该区域的更新。

示例
--

在此示例中，ID 为 `planetInfo` 的元素上的 `aria-live` (en-US) 属性设置为 `"polite"`。然后我们将值更新为 `"assertive"`。


```html
<div role="region" id="planetInfo" aria-live="polite">
  <h2 id="planetTitle">未选择星球</h2>
  <p id="planetDescription">选择一个星球以查看其描述</p>
</div>
```



```js
let el = document.getElementById("planetInfo");
console.log(el.ariaLive); // "polite"
el.ariaLive = "assertive";
console.log(el.ariaLive); // "assertive"
```

规范
--

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-arialive |

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

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

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
`Element` 接口的 **`animate()`** 方法是创建一个新的 `Animation` 的便捷方法，将它应用于元素，然后运行动画。它将返回一个新建的 `Animation` 对象实例

**备注：** 一个元素上可以应用多个动画效果。你可以通过调用 `Element.getAnimations()` (en-US) 函数获得这些动画效果的一个列表。

语法
--


```js
animate(keyframes, options)
```

### 参数

`keyframes`

关键帧对象数组，**或**一个关键帧对象（其属性为可迭代值的数组）。参见关键帧格式以了解详细信息。

`options`

**代表动画持续时间的整数**（以毫秒为单位），或者一个包含一个或多个时间属性（在 `KeyframeEffect()` options 参数 (en-US)和下方列出）的对象：

`id` 可选

在 `animate()` 里可作为唯一标识的属性：一个用来引用动画的字符串。


### 返回值

返回 `Animation`。

示例
--

### 旋转和缩放

在以下示例中，我们使用 `animate()` 方法旋转和缩放元素。

#### HTML


```html
<div class="newspaper">翻报纸真的<br />会头晕</div>
```


#### CSS


```css
html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
}

.newspaper {
  padding: 0.5rem;
  text-transform: uppercase;
  text-align: center;
  background-color: white;
  cursor: pointer;
}
```


#### JavaScript


```js
const newspaperSpinning = [
  { transform: "rotate(0) scale(1)" },
  { transform: "rotate(360deg) scale(0)" },
];

const newspaperTiming = {
  duration: 2000,
  iterations: 1,
};

const newspaper = document.querySelector(".newspaper");

newspaper.addEventListener("click", () => {
  newspaper.animate(newspaperSpinning, newspaperTiming);
});
```


#### 结果

### Down the Rabbit Hole 演示

在演示 Down the Rabbit Hole (with the Web Animation API) 中，我们用 `animate()` 来快速创建并运行使 `#tunnel` 元素无限循环缓慢升起的动画。注意关键帧的对象数组和时间可选项。


```js
document.getElementById("tunnel").animate(
  [
    // keyframes
    { transform: "translateY(0px)" },
    { transform: "translateY(-300px)" },
  ],
  {
    // timing options
    duration: 1000,
    iterations: Infinity,
  },
);
```

### 隐含关键帧

在新版的浏览器中，你可以只设置动画的开始或结束状态（即单个关键帧），如果可以，浏览器会自动推断动画的另一端（结束或开始）的状态。例如，考虑这个简单动画——关键帧对象如下所示：


```js
let rotate360 = [{ transform: "rotate(360deg)" }];
```


我们仅指定了动画的结束状态，开始状态是隐含的。

规范
--

| Specification |
| --- |
| Web Animations # dom-animatable-animate |

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

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

参见
--

* Web Animation API
* `Element.getAnimations()` (en-US)
* `Animation`
Element：input 事件
================

Baseline 2023
-------------

Newly availableSince March 2023, 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
当一个 `<input>`, `<select>`, 或 `<textarea>` 元素的 `value` 被修改时，会触发 **`input`** 事件。

|  |  |
| --- | --- |
| Bubbles | Yes |
| Cancelable | No |
| Interface | `InputEvent` |
| Event handler property | `GlobalEventHandlers.oninput` |

**`input`** 事件也适用于启用了 `contenteditable` 的元素，以及开启了 `designMode` 的任意元素。在`contenteditable` 和 `designMode` 的情况下，事件的 target 为当前正在编辑的宿主。如果这些属性应用于多个元素上，当前正在编辑的宿主为最近的父节点不可编辑的祖先元素。

对于 `type=checkbox` 或 `type=radio` 的 `input` 元素，每当用户切换控件（通过触摸、鼠标或键盘）时（HTML5 规范），`input` 事件都应该触发。然而，历史事实并非如此。请检查兼容性，或使用 `change` 事件代替这些类型的元素。

**备注：** 每当元素的 `value` 改变，`input` 事件都会被触发。这与 `change` (en-US) 事件不同。change 事件仅当 value 被提交时触发，如按回车键，从一个 options 列表中选择一个值等。

示例
--

每当用户修改 `<input>` 元素的 value 时，这个示例会记录 value。

### HTML


```html
<input placeholder="Enter some text" name="name" />
<p id="values"></p>
```

### JavaScript


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

input.addEventListener("input", updateValue);

function updateValue(e) {
  log.textContent = e.srcElement.value;
}
```

### 结果

属性
--

| Property | Type | Description |
| --- | --- | --- |
| `target` 只读  | `EventTarget` | The event target (the topmost target in the DOM tree). |
| `type` 只读  | `DOMString` | The type of event. |
| `bubbles` 只读  | `Boolean` | Whether the event normally bubbles or not. |
| `cancelable` 只读  | `Boolean` | Whether the event is cancellable or not. |

规范
--

| Specification |
| --- |
| UI Events # event-type-input |
| HTML Standard # handler-oninput |

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

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

[1] 在 Gecko 12.0 之前，用户在输入法中输入时，或者 dead keys were used on Mac OS X 时，Gecko 不触发 input 事件。

[2] IE 9 在用户删除输入的文字时不触发 input 事件 (例如，按 Backspace 或者删除键，或者“剪切”文字).

[3] Opera 在用户把文字拖进输入框时，不触发 input 事件。

[4] 事件 target 是光标所在的最内侧的元素。

参见
--

* 相关事件
    + `beforeinput`
    + `change`
    + `invalid`
NonDocumentTypeChildNode.nextElementSibling
===========================================

概述
--

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

语法
--
```

var nextNode = elementNodeReference.nextElementSibling;
```

例子
--
```

<div id="div-01">Here is div-01</div>
<div id="div-02">Here is div-02</div>

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


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

Siblings of div-01

   1. DIV
   2. SCRIPT
   3. P
   4. OL
```

Internet Explorer 8 支持补丁
------------------------

该属性不支持 IE9 之前的版本，下面的代码片段可以增进对 IE8 的支持：
```

// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
if(!("nextElementSibling" in document.documentElement)){
    Object.defineProperty(Element.prototype, "nextElementSibling", {
        get: function(){
            var e = this.nextSibling;
            while(e && 1 !== e.nodeType)
                e = e.nextSibling;
            return e;
        }
    });
}
```

Internet Explorer 9+ 和 Safari 支持补丁
----------------------------------
```

// Source: https://github.com/jserz/js_piece/blob/master/DOM/NonDocumentTypeChildNode/nextElementSibling/nextElementSibling.md
(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty('nextElementSibling')) {
      return;
    }
    Object.defineProperty(item, 'nextElementSibling', {
      configurable: true,
      enumerable: true,
      get: function () {
        var el = this;
        while (el = el.nextSibling) {
          if (el.nodeType === 1) {
              return el;
          }
        }
        return null;
      },
      set: undefined
    });
  });
})([Element.prototype, CharacterData.prototype]);
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-nondocumenttypechildnode-nextelementsibling② |

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

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

参见
--

* `nextSibling`
* `childElementCount`
* `children`
* `firstElementChild`
* `lastElementChild`
* `previousElementSibling`
Element.requestFullscreen()
===========================

**`Element.requestFullscreen()`** 方法用于发出异步请求使元素进入全屏模式。

调用此 API 并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式，返回的`Promise`会 resolve，并且该元素会收到一个`fullscreenchange`事件，通知它已经进入全屏模式。如果全屏请求被拒绝，返回的 promise 会变成 rejected 并且该元素会收到一个`fullscreenerror`事件。如果该元素已经从原来的文档中分离，那么该文档将会收到这些事件。

语法
--


```js
requestFullscreen()
requestFullscreen(options)
```

### 参数

`options` 可选

一个`FullscreenOptions` (en-US)对象提供切换到全屏模式的控制选项。目前，唯一的选项是`navigationUI` (en-US)，这控制了是否在元素处于全屏模式时显示导航条 UI。默认值是`"auto"`，表明这将由浏览器来决定是否显示导航条。

### 返回值

在完成切换全屏模式后，返回一个已经用值 `undefined` resolved 的`Promise`

### 异常

*`requestFullscreen()` 通过拒绝返回的 `Promise`来生成错误条件，而不是抛出一个传统的异常。拒绝控制器接收以下的某一个值：*

`TypeError`

在以下几种情况下，会抛出`TypeError`：

* 文档中包含的元素未完全激活，也就是说不是当前活动的元素。
* 元素不在文档之内。
* 因为功能策略限制配置或其他访问控制，元素不被允许使用`"fullscreen"`功能。
* 元素和它的文档是同一个节点。

示例
--

在调用 `requestFullScreen()` 之前，可以对 `fullscreenchange` 和 `fullscreenerror` 事件进行监听，这样在请求进入全屏模式成功或者失败时都能收到事件通知。

规范
--

| Specification |
| --- |
| Fullscreen API Standard # ref-for-dom-element-requestfullscreen① |

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

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

参见
--

* Full-screen API
* `Element.requestFullscreen()`
* `Document.exitFullscreen()`
* `Document.fullscreen`
* `Document.fullscreenElement`
* `:fullscreen`
* `allowfullscreen`
Element.querySelector()
=======================

返回与指定的选择器组匹配的元素的后代的第一个元素。语法
--


```js
element = baseElement.querySelector(selectors);
```


* `element` 和 `baseElement` 是 `element` 对象。
* `selectors` 是一个 CSS 选择器字符串 ( selectors (en-US) )
### 参数

`selectors`

一组用来匹配`Element` `baseElement`后代元素的选择器selectors (en-US)；必须是合法的 css 选择器，否则会引起语法错误。返回匹配指定选择器的第一个元素。

### 返回值

基础元素（baseElement）的子元素中满足指定选择器组的第一个元素。匹配过程会对整个结构进行，包括基础元素和他的后代元素的集合以外的元素，也就是说，选择器首先会应用到整个文档，而不是基础元素，来创建一个可能有匹配元素的初始列表。然后从结果元素中检查它们是否是基础元素的后代元素。第一个匹配的元素将会被 querySelector() 方法返回。

如果没有找到匹配项，返回值为 null。

### 异常

`SyntaxError`

指定的选择器无效。

例子
--

我们来看几个例子。

### 查找一个具有特殊属性值的元素

在第一个例子中，会返回 HTML 文档里第一个没有 type 属性或者有值为“text/css”的 type 属性的`<style>`元素：


```js
let el = document.body.querySelector(
  "style[type='text/css'], style:not([type])",
);
```

### 整个层次结构有效

下面的例子演示了在应用选择器时考虑整个文档的层次结构，因此在定位匹配时仍然考虑指定的 **baseElement** 之外的级别。

#### HTML


```html
<div>
  <h5>Original content</h5>
  <p>
    inside paragraph
    <span>inside span</span>
    inside paragraph
  </p>
</div>
<div>
  <h5>Output</h5>
  <div id="output"></div>
</div>
```


#### JavaScript


```js
var baseElement = document.querySelector("p");
document.getElementById("output").innerHTML =
  baseElement.querySelector("div span").innerHTML;
```


#### 结果

结果是像这样的：

注意，尽管基础元素没有包括选择器中含有的 `div` 元素，选择器"`div span`"依旧匹配了其中的`<span>`元素。

### 更多例子

`Document.querySelector()` 查看更多正确格式选择器的例子。

规范
--

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

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

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

参见
--

* `element.querySelectorAll`
* `document.querySelector` (en-US)
* `document.querySelectorAll`
* Code snippets for querySelector
blur (event)
============

当一个元素失去焦点的时候 blur 事件被触发。它和 `focusout` (en-US) 事件的主要区别是 focusout 支持冒泡。

常规信息
----

规范

DOM L3

接口
`FocusEvent`
是否冒泡

否

可取消默认行为

否

目标对象

元素（Element）

默认行为

无


**备注：** `Document.activeElement` 的值随浏览器的不同而不同（Firefox bug 452307）：IE10 把值设为焦点将要移向的对象，而 Firefox 和 Chrome 往往把值设为 `body`。

属性
--

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `target` 只读  | `EventTarget` | 产生该事件的对象 (DOM 树中最顶级的那个对象). |
| `type` 只读  | `DOMString` | 事件类型。 |
| `bubbles` 只读  | `Boolean` | 该事件是否冒泡。 |
| `cancelable` 只读  | `Boolean` | 该事件是否可取消默认行为。 |
| `relatedTarget` 只读  | `EventTarget` (DOM 元素) | 无 |

事件代理
----

有两种方法来为这个事件实现事件代理：在支持 `focusout` 事件的浏览器中使用 focusout 事件（除了 FireFox 以外的浏览器都支持 focusout）或者通过设置 `addEventListener` 方法的第三个参数 "useCapture" 为 `true：`

### HTML


```html
<form id="form">
  <input type="text" placeholder="text input" />
  <input type="password" placeholder="password" />
</form>
```

### JavaScript


```js
var form = document.getElementById("form");
form.addEventListener(
  "focus",
  function (event) {
    event.target.style.background = "pink";
  },
  true,
);
form.addEventListener(
  "blur",
  function (event) {
    event.target.style.background = "";
  },
  true,
);
```

规范
--

| Specification |
| --- |
| UI Events # event-type-blur |
| HTML Standard # handler-onblur |

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

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

相关的事件
-----

* `focus`
* `blur`
* `focusin` (en-US)
* `focusout`
GlobalEventHandlers.onpointermove
=================================

一个`global event handler`(全局事件) `pointermove` 事件。

语法
--
```

var moveHandler = targetElement.onpointermove;
```

### 返回值

`moveHandler`

返回 `targetElement` 元素的 pointermove 事件处理函数。

示例
--

下面展示了两种设置元素 pointermove 事件处理函数的方法。


```js
<html>
<script>
function moveHandler(ev) {
 // 此处添加事件处理语句
}
function init() {
 var el=document.getElementById("target1");
 el.onpointermove = moveHandler;
}
</script>
<body onload="init();">
<div id="target1"> Touch me ... </div>
<div id="target2" onpointermove="moveHandler(event)"> Touch me ... </div>
</body>
</html>
```

规范
--

| Specification |
| --- |
| Pointer Events # the-pointermove-event |
| Pointer Events # dom-globaleventhandlers-onpointermove |

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

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

参见
--

* 相关事件
    + `gotpointercapture`
    + `lostpointercapture`
    + `pointerover`
    + `pointerenter`
    + `pointerdown`
    + `pointerup`
    + `pointercancel`
    + `pointerout`
    + `pointerleave`
Element：keydown 事件
==================

**`keydown`** 事件触发于键盘按键按下的时候。

与 `keypress` 事件不同的是，所有按键均会触发 `keydown` 事件，无论这些按键是否会产生字符值。

| Bubbles | Yes |
| Cancelable | Yes |
| Interface | `KeyboardEvent` |
| Event handler property | `onkeydown` |

`keydown` 与 `keyup` 事件捕获了键盘按键的操作，而 `keypress` 反映了具体输入某个字符的值。比如，小写"a" 在`keydown` 和 `keyup`事件中输出的是大写 A 的 Unicode 编码 65，但是在`keypress`中输出的就是小写"a"的 Unicode 编码 97。大写 "A"在这些事件中输出的都是 Unicode 编码 65。

键盘事件只能由 `<inputs>`, `<textarea>` 以及任何具有 `contentEditable` 或 `tabindex="-1"`属性的组件触发。

自 Firefox 65 起， `keydown` 与 `keyup` 事件会在 IME（输入法编辑器）复合事件中被触发，目的是为了提升 CJKT（中日韩台地区）用户跨浏览器性能，(Firefox bug 354358). 若要忽略复合事件中所有 `keydown` 事件，可以按照如下代码修改 (229 是某个在 IME 中触发的键盘事件对应的 `keyCode`):


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

示例
--

### addEventListener keydown 示例

这个例子展示了当你在`<input>`元素中按下一个按键时， `KeyboardEvent.code` 的取值


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



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

input.addEventListener("keydown", logKey);

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

### onkeydown 示例


```js
input.onkeydown = logKey;
```

规范
--

| Specification |
| --- |
| UI Events # event-type-keydown |
| HTML Standard # handler-onkeydown |

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

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

参见
--

* `input`
* `keypress`
* `keyup`
* Document `keydown` event (en-US)
Element.tagName
===============

概述
--

返回当前元素的标签名

语法
--
```

elementName = element.tagName
```


* `elementName` 是一个字符串，包含了 element 元素的标签名。
备注
--

在 XML (或者其他基于 XML 的语言，比如 XHTML,xul) 文档中，`tagName 的值会`保留原始的大小写。在 HTML 文档中，`tagName`会返回其大写形式。对于元素节点来说，`tagName 属性`的值和nodeName属性的值是相同的。

例子
--

假设给定下面的源码
```

<span id="born">When I was born...</span>
```


然后运行下面的脚本
```

var span = document.getElementById("born");
alert(span.tagName);
```


在 XHTML 中 (或者其他的 XML 格式文件中), 会弹出小写的"span".而在 HTML 中，会弹出大写的"SPAN".

规范
--

* DOM Level 2 Core: tagName
* HTML 5: APIs in HTML documents
Element.before()
================

**`ChildNode.before`** 方法可以在 `ChildNode` 这个节点的父节点中插入一系列的 `Node` 或者字符串对象，位置就是在 `ChildNode` 节点的前面，字符串对象其实和 `Text` (en-US) 节点一样的方式来完成插入的。

语法
--


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

### 参数

`param1`、…、`paramN`

一系列的 `Node` 或者字符串对象。

### 异常

`HierarchyRequestError` `DOMException`

无法在层次结构中的指定节点处插入节点时抛出。

示例
--

### 插入元素节点


```js
let container = document.createElement("div");
let p = document.createElement("p");
container.appendChild(p);
let span = document.createElement("span");

p.before(span);

console.log(container.outerHTML);
// "<div><span></span><p></p></div>"
```

### 插入文本节点


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

p.before("Text");

console.log(container.outerHTML);
// "<div>Text<p></p></div>"
```

### 同时插入元素和文本


```js
let container = document.createElement("div");
let p = document.createElement("p");
container.appendChild(p);
let span = document.createElement("span");

p.before(span, "Text");

console.log(container.outerHTML);
// "<div><span></span>Text<p></p></div>"
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-childnode-before① |

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

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

参见
--

* `Element.after()`
* `Element.append()`
* `Node.appendChild()`
* `Node.insertBefore()`
* `Element.insertAdjacentElement()`
* `NodeList`
focusout
========

当元素即将失去焦点时，focusout 事件被触发。focusout 事件和 blur 事件之间的主要区别在于后者不会冒泡。

基本信息
----

Specification

DOM L3

Interface
`FocusEvent`
Bubbles

Yes

Cancelable

No

Target

Element

Default Action

None.

属性
--

| Property | Type | Description |
| --- | --- | --- |
| `target` 只读  | `EventTarget` | Event target losing focus. |
| `type` 只读  | `DOMString` | The type of event. |
| `bubbles` 只读  | `Boolean` | Whether the event normally bubbles or not. |
| `cancelable` 只读  | `Boolean` | Whether the event is cancellable or not. |
| `relatedTarget` 只读  | `EventTarget` (DOM element) | Event target receiving focus. |

规范
--

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

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

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

相关事件
----

* `focus`
* `blur`
* `focusin` (en-US)
* `focusout`
Element.localName
=================

**`Element.localName`** 只读属性，返回本地名称的。

**备注：** 在 DOM4 之前这个 API 定义在`Node`接口。

语法
--
```

name = element.localName
```

### 返回值

`DOMString` 返回元素限定名的本地部分。

示例
--

(必须配合 XML 文档类型，如 `text/xml` 或 `application/xhtml+xml`.)


```xml
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:svg="http://www.w3.org/2000/svg">
<head>
  <script type="application/javascript"><![CDATA[
 function test() {
 var text = document.getElementById('text');
 var circle = document.getElementById('circle');

 text.value = "<svg:circle> has:\n" +
 "localName = '" + circle.localName + "'\n" +
 "namespaceURI = '" + circle.namespaceURI + "'";
 }
 ]]></script>
</head>
<body onload="test()">
  <svg:svg version="1.1"
 width="100px" height="100px"
 viewBox="0 0 100 100">
    <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/>
  </svg:svg>
  <textarea id="text" rows="4" cols="55"/>
</body>
</html>
```

说明
--

节点的本地名称是节点限定名的一部分出现在冒号之后。限定名通常当作特定 XML 文档命名空间的一部分。例如在限定名 `ecomm:partners` 中 `partners` 是本地名，`ecomm` 是前缀。


```xml
<ecomm:business id="soda\_shop" type="brick\_n\_mortar" xmlns:ecomm="http://example.com/ecomm">
  <ecomm:partners>
    <ecomm:partner id="1001">Tony's Syrup Warehouse
    </ecomm:partner>
  </ecomm:partner>
</ecomm:business>
```


**备注：** 在 Gecko 1.9.2 之前，此属性返回 HTML DOM 的 HTML 元素本地名称的大写版本 (而不是 XML DOM 的 HTML 元素). 在最后一个版本，符合 HTML5 规范下，当 HTML DOM 的 HTML 或 XML DOMs 的 XHTML 的小写元素时此属性返回内部 DOM storage。`tagName` 属性仍然返回 HTML DOM 的 HTML 元素本地名称的大写版本。

规范
--

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

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

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

参见
--

* `Element.namespaceURI`
* `Element.prefix`
* `Attr.localName`
* `Node.localName` (en-US)
Element.scrollBy()
==================

**`scrollBy()`** 方法是使得元素滚动一段特定距离的 `Element` 接口。

Syntax
------
```

element.scrollBy(x-coord, y-coord);
element.scrollBy(options)
```

### Parameters

* `x-coord` 是元素要在横轴上滚动的距离。
* `y-coord` 是元素要在纵轴上滚动的距离。

- or -

* `options` 是一个 `ScrollToOptions` 字典。
例子
--


```js
// 让元素滚动
element.scrollBy(300, 300);
```


使用 `options`:


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

规范
--

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

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

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