DOM 元素 属性 整理

属性

Element.attributes

属性返回该元素所有属性节点的一个实时集合。该集合是一个

Element.accessKey

元素的 Element.accessKey 属性设置了这样一个按键——用户通过敲击这个键把焦点跳转到这个元素上。
注: Element.accessKey 属性很少使用，因为它很容易与现代浏览器自带的快捷键冲突。为了解决这个问题，浏览器约定accessKey键与特定按键一起按（比如 Alt + accessKey）来生效快捷键行为。

ParentNode.childElementCount

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

ParentNode.children

是一个只读属性，返回 一个Node的子elements ，是一个动态更新的 HTMLCollection

Element.classList

是一个只读属性，返回一个元素的类属性的实时 DOMTokenList 集合。

相比将 element.className 作为以空格分隔的字符串来使用，classList 是一种更方便的访问元素的类列表的方法。

const div = document.createElement('div');
div.className = 'foo';

// 初始状态：<div class="foo"></div>
console.log(div.outerHTML);

// 使用 classList API 移除、添加类值
div.classList.remove("foo");
div.classList.add("anotherclass");

// <div class="anotherclass"></div>
console.log(div.outerHTML);

// 如果 visible 类值已存在，则移除它，否则添加它
div.classList.toggle("visible");

// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );

console.log(div.classList.contains("foo"));

// 添加或移除多个类值
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

// 使用展开语法添加或移除多个类值
const cls = ["foo", "bar"];
div.classList.add(...cls); 
div.classList.remove(...cls);

// 将类值 "foo" 替换成 "bar"
div.classList.replace("foo", "bar");

element.className

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

/* html  
  <div id="app" class="aa bb cc"></div>
  */
  document.getElementById('app').className; //aa bb cc

element.clientHeight

这个属性是只读属性，对于没有定义CSS或者内联布局盒子的元素为0，否则，它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。
此属性会将获取的值四舍五入取整数。 如果你需要小数结果, 请使用 element.getBoundingClientRect().

element.clientLeft;

表示一个元素的左边框的宽度，以像素表示。如果元素的文本方向是从右向左（RTL, right-to-left），并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度。clientLeft 不包括左外边距和左内边距。clientLeft 是只读的。

element.clientTop;

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

element.clientWidth;

内联元素以及没有 CSS 样式的元素的 clientWidth 属性值为 0。Element.clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条（如果有的话）。

ParentNode.firstElementChild

只读属性，返回对象的第一个子 元素, 如果没有子元素，则为null。

<ul id="foo">
  <li>First  (1)</li>
  <li>Second (2)</li>
  <li>Third  (3)</li>
</ul>

<script>
var foo = document.getElementById('foo');
console.log(foo.firstElementChild.textContent); //First  (1)
</script>

Element.id

Element 接口的 id 属性表示元素的标识符，与全局属性 id 对应。

Element.innerHTML

属性设置或获取HTML语法表示的元素的后代。
如果一个 <div>, <span>, 或 <noembed> 节点有一个文本子节点，该节点包含字符 (&), (<), 或(>), innerHTML 将这些字符分别返回为&amp;, &lt; 和 &gt; 。使用Node.textContent 可获取一个这些文本节点内容的正确副本。

Element.lastElementChild

只读属性 ParentNode.lastElementChild 返回对象的最后一个子元素，如果没有子元素，则返回 null。

<ul id="foo">
  <li>First  (1)</li>
  <li>Second (2)</li>
  <li>Third  (3)</li>
</ul>

<script>
var foo = document.getElementById('foo');
console.log(foo.lastElementChild.textContent);// Third  (3)
</script>

Element.localName

只读属性，返回当前标签元素的名称

//html <div id="app"></div>
document.getElementById('app').localName;// div

HTMLElement.name

name 获取或设置一个 DOM 对象的 name 属性；它只能应用于下列元素：<a>, <applet>, <button>, <form>, <frame>, <iframe>, <img>, <input>, <map>, <meta>, <object>, <param>, <select>, and <textarea>.

Element.namespaceURI

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

elementNodeReference.nextElementSibling

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

属性

Element.attributes

属性返回该元素所有属性节点的一个实时集合。该集合是一个

Element.accessKey

元素的 Element.accessKey 属性设置了这样一个按键——用户通过敲击这个键把焦点跳转到这个元素上。
注: Element.accessKey 属性很少使用，因为它很容易与现代浏览器自带的快捷键冲突。为了解决这个问题，浏览器约定accessKey键与特定按键一起按（比如 Alt + accessKey）来生效快捷键行为。

ParentNode.childElementCount

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

ParentNode.children

是一个只读属性，返回 一个Node的子elements ，是一个动态更新的 HTMLCollection

Element.classList

是一个只读属性，返回一个元素的类属性的实时 DOMTokenList 集合。

相比将 element.className 作为以空格分隔的字符串来使用，classList 是一种更方便的访问元素的类列表的方法。

const div = document.createElement('div');
div.className = 'foo';

// 初始状态：<div class="foo"></div>
console.log(div.outerHTML);

// 使用 classList API 移除、添加类值
div.classList.remove("foo");
div.classList.add("anotherclass");

// <div class="anotherclass"></div>
console.log(div.outerHTML);

// 如果 visible 类值已存在，则移除它，否则添加它
div.classList.toggle("visible");

// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );

console.log(div.classList.contains("foo"));

// 添加或移除多个类值
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

// 使用展开语法添加或移除多个类值
const cls = ["foo", "bar"];
div.classList.add(...cls); 
div.classList.remove(...cls);

// 将类值 "foo" 替换成 "bar"
div.classList.replace("foo", "bar");

element.className

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

/* html  
  <div id="app" class="aa bb cc"></div>
  */
  document.getElementById('app').className; //aa bb cc

element.clientHeight

这个属性是只读属性，对于没有定义CSS或者内联布局盒子的元素为0，否则，它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。
此属性会将获取的值四舍五入取整数。 如果你需要小数结果, 请使用 element.getBoundingClientRect().

element.clientLeft;

表示一个元素的左边框的宽度，以像素表示。如果元素的文本方向是从右向左（RTL, right-to-left），并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度。clientLeft 不包括左外边距和左内边距。clientLeft 是只读的。

element.clientTop;

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

element.clientWidth;

内联元素以及没有 CSS 样式的元素的 clientWidth 属性值为 0。Element.clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条（如果有的话）。

ParentNode.firstElementChild

只读属性，返回对象的第一个子 元素, 如果没有子元素，则为null。

<ul id="foo">
  <li>First  (1)</li>
  <li>Second (2)</li>
  <li>Third  (3)</li>
</ul>

<script>
var foo = document.getElementById('foo');
console.log(foo.firstElementChild.textContent); //First  (1)
</script>

id

Element 接口的 id 属性表示元素的标识符，与全局属性 id 对应。

Element.innerHTML

属性设置或获取HTML语法表示的元素的后代。
如果一个 <div>, <span>, 或 <noembed> 节点有一个文本子节点，该节点包含字符 (&), (<), 或(>), innerHTML 将这些字符分别返回为&amp;, &lt; 和 &gt; 。使用Node.textContent 可获取一个这些文本节点内容的正确副本。

Element.lastElementChild

只读属性 ParentNode.lastElementChild 返回对象的最后一个子元素，如果没有子元素，则返回 null。

<ul id="foo">
  <li>First  (1)</li>
  <li>Second (2)</li>
  <li>Third  (3)</li>
</ul>

<script>
var foo = document.getElementById('foo');
console.log(foo.lastElementChild.textContent);// Third  (3)
</script>

Element.localName

只读属性，返回当前标签元素的名称

//html <div id="app"></div>
document.getElementById('app').localName;// div

HTMLElement.name

name 获取或设置一个 DOM 对象的 name 属性；它只能应用于下列元素：<a>, <applet>, <button>, <form>, <frame>, <iframe>, <img>, <input>, <map>, <meta>, <object>, <param>, <select>, and <textarea>.

Element.namespaceURI

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

elementNodeReference.nextElementSibling

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

  <div id="start">start</div>
  <ul>
    <li>1</li>
  </ul>
  <div id="end">end</div>
  
  <script type="text/javascript">
    const ul = document.querySelector('ul');
    console.log(ul.nextElementSibling);
    //<div id="end">end</div>
  <script>

element.onfullscreenchange

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

element.onfullscreenerror

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

element.outerHTML

element DOM接口的outerHTML属性获取描述元素（包括其后代）的序列化HTML片段。它也可以设置为用从给定字符串解析的节点替换元素。

例子

// HTML:
/*
<div id="d">
    <p>Content</p>
    <p>Further Elaborated</p>
</div>
*/

const d = document.getElementById("d");
console.log(d.outerHTML);

/*
    字符串 '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
    被显示到控制台窗口
*/

element.previousElementSibling

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

  <div id="start">start</div>
  <ul>
    <li>1</li>
  </ul>
  <div id="end">end</div>
  
  <script type="text/javascript">
    const ul = document.querySelector('ul');
    console.log(ul.previousElementSibling);
    //<div id="start">start</div>
  <script>

Element.runtimeStyle

Element.runtimeStyle 是一个元素专有属性，和 HTMLElement.style 相似，除了其中的样式属性外，HTMLElement.style 具有更高的优先级和修改能力。runtimeStyle 不能修改 style 中的content属性，其在旧版的IE浏览器上可用。

Element.scrollHeight

Element.scrollHeight 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。

Element.scrollLeft

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

Element.scrollLeftMax

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

Element.scrollTop

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

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

Element.scrollTopMax

返回一个只读Number表示元素所能滚动的最大高度

Element.scrollWidth

这个只读属性是元素内容宽度的一种度量，包括由于overflow溢出而在屏幕上不可见的内容。
scrollWidth值等于元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度。 宽度的测量方式与clientWidth相同：它包含元素的内边距，但不包括边框，外边距或垂直滚动条（如果存在）。 它还可以包括伪元素的宽度，例如::before或::after。 如果元素的内容可以适合而不需要水平滚动条，则其scrollWidth等于clientWidth

Element.slot

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

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

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

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

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

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

Element.tagName

返回当前元素的标签名

// html <div id="app"></div>
document.getElementById('app').tagName //DIV

方法

Element.getBoundingClientRect()

方法返回元素的大小及其相对于视口的位置。

Element.getClientRects()

方法返回一个指向客户端中每一个盒子的边界矩形的矩形集合。

  <div id="start">start</div>
  <ul>
    <li>1</li>
  </ul>
  <div id="end">end</div>
  
  <script type="text/javascript">
    const ul = document.querySelector('ul');
    console.log(ul.nextElementSibling);
    //<div id="end">end</div>
  <script>

element.onfullscreenchange

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

element.onfullscreenerror

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

element.outerHTML

element DOM接口的outerHTML属性获取描述元素（包括其后代）的序列化HTML片段。它也可以设置为用从给定字符串解析的节点替换元素。

例子

// HTML:
/*
<div id="d">
    <p>Content</p>
    <p>Further Elaborated</p>
</div>
*/

const d = document.getElementById("d");
console.log(d.outerHTML);

/*
    字符串 '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
    被显示到控制台窗口
*/

element.previousElementSibling

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

  <div id="start">start</div>
  <ul>
    <li>1</li>
  </ul>
  <div id="end">end</div>
  
  <script type="text/javascript">
    const ul = document.querySelector('ul');
    console.log(ul.previousElementSibling);
    //<div id="start">start</div>
  <script>

Element.runtimeStyle

Element.runtimeStyle 是一个元素专有属性，和 HTMLElement.style 相似，除了其中的样式属性外，HTMLElement.style 具有更高的优先级和修改能力。runtimeStyle 不能修改 style 中的content属性，其在旧版的IE浏览器上可用。

Element.scrollHeight

Element.scrollHeight 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。

Element.scrollLeft

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

Element.scrollLeftMax

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

Element.scrollTop

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

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

Element.scrollTopMax

返回一个只读Number表示元素所能滚动的最大高度

Element.scrollWidth

这个只读属性是元素内容宽度的一种度量，包括由于overflow溢出而在屏幕上不可见的内容。
scrollWidth值等于元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度。 宽度的测量方式与clientWidth相同：它包含元素的内边距，但不包括边框，外边距或垂直滚动条（如果存在）。 它还可以包括伪元素的宽度，例如::before或::after。 如果元素的内容可以适合而不需要水平滚动条，则其scrollWidth等于clientWidth

Element.slot

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

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

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

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

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

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

Element.tagName

返回当前元素的标签名

// html <div id="app"></div>
document.getElementById('app').tagName //DIV

方法

Element.getBoundingClientRect()

方法返回元素的大小及其相对于视口的位置。

Element.getClientRects()

方法返回一个指向客户端中每一个盒子的边界矩形的矩形集合。