Element - 要素

公開日: 2017/02/23

Elementは、要素を表すオブジェクトです。Nodeをさらに細かく分類したものです。

概要

名前

Element

継承

実装

実装するインターフェイスはありません。

IDL

[Exposed=Window]
interface Element : Node {
  readonly attribute DOMString? namespaceURI;
  readonly attribute DOMString? prefix;
  readonly attribute DOMString localName;
  readonly attribute DOMString tagName;

  [CEReactions] attribute DOMString id;
  [CEReactions] attribute DOMString className;
  [CEReactions, SameObject, PutForwards=value] readonly attribute DOMTokenList classList;
  [CEReactions, Unscopable] attribute DOMString slot;

  boolean hasAttributes();
  [SameObject] readonly attribute NamedNodeMap attributes;
  sequence<DOMString> getAttributeNames();
  DOMString? getAttribute(DOMString qualifiedName);
  DOMString? getAttributeNS(DOMString? namespace, DOMString localName);
  [CEReactions] void setAttribute(DOMString qualifiedName, DOMString value);
  [CEReactions] void setAttributeNS(DOMString? namespace, DOMString qualifiedName, DOMString value);
  [CEReactions] void removeAttribute(DOMString qualifiedName);
  [CEReactions] void removeAttributeNS(DOMString? namespace, DOMString localName);
  boolean hasAttribute(DOMString qualifiedName);
  boolean hasAttributeNS(DOMString? namespace, DOMString localName);

  Attr? getAttributeNode(DOMString qualifiedName);
  Attr? getAttributeNodeNS(DOMString? namespace, DOMString localName);
  [CEReactions] Attr? setAttributeNode(Attr attr);
  [CEReactions] Attr? setAttributeNodeNS(Attr attr);
  [CEReactions] Attr removeAttributeNode(Attr attr);

  ShadowRoot attachShadow(ShadowRootInit init);
  readonly attribute ShadowRoot? shadowRoot;

  Element? closest(DOMString selectors);
  boolean matches(DOMString selectors);
  boolean webkitMatchesSelector(DOMString selectors); // historical alias of .matches

  HTMLCollection getElementsByTagName(DOMString qualifiedName);
  HTMLCollection getElementsByTagNameNS(DOMString? namespace, DOMString localName);
  HTMLCollection getElementsByClassName(DOMString classNames);

  [CEReactions] Element? insertAdjacentElement(DOMString where, Element element); // historical
  void insertAdjacentText(DOMString where, DOMString data); // historical
};

dictionary ShadowRootInit {
  required ShadowRootMode mode;
};

enum ShadowRootMode { "open", "closed" };

// DOM Parsing and Serialization
partial interface Element {
    [CEReactions, TreatNullAs=EmptyString] attribute DOMString innerHTML;
    [CEReactions, TreatNullAs=EmptyString] attribute DOMString outerHTML;
    [CEReactions] void insertAdjacentHTML(DOMString position, DOMString text);
};

// CSSOM View Module
partial interface Element {
  sequence<DOMRect> getClientRects();
  [NewObject] DOMRect getBoundingClientRect();
  void scrollIntoView();
  void scrollIntoView((boolean or ScrollIntoViewOptions) arg);
  void scroll(optional ScrollToOptions options);
  void scroll(unrestricted double x, unrestricted double y);
  void scrollTo(optional ScrollToOptions options);
  void scrollTo(unrestricted double x, unrestricted double y);
  void scrollBy(optional ScrollToOptions options);
  void scrollBy(unrestricted double x, unrestricted double y);
  attribute unrestricted double scrollTop;
  attribute unrestricted double scrollLeft;
  readonly attribute long scrollWidth;
  readonly attribute long scrollHeight;
  readonly attribute long clientTop;
  readonly attribute long clientLeft;
  readonly attribute long clientWidth;
  readonly attribute long clientHeight;
};

dictionary ScrollToOptions : ScrollOptions {
    unrestricted double left;
    unrestricted double top;
};

dictionary ScrollOptions {
    ScrollBehavior behavior = "auto";
};

dictionary ScrollIntoViewOptions : ScrollOptions {
  ScrollLogicalPosition block = "center";
  ScrollLogicalPosition inline = "center";
};

enum ScrollBehavior { "auto", "instant", "smooth" };

enum ScrollLogicalPosition { "start", "center", "end", "nearest" };

// Fullscreen API
partial interface Element {
  Promise<void> requestFullscreen();
};

// Web Cryptography API
partial interface Element {
 void requestPointerLock();
};

仕様書

https://dom.spec.whatwg.org/#interface-element (DOM)

https://w3c.github.io/DOM-Parsing/#extensions-to-the-element-interface (DOM Parsing and Serialization)

https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface (CSSOM View Module)

https://fullscreen.spec.whatwg.org/#api (Fullscreen API)

https://w3c.github.io/pointerlock/#extensions-to-the-element-interface (Web Cryptography API)

プロパティ

Nodeのプロパティを利用できます。

Element.attributes

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

全ての属性を、NamedNodeMapで返します。

Element.classList

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 10+
Safari: ● 5.1+
Opera: ● 11.6+
iOS: ●
Android: ● 4.0+

class属性の値を、DOMTokenListで返します。

Element.className

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

class属性の値を、文字列で返します。

Element.clientHeight

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

要素の表示領域の高さを返します。

Element.clientLeft

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

border-leftの左端から、padding-leftの左端までの幅を返します。

Element.clientTop

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

border-topの上端から、padding-topの上端までの幅を返します。

Element.clientWidth

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

要素の表示領域の横幅を返します。

Element.id

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

id属性の値を返します。

Element.innerHTML

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

自身は含めず、子孫の内容をHTMLで返します。

Element.localName

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

ローカル名を返します。

Element.namespaceURI

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

名前空間のURIを返します。

Element.outerHTML

Chrome: ●
Firefox: ● 11+
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

自身と子孫の内容をHTMLで返します。

Element.prefix

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

接頭辞を返します。

Element.scrollHeight

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

要素内で、垂直にスクロールできる領域の幅を返します。

Element.scrollLeft

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

水平方向の要素内スクロールの量を返します。

Element.scrollTop

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

垂直方向の要素内スクロールの量を返します。

Element.scrollWidth

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

要素内で、水平にスクロールできる領域の幅を返します。

Element.shadowRoot

Chrome: ● 35+
Firefox: ×
Edge: ×
IE: ×
Safari: ● 10+
Opera: ● 22+
iOS: ● 10.0+
Android: ▲ 4.4+

要素がShadow Hostである場合、Shadow Rootを返します。

Element.slot

Chrome: ● 53+
Firefox: ×
Edge: ×
IE: ×
Safari: ● 10+
Opera: ● 40+
iOS: ● 10.0+
Android: ×

slot属性の値を返します。

Element.tagName

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

タグ名を返します。

メソッド

EventTarget、Nodeのメソッドを利用できます。

Element.attachShadow()

Chrome: ● 53+
Firefox: ×
Edge: ×
IE: ×
Safari: ● 10+
Opera: ● 40+
iOS: ● 10.0+
Android: ×

要素にShadow DOMを関連付けます。

Element.closest()

Chrome: ● 41+
Firefox: ● 35+
Edge: ×
IE: ×
Safari: ● 9.1+
Opera: ● 28+
iOS: ● 9.1+
Android: ×

セレクタを指定して、その条件に合う最も近い祖先要素を取得します。

Element.getAttribute()

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

要素の属性の値を取得します。

Element.getAttributeNS()

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

要素の、名前空間を持つ属性を取得します。

Element.getAttributeNames()

Chrome: ×
Firefox: ● 45+
Edge: ×
IE: ×
Safari: ×
Opera: ×
iOS: ×
Android: ×

全ての属性名を、配列で返します。

Element.getAttributeNode()

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

要素の属性を、属性ノードで取得します。

Element.getAttributeNodeNS()

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

要素に、名前空間を持つ属性を取得します。返り値は属性ノードです。

Element.getBoundingClientRect()

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

要素の外接矩形を取得します。外接矩形とは、要素全体を囲める最小の矩形のことです。

Element.getClientRects()

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

要素の矩形を取得します。矩形とは要素の形のことです。

Element.getElementsByClassName()

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

自身の子孫に限定して、class属性を指定して要素を取得します。

Element.getElementsByTagName()

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

タグ名を指定して要素を取得します。検索範囲は要素内です。

Element.getElementsByTagNameNS()

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

タグ名と名前空間を指定して要素を取得します。

Element.hasAttribute()

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 8+
Safari: ●
Opera: ●
iOS: ●
Android: ●

要素が指定した属性を持つか確認します。

Element.hasAttributeNS()

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

要素が、名前空間を持つ属性を、持っているか確認します。

Element.hasAttributes()

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 8+
Safari: ●
Opera: ●
iOS: ●
Android: ●

要素が属性を持つか確認します。

Element.insertAdjacentElement()

Chrome: ●
Firefox: ● 48+
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

自身を基準とした相対的な位置に、要素を挿入します。

Element.insertAdjacentHTML()

Chrome: ●
Firefox: ● 8+
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

自身を基準とした相対的な位置に、HTMLを挿入します。

Element.insertAdjacentText()

Chrome: ●
Firefox: ● 48+
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

自身を基準とした相対的な位置に、テキストを挿入します。

Element.matches()

Chrome: ● 34+
Firefox: ● 34+
Edge: ▲
IE: ▲ 9+
Safari: ● 7.1+
Opera: ● 21+
iOS: ● 8.3+
Android: ▲

セレクタを指定して、要素がその条件に合うか否かを確認します。

Element.removeAttribute()

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

要素の属性を削除します。

Element.removeAttributeNS()

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

要素の、名前空間を持つ属性を削除します。

Element.removeAttributeNode()

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

要素の属性を削除します。属性ノードで指定します。

Element.requestFullscreen()

Chrome: ▲ 15+
Firefox: ▲ 9+
Edge: ▲ 14+
IE: ▲ 11+
Safari: ▲ 5.1+
Opera: ▲ 15+
iOS: ▲ 10.0+
Android: ▲ 4.4+

要素を、フルスクリーン状態にします。

Element.scroll()

Chrome: ×
Firefox: ● 36+
Edge: ×
IE: ×
Safari: ×
Opera: ×
iOS: ×
Android: ×

絶対位置を指定して、要素内スクロールをします。scrollToと同じです。

Element.scrollBy()

Chrome: ×
Firefox: ● 36+
Edge: ×
IE: ×
Safari: ×
Opera: ×
iOS: ×
Android: ×

相対位置を指定して、要素内スクロールをします。

Element.scrollIntoView()

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

要素が見える位置までスクロールします。

Element.scrollTo()

Chrome: ×
Firefox: ● 36+
Edge: ×
IE: ×
Safari: ×
Opera: ×
iOS: ×
Android: ×

絶対位置を指定して、要素内スクロールをします。

Element.setAttribute()

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

要素に属性をセットします。

Element.setAttributeNS()

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

要素に、名前空間を持つ属性をセットします。

Element.setAttributeNode()

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

要素に属性をセットします。属性ノードで指定します。

Element.setAttributeNodeNS()

Chrome: ● 35+
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ● 22+
iOS: ●
Android: ●

要素に、名前空間を持つ属性をセットします。属性ノードで指定します。

Element.webkitMatchesSelector()

Chrome: ●
Firefox: ● 44+
Edge: ●
IE: ▲ 9+
Safari: ● 5.1+
Opera: ● 15+
iOS: ●
Android: ●

matches()のエイリアスです。

定数

Nodeの定数を利用できます。

サポート状況

Elementのサポート状況です。

ブラウザ	サポート状況	ブラウザ	サポート状況
Chrome	Supported	Firefox	Supported
Edge	Supported	Internet Explorer	Supported
Safari	Supported	Opera	Supported
iOS Safari	Supported	Android	Supported

Chrome

バージョン	サポート状況	公開時期	シェア
57	Supported	2017年3月頃	0.1%
56	Supported	2017年1月頃	12.02%
55	Supported	2016年12月頃	12.36%
54	Supported	2016年10月頃	0.44%
53	Supported	2016年9月頃	0.25%
52	Supported	2016年7月頃	0.27%
51	Supported	2016年6月頃	0.4%
50	Supported	2016年4月頃	0.32%
49	Supported	2016年3月頃	0.47%
48	Supported	2016年1月頃	0.02%
47	Supported	2015年12月頃	0.06%
46	Supported	2015年10月頃	0.56%
45	Supported	2015年9月頃	0.01%
44	Supported	2015年7月頃	0.83%
43	Supported	2015年5月頃	0.05%
42	Supported	2015年4月頃	0.05%
41	Supported	2015年3月頃	0.01%
40	Supported	2015年1月頃	0.59%
39	Supported	2014年11月頃	0.02%
38	Supported	2014年10月頃	0.08%
37	Supported	2014年8月頃	0.01%
36	Supported	2014年7月頃	0.01%
35	Supported	2014年5月頃	0.01%
34	Supported	2014年4月頃	0.14%
33	Supported	2014年2月頃	0.01%
32	Supported	2014年1月頃	0%
31	Supported	2013年11月頃	0.01%
30	Supported	2013年10月頃	0.03%
29	Supported	2013年8月頃	0%
28	Supported	2013年6月頃	0.03%
27	Supported	2013年5月頃	0.01%
26	Supported	2013年3月頃	0%
25	Supported	2013年2月頃	0%
24	Supported	2013年1月頃	0%
23	Supported	2012年11月頃	0%
22	Supported	2012年9月頃	0%
21	Supported	2012年7月頃	0%
20	Supported	2012年6月頃	0%
19	Supported	2012年5月頃	0%
18	Supported	2012年3月頃	0.01%
17	Supported	2012年2月頃	0.01%
16	Supported	2011年12月頃	0%
15	Supported	2011年10月頃	0%
14	Supported	2011年9月頃	0%

Firefox

バージョン	サポート状況	公開時期	シェア
52	Supported	2017年3月頃	0.12%
51	Supported	2017年1月頃	1.7%
50	Supported	2016年11月頃	0.78%
49	Supported	2016年9月頃	0.02%
48	Supported	2016年8月頃	0.07%
47	Supported	2016年6月頃	0.03%
46	Supported	2016年4月頃	0.01%
45	Supported	2016年3月頃	0.1%
44	Supported	2016年1月頃	0.01%
43	Supported	2015年12月頃	0.02%
42	Supported	2015年11月頃	0.01%
41	Supported	2015年9月頃	0%
40	Supported	2015年8月頃	0.02%
39	Supported	2015年7月頃	0.01%
38	Supported	2015年5月頃	0.02%
37	Supported	2015年3月頃	0%
36	Supported	2015年2月頃	0.01%
35	Supported	2015年1月頃	0%
34	Supported	2014年12月頃	0.01%
33	Supported	2014年10月頃	0%
32	Supported	2014年9月頃	0%
31	Supported	2014年7月頃	0.01%
30	Supported	2014年6月頃	0%
29	Supported	2014年4月頃	0%
28	Supported	2014年3月頃	0.01%
27	Supported	2014年2月頃	0%
26	Supported	2013年12月頃	0%
25	Supported	2013年10月頃	0%
24	Supported	2013年9月頃	0%
23	Supported	2013年8月頃	0%
22	Supported	2013年6月頃	0%
21	Supported	2013年5月頃	0%
20	Supported	2013年4月頃	0%
19	Supported	2013年2月頃	0%
18	Supported	2013年1月頃	0%
17	Supported	2012年11月頃	0%
16	Supported	2012年10月頃	0%
15	Supported	2012年8月頃	0%
14	Supported	2012年7月頃	0%
13	Supported	2012年6月頃	0%
12	Supported	2012年4月頃	0%
11	Supported	2012年3月頃	0%
10	Supported	2012年1月頃	0%
9	Supported	2011年12月頃	0%
8	Supported	2011年11月頃	0%
7	Supported	2011年9月頃	0%
6	Supported	2011年8月頃	0%
5	Supported	2011年6月頃	0%
4	Supported	2011年3月頃	0%

Edge

バージョン	サポート状況	公開時期	シェア
14	Supported	2016年2月頃	1.05%
13	Supported	2015年9月頃	0.08%

Internet Explorer

バージョン	サポート状況	公開時期	シェア
11	Supported	2013年10月頃	4.99%
10	Supported	2012年8月頃	0.09%
9	Supported	2011年3月頃	0.18%
8	Supported	2009年3月頃	0.04%
7	Supported	2006年10月頃	0.01%
6	Supported	2001年8月頃	0%

Safari

バージョン	サポート状況	公開時期	シェア
10	Supported	2016年10月頃	0%
9.1	Supported	2015年9月頃	0%
8.0	Supported	2014年10月頃	0%
7.1	Supported	2013年10月頃	0%
6.0	Supported	2012年7月頃	0%
5.1	Supported	2011年7月頃	0%
4	Supported	2009年6月頃	0%

Opera

バージョン	サポート状況	公開時期	シェア
43	Supported	2017年2月頃	0.06%
42	Supported	2016年12月頃	0.09%
41	Supported	2016年10月頃	0.01%
40	Supported	2016年9月頃	0%
39	Supported	2016年8月頃	0%
38	Supported	2016年6月頃	0%
37	Supported	2016年5月頃	0.01%
36	Supported	2016年3月頃	0.01%
35	Supported	2016年2月頃	0%
34	Supported	2015年12月頃	0%
33	Supported	2015年10月頃	0%
32	Supported	2015年9月頃	0%
31	Supported	2015年8月頃	0%
30	Supported	2015年6月頃	0%
29	Supported	2015年4月頃	0%
28	Supported	2015年3月頃	0%
27	Supported	2015年1月頃	0%
26	Supported	2014年12月頃	0%
25	Supported	2014年10月頃	0%
24	Supported	2014年9月頃	0%
23	Supported	2014年7月頃	0%
22	Supported	2014年6月頃	0%
21	Supported	2014年5月頃	0.01%
20	Supported	2014年3月頃	0%
19	Supported	2014年1月頃	0%
18	Supported	2013年11月頃	0%
17	Supported	2013年10月頃	0%
16	Supported	2013年8月頃	0%
15	Supported	2013年7月頃	0%
12	Supported	2012年6月頃	0.02%
11.6	Supported	2011年12月頃	0%
11.1	Supported	2011年4月頃	0%

iOS Safari

バージョン	サポート状況	公開時期	シェア
10.0	Supported	2016年9月頃	39.65%
9.1	Supported	2015年9月頃	5.39%
8.3	Supported	2014年9月頃	1.03%
7.0	Supported	2013年9月頃	0.24%
6.0	Supported	2012年9月頃	0.05%
5.1	Supported	2011年10月頃	0.03%

Android

バージョン	サポート状況	公開時期	シェア
4.4	Supported	2013年10月頃	0%
4.3	Supported	2013年7月頃	0%
4.2	Supported	2013年3月頃	0.03%
4.1	Supported	2012年12月頃	0%
4.0	Supported	2012年6月頃	1.61%
2.3	Supported	2011年10月頃	0%