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

**`Element.getBoundingClientRect()`** 方法返回一个 `DOMRect` 对象，其提供了元素的大小及其相对于视口的位置。

语法
--


```js
getBoundingClientRect()
```

### 参数

无。

### 返回值

返回值是一个 `DOMRect` 对象，是包含整个元素的最小矩形（包括 `padding` 和 `border-width`）。该对象使用 `left`、`top`、`right`、`bottom`、`x`、`y`、`width` 和 `height` 这几个以像素为单位的只读属性描述整个矩形的位置和大小。除了 `width` 和 `height` 以外的属性是相对于视图窗口的左上角来计算的。

![](/zh-CN/docs/Web/API/Element/getBoundingClientRect/element-box-diagram.png)

该方法返回的 `DOMRect` 对象中的 `width` 和 `height` 属性是包含了 `padding` 和 `border-width` 的，而不仅仅是内容部分的宽度和高度。在标准盒子模型中，这两个属性值分别与元素的 `width`/`height` + `padding` + `border-width` 相等。而如果是 `box-sizing: border-box`，两个属性则直接与元素的 `width` 或 `height` 相等。

这个对象是由该元素的 `getClientRects()` 方法返回的一组矩形的集合，就是该元素的 CSS 边框大小。

空边框盒（译者注：没有内容的边框）会被忽略。如果所有的元素边框都是空边框，那么这个矩形给该元素返回的 `width`、`height` 值为 0，`left`、`top` 值为第一个 CSS 盒子（按内容顺序）的 top-left 值。

如果你需要获得边界矩形相对于整个网页左上角的位置，则可以将当前的滚动位置（可通过 `window.scrollX` 和 `window.scrollY` 获得）添加到 `top` 和 `left` 属性上。获得的边界矩形与当前的滚动位置无关。

示例
--

### 基础示例

在这个简单的示例中，获得的 `DOMRect` 对象表示的是一个简单的 `<div>` 元素的边界客户端矩形，并将其属性值显示出来。


```html
<div></div>
```



```css
div {
  width: 400px;
  height: 200px;
  padding: 20px;
  margin: 50px auto;
  background: purple;
}
```



```js
let elem = document.querySelector("div");
let rect = elem.getBoundingClientRect();
for (var key in rect) {
  if (typeof rect[key] !== "function") {
    let para = document.createElement("p");
    para.textContent = `${key} : ${rect[key]}`;
    document.body.appendChild(para);
  }
}
```


注意：`width`/`height` 是与元素的 `width`/`height` + `padding` 相等的。

也同样注意 `x`/`left`、`y`/`top`、`right` 和 `bottom` 与视口边缘到元素对应的一侧的绝对距离相等。

### 滚动

这个示例演示了当网页滚动时，边界客户端矩形是如何变化的。


```html
<div id="example"></div>
<div id="controls"></div>
```



```css
div#example {
  width: 400px;
  height: 200px;
  padding: 20px;
  margin: 50px auto;
  background: purple;
}

body {
  padding-bottom: 1000px;
}
p {
  margin: 0;
}
```



```js
function update() {
  const container = document.getElementById("controls");
  const elem = document.getElementById("example");
  const rect = elem.getBoundingClientRect();

  container.innerHTML = "";
  for (let key in rect) {
    if (typeof rect[key] !== "function") {
      let para = document.createElement("p");
      para.textContent = `${key} : ${rect[key]}`;
      container.appendChild(para);
    }
  }
}

document.addEventListener("scroll", update);
update();
```

规范
--

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

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

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

参考资料
----

* `getClientRects()`
* MSDN: `getBoundingClientRect`
* MSDN: `ClientRect`，更早版本的 `DOMRect`
Element.setAttributeNode()
==========================

`setAttributeNode()` 为指定的 Element 添加属性节点。

Syntax
------
```

var replacedAttr = element.setAttributeNode(attribute);
```


* `attribute 是添加到 element 中的属性节点`.
* `replacedAttr` 是被替换掉的属性节点。如果存在原有属性，则函数返回原有属性节点。
Example
-------
```

// <div id="one" align="left">one</div>
// <div id="two">two</div>
var d1 = document.getElementById("one");
var d2 = document.getElementById("two");
var a = d1.getAttributeNode("align");
d2.setAttributeNode(a.cloneNode(true));
alert(d2.attributes[1].value)
// returns: `left'
```

Notes
-----

如果 element 中已经存在该属性名的属性，则函数使用新的属性替换掉原有的属性并将原有属性返回

这个方法很少被用到，多数情况下使用函数 `setAttribute()` 修改 element 的属性。

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: setAttributeNode (introduced in DOM Level 1 Core)
Element.scrollIntoView()
========================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
`Element` 接口的 `scrollIntoView()` 方法会滚动元素的父容器，使被调用 `scrollIntoView()` 的元素对用户可见。

语法
--


```js
scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(scrollIntoViewOptions)
```

### 参数

`alignToTop`可选

一个布尔值：

* 如果为 `true`，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 `scrollIntoViewOptions: {block: "start", inline: "nearest"}`。这是这个参数的默认值。
* 如果为 `false`，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的 `scrollIntoViewOptions: {block: "end", inline: "nearest"}`。

`scrollIntoViewOptions` 可选 
实验性

一个包含下列属性的对象：

`behavior` 可选

定义滚动是立即的还是平滑的动画。该选项是一个字符串，必须采用以下值之一：

* `smooth`：滚动应该是平滑的动画。
* `instant`：滚动应该通过一次跳跃立刻发生。
* `auto`：滚动行为由 `scroll-behavior` 的计算值决定。

`block` 可选

定义垂直方向的对齐，`start`、`center`、`end` 或 `nearest` 之一。默认为 `start`。

`inline` 可选

定义水平方向的对齐，`start`、`center`、`end` 或 `nearest` 之一。默认为 `nearest`。


### 返回值

无 (`undefined`)。

示例
--


```js
const element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({ block: "end" });
element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
```

注意
--

取决于其他元素的布局情况，此元素可能不会完全滚动到顶端或底端。

规范
--

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

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

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

参见
--

* `Element.scrollIntoViewIfNeeded()` 
非标准
GlobalEventHandlers.onpointercancel
===================================

A `global event handler` for the `pointercancel` event.

语法
--
```

var cancelHandler = targetElement.onpointercancel;
```

### 返回值

`cancelHandler`

元素`targetElement` 的 *pointercancel* 事件处理器。

示例
--

该示例展示使用 *onpointercancel 设置一个元素的* *pointercancel* 事件处理器的两个方法。


```js
<html>
<script>
function cancelHandler(ev) {
 // 处理 pointercancel 事件
}
function init() {
 var el=document.getElementById("target1");
 el.onpointercancel = cancelHandler;
}
</script>
<body onload="init();">
<div id="target1"> Touch me ... </div>
<div id="target2" onpointercancel="cancelHandler(event)"> Touch me ... </div>
</body>
</html>
```

规范
--

| Specification |
| --- |
| Pointer Events # the-pointercancel-event |
| Pointer Events # dom-globaleventhandlers-onpointercancel |

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

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

参见
--

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

**`Element.scrollLeft`** 属性可以读取或设置元素滚动条到元素左边的距离。

注意如果这个元素的内容排列方向（`direction`）是`rtl` (right-to-left) ，那么滚动条会位于最右侧（内容开始处），并且`scrollLeft`值为 0。此时，当你从右到左拖动滚动条时，scrollLeft 会从 0 变为负数。

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

语法
--
```

//获取滚动条到元素左边的距离
var sLeft = element.scrollLeft;
```


`sLeft`是一个整数，代表元素滚动条距离元素左边多少像素。
```

//设置滚动条滚动了多少像素
element.scrollLeft = 10;
```


`scrollLeft` 可以是任意整数，然而：

* 如果元素不能滚动（比如：元素没有溢出），那么`scrollLeft` 的值是 0。
* 如果给`scrollLeft` 设置的值小于 0，那么`scrollLeft` 的值将变为 0。
* 如果给`scrollLeft` 设置的值大于元素内容最大宽度，那么`scrollLeft` 的值将被设为元素最大宽度。
示例
--

### HTML


```html
<div id="container">
  <div id="content">Click the button to slide right!</div>
</div>

<button id="slide" type="button">Slide right</button>
```

### CSS


```css
#container {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  overflow-x: scroll;
}

#content {
  width: 250px;
  background-color: #ccc;
}
```

### JavaScript


```js
const button = document.getElementById("slide");

button.onclick = function () {
  document.getElementById("container").scrollLeft += 20;
};
```

### 结构

规范
--

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

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

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

参见
--

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

元素的 `scroll` 事件处理函数。

### 语法
```

element.onscroll = functionReference
```

### 参数

functionReference 是一个函数的引用。当该元素滚动时，会执行该函数。

**备注：** 不要将 onscroll 与 `onwheel`混淆。onwheel 是鼠标滚轮旋转，而 onscroll 处理的是对象内部内容区的滚动事件。

示例
--


```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
 #container {
 position: absolute;
 height: auto;
 top: 0;
 bottom: 0;
 width: auto;
 left: 0;
 right: 0;
 overflow: auto;
 }

 #foo {
 height: 1000px;
 width: 1000px;
 background-color: #777;
 display: block;
 }
 </style>
  </head>
  <body>
    <div id="container">
      <div id="foo"></div>
    </div>

    <script type="text/javascript">
 document.getElementById("container").onscroll = function () {
 console.log("scrolling");
 };
 </script>
  </body>
</html>
```

Example
-------

这个示例能说明更多问题

This example monitors scrolling on a `<textarea>`, and logs the element's vertical scroll position accordingly.

### HTML


```html
<textarea>1 2 3 4 5 6 7 8 9</textarea>
<p id="log"></p>
```

### CSS


```css
textarea {
  width: 4rem;
  height: 8rem;
  font-size: 3rem;
}
```

### JavaScript


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

textarea.onscroll = logScroll;

function logScroll(e) {
  log.textContent = `Scroll position: ${e.target.scrollTop}`;
}
```

### Result

注意
--

当用户滚动某个元素的内容时 `scroll` 事件将会被触发。`Element.onscroll` 同等于 `element.addEventListener("scroll" ... )`。

规范
--

| Specification |
| --- |
| CSSOM View Module # eventdef-document-scroll |
| HTML Standard # handler-onscroll |
Element.shadowRoot
==================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
`Element.shadowRoot` 是只读属性，表示元素挂载的 shadow root。可以使用 `Element.attachShadow` 给一个已存在的元素添加 shadow root。

值
-

可以是一个`ShadowRoot`实例对象，但如果一个 shadow root 的 `mode`被设置为 `closed`那么它的值将会是 `null`。(详情请见 `Element.attachShadow` ).

示例
--

下面代码片段取自 life-cycle-callbacks (在线查看), 在这个示例中我们创建了一个在元素属性中指定了大小和颜色的正方形元素。

在`<custom-square>`标签的 class 定义中我们在生命周期的回调函数里调用了一些外部方法——`updateStyle()`，正是这个函数使得我们添加的正方形元素可以改变大小和颜色。你可以看到我们将`this`（即我们创建的正方形元素本身）作为一个参数传入了这个方法。


```js
connectedCallback() {
  console.log('Custom square element added to page.');
  updateStyle(this);
}

attributeChangedCallback(name, oldValue, newValue) {
  console.log('Custom square element attributes changed.');
  updateStyle(this);
}
```


在`updateStyle()`函数中我们通过`Element.shadowRoot`获取到了 Shadow DOM 引用。在这里我们利用了标准的 DOM 遍历技巧来获取在 Shadow DOM 中`<style>`元素并更新了其中的 CSS 样式：


```js
function updateStyle(elem) {
  const shadow = elem.shadowRoot;
  const childNodes = Array.from(shadow.childNodes);

  childNodes.forEach((childNode) => {
    if (childNode.nodeName === "STYLE") {
      childNode.textContent = `
 div {
 width: ${elem.getAttribute("l")}px;
 height: ${elem.getAttribute("l")}px;
 background-color: ${elem.getAttribute("c")};
 }
 `;
    }
  });
}
```

规范
--

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

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

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

`Element` 接口的 **`onfullscreenerror`** 属性是在`Element` 过渡到或退出全屏模式发生错误后处理事件`fullscreenerror`的事件处理程序。

语法
--
```

targetElement.onfullscreenerror = fullscreenErrorHandler;
```

### 值

一个处理事件`fullscreenerror`的事件处理程序。

示例
--

本示例尝试不从用户发起的事件 (如点击事件`click`或键盘事件`keypress`) 处理程序来触发全屏，由于全屏模式只允许由用户主动输入触发，因此该操作会发生错误，从而导致`Element`会触发`fullscreenerror`事件传递给错误处理程序


```js
let elem = document.querySelector("video")}}

elem.onfullscreenerror = function ( event ) {
  displayWarning("Unable to switch into full-screen mode.");
};

//....

elem.requestFullscreen();
```

规范
--

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

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

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

参见
--

* Fullscreen API
* Guide to the Fullscreen API
* `fullscreenerror`
* `Element.onfullscreenchange`
* `Document.onfullscreenerror`
Element.insertAdjacentElement()
===============================

**`insertAdjacentElement()`** 方法将一个给定的元素节点插入到相对于被调用的元素的给定的一个位置。

语法
--
```

element.insertAdjacentElement(position, element);
```

### 参数

position

A `DOMString` 表示相对于该元素的位置；必须是以下字符串之一：

* `'beforebegin'`: 在该元素本身的前面。
* `'afterbegin'`:只在该元素当中，在该元素第一个子孩子前面。
* `'beforeend'`:只在该元素当中，在该元素最后一个子孩子后面。
* `'afterend'`: 在该元素本身的后面。

element

要插入到树中的元素。

### 返回值

插入的元素，插入失败则返回 null.

### 异常

| 异常 | 说明 |
| --- | --- |
| `SyntaxError` | 插入的位置是一个无法识别的值。 |
| `TypeError` | 插入的元素不是一个有效元素。 |

### 位置命名的可视化展示


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


**备注：** 当节点处于 DOM 树中而且有一个父元素的时候 `beforebegin` 和 `afterend` 操作才能起作用。

例子
--


```js
beforeBtn.addEventListener("click", function () {
  var tempDiv = document.createElement("div");
  tempDiv.style.backgroundColor = randomColor();
  activeElem.insertAdjacentElement("beforebegin", tempDiv);
  setListener(tempDiv);
});

afterBtn.addEventListener("click", function () {
  var tempDiv = document.createElement("div");
  tempDiv.style.backgroundColor = randomColor();
  activeElem.insertAdjacentElement("afterend", tempDiv);
  setListener(tempDiv);
});
```


看看我们在 Github（也可以参考 源码）上的 insertAdjacentElement.html 演示。在一个容器当中我们有一组`<div>` 元素。点击其中一个 div 时，这个容器会处于选中状态，然后你就可以按下*Insert before* 或*Insert after* 按钮通过 `insertAdjacentElement() 方法`来把一个新的 divs 插入到选中的元素前面或者后面。

规范
--

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

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

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

参见
--

* `Element.insertAdjacentHTML()`
* `Element.insertAdjacentText()`
* `Node.insertBefore()`
* `Node.appendChild()` (same effect as `beforeend`)
Element.remove()
================

**`Element.remove()`** 方法，把对象从它所属的 DOM 树中删除。

语法
--
```

node.remove();
```

示例
--

### 使用 `remove()`


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



```js
var el = document.getElementById("div-02");
el.remove();
// id 为 'div-02' 的 div 被删掉了
```

### `Element.remove()` 是不可见的

在 `with` 语句中，`remove()` 方法是不可见的。参阅 `Symbol.unscopables` 了解更多信息。


```js
with (node) {
  remove();
}
// ReferenceError: remove is not defined
```

规范
--

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

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

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

参见
--

* `ChildNode` 纯接口。
* 实现此纯接口的对象类型： `CharacterData`、`Element` , 和 `DocumentType`.
Element.getAttribute()
======================

概要
--

**`getAttribute()`** 返回元素上一个指定的属性值。如果指定的属性不存在，则返回 `null` 或 `""` （空字符串）；具体细节，请参阅 Notes 部分。

语法
--
```

let attribute = element.getAttribute(attributeName);
```


上面：

* `attribute` 是一个包含 `attributeName` 属性值的字符串。
* `attributeName` 是你想要获取的属性值的属性名称。
例子
--


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

alert(align);
// shows the value of align for the element with id="div1"
```

备注
--

当在被标记为 HTML 文档中的一个 HTML 元素上调用此方法时，`getAttribute()` 会先将其参数转换为小写形式。

当指定的属性不存在于元素上时，所有浏览器（Firefox、Internet Explorer、Opera 最新版本、Safari、Konqueror 以及 iCab 等等）都返回 `null`，这也是当前 DOM 规范草案规定的。然而，旧的 DOM 3 Core specification 认为此时正确的返回值应该是一个空字符串，一些 DOM 实现环境实现了该行为（behavior）。在 XUL (Gecko) 中，getAttribute 的实现遵从 DOM 3 Core specification，返回一个空字符串。因此，如果一个属性可能不存在于指定的元素上，在调用 `getAttribute()` 之前，你应该使用 `element.hasAttribute()` 来检测该属性是否存在。

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

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

规范
--

* DOM Level 2 Core: getAttribute (introduced in DOM Level 1 Core)
* HTML 5: APIs in HTML documents
compositionupdate
=================

**`compositionupdate`** 事件触发于字符被输入到一段文字的时候（这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）

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

属性
--

| Property | Type | Description |
| --- | --- | --- |
| `target` 只读  | `EventTarget` | 焦点所在的，处理文字输入的元素。 |
| `type` 只读  | `DOMString` | The type of event. |
| `bubbles` 只读  | `boolean` | Does the event normally bubble? |
| `cancelable` 只读  | `boolean` | Is it possible to cancel the event? |
| `view` 只读  | `WindowProxy` | `Document.defaultView` (the `window` of the document). |
| `detail` 只读  | `long` (`float`) | 0. |
| `data` 只读  | `DOMString` (string) | 要被替换掉的字符串，如果输入时没有字符串被选，则为空字符串。只读。 |
| `locale` 只读  | `DOMString` (string) | 输入事件的语言代号，或者空字符串。只读。 |

规范
--

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

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

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

参阅
--

* `compositionstart`
* `compositionupdate`
* `compositionend`
Element.clientTop
=================

一个元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距。`clientTop` 是只读的。

基于 Gecko 的应用从 Gecko 1.9（Firefox 3 Firefox bug 111207）开始支持 clientTop。该属性在 Firefox 2 或更早的版本中不被支持。

语法
--


```js
var top = element.clientTop;
```

示例
--

padding-top

Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.

All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

Cat image and text coming from www.best-cat-art.com

padding-bottom

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

备注
--

`clientTop` 首次出现于 MS IE DHTML 对象模型中。

参见
--

* MSDN: Measuring Element Dimension and Location
GlobalEventHandlers.onlostpointercapture
========================================

The **`onlostpointercapture`** event handler property of the `GlobalEventHandlers` interface returns the event handler (function) for the `lostpointercapture` event type.

语法
--
```

window.onlostpointercapture = functionReference
```

示例
--


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

规范
--

| Specification |
| --- |
| Pointer Events # the-lostpointercapture-event |
| Pointer Events # dom-globaleventhandlers-onlostpointercapture |

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

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

参见
--

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

`元素`方法 **`removeAttribute()`** 从指定的元素中删除一个属性。

### 语法
```

element.removeAttribute(attrName);
```

### 参数

属性名

`DOMString`指定要从元素中移除的属性的名称。如果指定的属性不存在，则 removeAttribute() 返回，但不会生成错误。

### 返回值

IE 返回 boolean 类型值，其他返回 undefined

**备注：** 因为 `removeAttribute()` 不会返回任何有效值，你不能使用链式方法（连续使用方法，例如 `document.body.removeAttribute("first").removeAttribute("second")…`）连续移除多个属性。

使用说明
----

若要彻底移除一个属性的效果，应当使用 `removeAttribute()`，而不是使用 `setAttribute()` 将属性值设置为 `null`。对于许多属性，如果仅将其值设为 `null`，这不会造达成和预期一样的效果。

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

例子
--


```js
// Given: <div id="div1" align="left" width="200px">
document.getElementById("div1").removeAttribute("align");
// Now: <div id="div1" width="200px">
```

规范
--

DOM Level 2 Core: removeAttribute (introduced in DOM Level 1 Core)

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

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

**`mousedown`** 事件在定点设备（如鼠标或触摸板）按钮在元素内按下时，会在该元素上触发。

**备注：** 其与 `click` 事件的区别是，`click` 事件在完整的单击操作完成后触发；也就是说，`click` 事件在按下并释放鼠标按钮后并且指针仍在同一元素内时触发。`mousedown` 事件在按下鼠标按钮的那一刻触发。

语法
--

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


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

onmousedown = (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` 的别名。

示例
--

参见 `mousemove` 事件的示例。

规范
--

| Specification |
| --- |
| UI Events # event-type-mousedown |
| HTML Standard # handler-onmousedown |

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

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

参见
--

* 事件介绍
* `mouseup`
* `mousemove`
* `click`
* `dblclick`
* `mouseover`
* `mouseout`
* `mouseenter`
* `mouseleave`
* `contextmenu`