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

**`Element.after()`** 方法会在其父节点的子节点列表中插入一些 `Node` 或 `DOMString` 对象。插入位置为该节点之后。`DOMString` 对象会被以 `Text` (en-US) 的形式插入。

语法
--


```js
after(node1)
after(node1, node2)
after(node1, node2, /\* … ,\*/ nodeN)
```

### 参数

`node1`, …, `nodeN`

一组准备插入的 `Node` 或字符串。

### 异常

* `HierarchyRequestError`: 在某些不正确的层级结构进行了插入操作。
示例
--

### 插入元素


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

p.after(span);

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

### 插入文本


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

p.after("Text");

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

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


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

p.after(span, "Text");

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

规范
--

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

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

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

参见
--

* `Element.before()`
* `Element.append()`
* `Node.appendChild()`
* `Element.insertAdjacentElement()`
* `NodeList`
compositionstart
================

文本合成系统如 input method editor（即输入法编辑器）开始新的输入合成时会触发 **`compositionstart`** 事件。

例如，当用户使用拼音输入法开始输入汉字时，这个事件就会被触发。

|  |  |
| --- | --- |
| **Bubbles** | Yes |
| **Cancelable** | Yes |
| **Interface** | `CompositionEvent` |
| **Event handler property** | 

|  |
| --- |
| None |

 |

示例
--


```js
const inputElement = document.querySelector('input[type="text"]');

inputElement.addEventListener("compositionstart", (event) => {
  console.log(`generated characters were: ${event.data}`);
});
```

### 动态演示

#### HTML


```html
<div class="control">
  <label for="name"
 >On macOS, click in the textbox below,<br />
    then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label
 >
  <input type="text" id="example" name="example" />
</div>

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


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

.control {
  grid-area: control;
}

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

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

label,
button {
  display: block;
}

input[type="text"] {
  margin: 0.5rem 0;
}

kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}
```


#### JS


```js
const inputElement = document.querySelector('input[type="text"]');
const log = document.querySelector(".event-log-contents");
const clearLog = document.querySelector(".clear-log");

clearLog.addEventListener("click", () => {
  log.textContent = "";
});

function handleEvent(event) {
  log.textContent = log.textContent + `${event.type}: ${event.data}\n`;
}

inputElement.addEventListener("compositionstart", handleEvent);
inputElement.addEventListener("compositionupdate", handleEvent);
inputElement.addEventListener("compositionend", handleEvent);
```


#### 结果

规范
--

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

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

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

参见
--

* 相关事件：`compositionend`, `compositionupdate`.
Element：gotpointercapture 事件
============================

**`gotpointercapture`** 事件是 GlobalEventHandlers 的属性，这个事件返回 gotpointercapture 类型的事件操作。

语法
--
```

window.ongotpointercapture = functionReference
```

示例
--


```js
<html>
<script>
function overHandler(ev) {
 // Determine the target event's gotpointercapture handler
 var gotCaptureHandler = ev.target.ongotpointercapture;
}
function init() {
 var el=document.getElementById("target");
 el.ongotpointercapture = overHandler;
}
</script>
<body onload="init();">
<div id="target"> Touch me ... </div>
</body>
</html>
```

规范
--

| Specification |
| --- |
| Pointer Events # the-gotpointercapture-event |
| Pointer Events # dom-globaleventhandlers-ongotpointercapture |

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

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

参见
--

* 相关事件
    + `lostpointercapture`
    + `pointerover`
    + `pointerenter`
    + `pointerdown`
    + `pointermove`
    + `pointerup`
    + `pointercancel`
    + `pointerout`
    + `pointerleave`
Element.children
================

**`Element.children`** 是一个只读属性，返回 一个 Node 的子`elements` ，是一个动态更新的 `HTMLCollection`。

语法
--
```

var children = node.children;
```


```
var elList = elementNodeReference.children;
```

备注
--

`children` 属性为只读属性，对象类型为 `HTMLCollection`，你可以使用 `elementNodeReference.children[1].nodeName` 来获取某个子元素的标签名称。

例子
--


```js
// parg 是一个指向<p>元素的对象引用
if (parg.childElementCount) {
  // 检查这个<p>元素是否有子元素
  // 译者注:childElementCount 有兼容性问题
  var children = parg.children;
  for (var i = 0; i < children.length; i++) {
    // 通过 children[i] 来获取每个子元素
    // 注意:List 是一个 live 的 HTMLCollection 对象，在这里添加或删除 parg 的子元素节点，都会立即改变 List 的值。
  }
}
```

规范
--

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

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

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

参见
--

* The `Element` and `ChildNode` pure interfaces.
* Object types implementing this pure interface: `Document`, `Element`, and `DocumentFragment`.
Element：pointerover 事件
======================

The `pointerover` event is fired when a pointing device is moved into an element's hit test boundaries.

语法
--
```

var overHandler = targetElement.onpointerover;
```

### 返回值

`overHandler`

pointerover 事件处理器返回目标元素的`overHandler.`

案例
--

这里使用两种方式展示了如何去使用 *onpointerover* 去设置一个元素的 *pointerover* 事件处理器


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

规范
--

| Specification |
| --- |
| Pointer Events # the-pointerover-event |
| Pointer Events # dom-globaleventhandlers-onpointerover |

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

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

参见
--

* 相关事件
    + `gotpointercapture`
    + `lostpointercapture`
    + `pointerenter`
    + `pointerdown`
    + `pointermove`
    + `pointerup`
    + `pointercancel`
    + `pointerout`
    + `pointerleave`
Element.onfullscreenchange
==========================

元素接口的 **`onfullscreenchange`** 属性是在元素过渡到或过渡到全屏模式时触发的全屏更改事件的事件处理程序。

语法
--
```

targetDocument.onfullscreenchange = fullscreenChangeHandler;
```

### 值

当事件处理程序处于 `fullscreenchange` 模式的时候，表明游戏元素被改变了或者是退出了全屏模式

Example
-------

本示例建立一个`fullscreenchange` 处理程序，`handleFullscreenChange ()`。此函数通过检查 `event.target` 的值来确定调用它的元素，然后将文档的`fullscreenElement` 值与元素进行比较，以查看它们是否为同一节点。

这给了我们一个值，即 `isFullscreen`, 我们将其传递到一个名为 `adjustMyControls()` 的函数，我们想象它是一个函数，可以对应用的用户界面进行调整，以便在全屏模式下而不是在窗口。


```js
function toggleFullscreen() {
  let elem = document.querySelector("video");

  elem.onfullscreenchange = handleFullscreenChange;
  if (!document.fullscreenElement) {
    elem
      .requestFullscreen()
      .then({})
      .catch((err) => {
        alert(
          `Error attempting to enable full-screen mode: ${err.message} (${err.name})`,
        );
      });
  } else {
    document.exitFullscreen();
  }
}

function handleFullscreenChange(event) {
  let elem = event.target;
  let isFullscreen = document.fullscreenElement === elem;

  adjustMyControls(isFullscreen);
}
```

规范
--

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

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

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

参见
--

* Fullscreen API
* Guide to the Fullscreen API
* `fullscreenchange`
* `Element.onfullscreenerror`
* The `Document` equivalent: `onfullscreenchange`.
GlobalEventHandlers.ontransitionend
===================================

`GlobalEventHandlers` 混入对象的 **`ontransitionend`** 属性是一个处理 `transitionend` 事件的 事件处理函数。

`transitionend` 事件的事件处理函数，在某个 CSS transition 完成时触发。

**备注：** 如果在 transition 完成前，该 transition 已从目标节点上移除，那么 `transitionend` 将不会被触发。一种可能的情况是修改了目标节点的 `transition-property` 属性，另一种可能的情况是 `display` 属性被设为 `"none"`。

语法
--


```js
var transitionEndHandler = target.ontransitionend;

target.ontransitionend = Function
```

### 值

一个 `Global_Objects/Function` 会在 `transitionend` 事件发生时被触发，表示目标节点的 CSS transition 已经完成。目标节点可能是一个 HTML 元素 (`HTMLElement`)，document (`Document`)，或者 window (`Window`)。该函数接受一个参数：一个描述该事件的 `TransitionEvent` 对象；其 `TransitionEvent.elapsedTime` (en-US) 属性值与 `transition-duration` 的值一致。

**备注：** `elapsedTime` 并不包括 transition 效果开始前的时间，也就是说，`transition-delay` 属性并不会影响 `elapsedTime` 的值，其在延迟结束、动画开始之时，值为零。

示例
--

本例中，我们使用了 `transitionrun` (en-US) 和 `transitionend` 事件来监测 transition 的开始和结束，从而在 transition 的过程中更新文本。这也可以被用来触发动画或者其他效果来实现连锁反应。

### HTML

这里简单地创建了一个 `<div>`，我们将使用 CSS 来改变其大小和颜色。


```html
<div class="box"></div>
```

### CSS

以下为 CSS 样式，并添加了 transition 属性。当鼠标悬浮时，盒子大小和颜色会发生变化，而且还会转动。


```css
.box {
  margin-left: 70px;
  margin-top: 30px;
  border-style: solid;
  border-width: 1px;
  display: block;
  width: 100px;
  height: 100px;
  background-color: #0000ff;
  color: #ffffff;
  padding: 20px;
  font:
    bold 1.6em "Helvetica",
    "Arial",
    sans-serif;
  transition:
    width 2s,
    height 2s,
    background-color 2s,
    transform 2s,
    color 2s;
}

.box:hover {
  background-color: #ffcccc;
  color: #000000;
  width: 200px;
  height: 200px;
  transform: rotate(180deg);
}
```

### JavaScript

接下来，我们需要事件处理函数以在 transition 发生和结束时修改文本内容。


```js
let box = document.querySelector(".box");
box.ontransitionrun = function (event) {
  box.textContent = "Zooming...";
};
box.ontransitionend = function (event) {
  box.textContent = "Done!";
};
```

### 效果

最后的效果如下：

注意观察当鼠标悬浮在元素上以及移出时发生的变化。

规范
--

| Specification |
| --- |
| CSS Transitions # transitionend |

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

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

参见
--

* `TransitionEvent` 接口
* CSS 属性：`transition`、`transition-delay`、`transition-duration`、`transition-property`、`transition-timing-function`
* 相关事件：`transitionrun` (en-US)、`transitionstart`、`transitioncancel`
* 以 `Document` 为目标的该事件：`transitionend` (en-US)
* 以 `Window` 为目标的该事件：`transitionend` (en-US)
Element.setAttributeNS()
========================

`setAttributeNS` 添加一个新属性或更改具有给定命名空间和名称的一个属性的值。

句法
--
```

element.setAttributeNS(namespace,name,value)
```


* `namespace` 是指定属性的命名空间的一个字符串。
* `name` 是标识要设置的属性的一个字符串。
* `value` 是新属性的所需字符串值。
范例
--
```

let d = document.getElementById("d1");
d.setAttributeNS("http://www.mozilla.org/ns/specialspace", "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: setAttributeNS
Element.getElementsByTagNameNS()
================================

**`Element.getElementsByTagNameNS()`** 方法返回在指定命名空间内带有指定名称的动态 HTML 元素集合（而不是快照），搜索范围限定于指定元素的后代，类似于`Document.getElementsByTagNameNS`。

语法
--
```

elements = element.getElementsByTagNameNS(namespaceURI, localName)
```


* `elements` 是匹配元素的动态 HTML 元素集合`HTMLCollection`，其顺序为遍历树时匹配元素出现的先后。
* `element` 是查找的起始结点，查找范围为该元素的后代，并且不包含该元素自身。
* `namespaceURI` 是所要查询的元素的命名空间 URL (参考 `Node.namespaceURI` (en-US)). 举个例子，如果你想查找的是 XHTML 元素，你应该使用 XHTML 的命名空间 URL，`http://www.w3.org/1999/xhtml`。
* `localName` 是所要查询的元素的名称。其中特殊字符 "\*" 代表所有元素 (参考 `Node.localName` (en-US)).
示例
--


```js
// 检查一个 XHTML 文档中表格的单元格的对齐方式。
var table = document.getElementById("forecast-table");
var cells = table.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "td");

for (var i = 0; i < cells.length; i++) {
  var axis = cells[i].getAttribute("axis");
  if (axis == "year") {
    // grab the data
  }
}
```

规范
--

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

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

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

**`insertAdjacentHTML()`** 方法将指定的文本解析为 `Element` 元素，并将结果节点插入到 DOM 树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接使用 innerHTML 操作更快。

语法
--
```

element.insertAdjacentHTML(position, text);
```


`position`

一个 `DOMString`，表示插入内容相对于元素的位置，并且必须是以下字符串之一：

* `'beforebegin'`：元素自身的前面。
* `'afterbegin'`：插入元素内部的第一个子节点之前。
* `'beforeend'`：插入元素内部的最后一个子节点之后。
* `'afterend'`：元素自身的后面。

`text`

是要被解析为 HTML 或 XML 元素，并插入到 DOM 树中的 `DOMString`。

### 位置名称的可视化


```html
<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->
```


**备注：** beforebegin 和 afterend 位置，仅在节点在树中且节点具有一个 parent 元素时工作。

示例
--


```js
// 原为 <div id="one">one</div>
var d1 = document.getElementById("one");
d1.insertAdjacentHTML("afterend", '<div id="two">two</div>');

// 此时，新结构变成：
// <div id="one">one</div><div id="two">two</div>
```

注意
--

### 安全问题

使用 `insertAdjacentHTML` 插入用户输入的 HTML 内容的时候，需要转义之后才能使用。

如果只是为了插入文本内容（而不是 HTML 节点），不建议使用这个方法，建议使用`node.textContent` 或者 `node.insertAdjacentText()`。因为这样不需要经过 HTML 解释器的转换，性能会好一点。

规范
--

| Specification |
| --- |
| DOM Parsing and Serialization # dom-element-insertadjacenthtml |

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

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

参见
--

* 包括 Henri Sivonen 在内的某些 hacks.mozilla.org 客座文章 显示，`insertAdjacentHTML` 在某些情况下可以更快。
* `Element.insertAdjacentElement()`
* `Element.insertAdjacentText()`
GlobalEventHandlers.onauxclick
==============================

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

**`auxclick`** 事件在输入设备的非主按钮（除主按钮——通常是左键外的任何按钮）在同一个 `Element` 上按下并释放时触发。

实现该属性的一个目标是，提高浏览器与按钮行为之间的兼容性 - 事件行为正在更新，以便 `click` 只触发主按钮点击（例如，鼠标左键）。然后开发人员可以使用 `auxclick` 事件来为非主按钮点击提供明确的行为。在此之前，`click` 通常会针对所有输入设备按钮点击，浏览器行为有些不一致。

语法
--
```

element.onauxclick = functionRef(e);
```


事件处理函数是一个 `MouseEvent` 对象。只有事件被触发的按钮不同，该事件和普通点击事件的行为是完全相同的。

示例
--

在这个例子中我们定义了两个事件处理函数：`onclick` 和 `onauxclick`。前者改变按钮背景的颜色，而后者改变按钮前景（文本）的颜色。你可以通过使用多按钮鼠标尝试演示来查看这两种功能 (see it live on GitHub; also see the source code)。


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

function random(number) {
  return Math.floor(Math.random() \* number);
}

button.onclick = function () {
  var rndCol =
    "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
  button.style.backgroundColor = rndCol;
};

button.onauxclick = function () {
  var rndCol =
    "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
  button.style.color = rndCol;
};
```


**备注：** 如果你使用的是三键鼠标，你会注意到在单击任一非鼠标左键时该 `onauxclick` 处理程序会运行。

Notes
-----

当用户点击一个元素时，将引发该 `click` 事件。之后的 click 事件将发生在 `mousedown` 和 `mouseup` 事件之后。

每次只有一个 `click` 处理程序可以通过此属性分配给一个对象。你可能倾向于使用`EventTarget.addEventListener()` 方法，因为它更灵活并且是 DOM Events 规范的一部分。

规范
--

`onauxclick` 不是任何官方规范的一部分，它被定义在 auxclick Draft Community Group Report.

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

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

**`Element.namespaceURI`** 是一个只读属性，它返回元素的命名空间，若该元素不在命名空间中则返回`null` .

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

语法
--
```

namespace = element.namespaceURI
```

例子
--

在这段代码中，我们检查了元素的`localName`和`namespaceURI`。如果 `namespaceURI` 返回 XUL 命名空间， `localName` 返回"browser"，于是这个节点被理解为是一个 XUL `<browser/>`。


```js
if (
  element.localName == "browser" &&
  element.namespaceURI ==
    "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
) {
  // this is a XUL browser
}
```

注意
--

这不是一个计算值，它是基于范围内的名称空间声明检查的名称空间查找的结果。节点命名空间在节点创建时被冻结。

在 Firefox 3.5 以及之前的版本，HTML 文档中的 HTML 元素的名称空间 URI 为 `null`。在更早的版本中，符合 HTML5，它是`http://www.w3.org/1999/xhtml` 如 XHTML。

你可以使用 DOM Level 2 方法指定的`namespaceURI`创建一个元素 document.createElementNS。

DOM 本身不处理或执行名称空间验证。它由 DOM 应用程序完成，以执行任何必要的验证。注意，名称空间前缀一旦与某个特定元素相关联，就不能更改。

说明
--

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

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

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

See also
--------

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

`setAttributeNodeNS` 可以给一个元素添加一个新的命名空间的属性节点。

（如果对中文有疑惑，请直接阅读原文）

Syntax
------
```

replacedAttr = element.setAttributeNodeNS(attributeNode)
```


* `replacedAttr` 是被替换的节点，如果存在，由此函数返回。
* `attributeNode` 是一个属性节点。
Example
-------
```

// <div id="one" xmlns:myNS="http://www.mozilla.org/ns/specialspace"
            myNS:special-align="utterleft">one</div>
// <div id="two">two</div>

var myns = "http://www.mozilla.org/ns/specialspace";
var d1 = document.getElementById("one");
var d2 = document.getElementById("two");
var a = d1.getAttributeNodeNS(myns, "special-align");
d2.setAttributeNodeNS(a.cloneNode(true));
alert(d2.attributes[1].value) // returns: `utterleft'
```

Notes
-----

如果指定的属性在元素上存在，接着此属性被新的属性替换的话被替换的属性会被返回。

注意：如果你尝试设置的时候没有克隆那个节点，Mozia 会抛出一个 NS\_ERROR\_DOM\_INUSE\_ATTRIBUTE\_ERR："Attribute already in use" 错误，因为 DOM 需要克隆属性之后才能重复使用（不像其他节点一样可以被删除）。

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 Level 2 Core: setAttributeNodeNS
Element.setAttribute()
======================

设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。

要获取某个属性当前的值，可使用 `getAttribute()`；要删除某个属性，可使用 `removeAttribute()`。

语法
--
```

element.setAttribute(name, value);
```

### 参数

`name`

表示属性名称的字符串。A `DOMString` specifying the name of the attribute whose value is to be set. The attribute name is automatically converted to all lower-case when `setAttribute()` is called on an HTML element in an HTML document.

`value`

属性的值/新值。A `DOMString` 包含了分配给这个属性的值。任何非字符串的值都会被自动转换为字符串。

当在 HTML 文档中的 HTML 元素上调用 `setAttribute()` 方法时，该方法会将其属性名称（attribute name）参数小写化。

如果指定的属性已经存在，则其值变为传递的值。如果不存在，则创建指定的属性。

尽管对于不存在的属性，`getAttribute()` (en-US) 返回 `null`，你还是应该使用 `removeAttribute()` 代替 `elt.setAttribute(attr, null)` 来删除属性。

布尔属性（原文是 Boolean attributes）只要出现在元素上就会被认为是 `true` ，无论它的值是什么; 一般来说，你应该将 `value` 设置为空字符串 (`""`) 。(一些人使用这个属性的名称作为值; 这不会出现什么问题，但这是不规范的). See the example below for a practical demonstration.

由于将指定的值转换为字符串，因此指定 null 不一定能达到你的期望。而不是删除属性或将其值设置为`null`，而是将属性的值设置为字符串“null”。如果要删除属性，请调用`removeAttribute()`。

### 返回值

`undefined`### 例外

`无效字符错误`

指定的属性名称包含一个或多个在属性名称中无效的字符。

示例
--

在下面的例子中，`setAttribute()` 被用于设置 `<button>` 上的属性。

### HTML


```html
<button>Hello World</button>
```

### JavaScript


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

b.setAttribute("name", "helloButton");
b.setAttribute("disabled", "");
```


这说明了两件事：

* 上面对 setAttribute() 的第一次调用显示了将 name 属性的值更改为“helloButton”。你可以使用浏览器的页面检查器（Chrome，Edge，Firefox，Safari）查看此内容。
* 要设置布尔属性的值（例如禁用），可以指定任何值。建议使用空字符串或属性名称。重要的是，如果根本不存在该属性，则不管其实际值如何，都将其值视为真实。该属性的缺失表示其值是 false。通过将 Disabled 属性的值设置为空字符串（“”），我们将 disable 设置为 true，这将导致按钮被禁用。

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: setAttribute (introduced in DOM Level 1 Core)
* HTML5: APIs in HTML documents
浏览器兼容性
------

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

### Gecko 备注

使用 `setAttribute()` 修改某些属性值时，尤其是 XUL 中的 `value`，可能得不到期望结果。这是由于 `attribute` 指定的是默认值。要访问或修改当前值，应该使用 `property` 属性。例如，使用 `Element.value` 代替 `Element.setAttribute()`。
Element.removeAttributeNS()
===========================

`removeAttributeNS` 移除元素的指定属性

在 Firefox 3 及更高版本中，此方法会将 DOM 值重置为其默认值。

用法
--
```

element.removeAttributeNS(namespace,attrName);
```


* `namespace` 包含当前属性的 namespace 字符串
* `attrName` 当前移除的属性名字符串
例子
--
```

// <div id="div1" xmlns:special="http://www.mozilla.org/ns/specialspace"
//      special:specialAlign="utterleft" width="200px" />
d = document.getElementById("div1");
d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign");
// now: <div id="div1" width="200px" />
```

Notes
-----

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 Level 2 Core: removeAttributeNS
Element.prefix
==============

**`Element.prefix`** 只读属性返回指定元素的命名空间前缀，如果未指定前缀，则返回 null。

**备注：** 在 DOM4 之前，该 API 是在 `Node` interface 中定义的。

Syntax
------
```

string = element.prefix
```

Examples
--------

The following logs "x" to the console.


```xml
<x:div onclick="console.log(this.prefix)"/>
```

Notes
-----

This will only work when a namespace-aware parser is used, i.e. when a document is served with an XML MIME type. This will not work for HTML documents.

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

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

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

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

See also
--------

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