JavaScript elementオブジェクト

JavaScriptのelementオブジェクトはHTML及びXHTMLの要素を表現するオブジェクトであり、DOMのHTMLElementインタフェースが実装されている。

Table of Contents

1. 1 HTMLElement interface
2. 1. 1.1 プロパティ
   2. 1. 1.1.1 title
      2. 1.1.2 lang
      3. 1.1.3 translate
      4. 1.1.4 dir
      5. 1.1.5 hidden
      6. 1.1.6 insert
      7. 1.1.7 accessKey
      8. 1.1.8 accessKeyLabel
      9. 1.1.9 draggable
      10. 1.1.10 spellcheck
      11. 1.1.11 autocapitalize
      12. 1.1.12 innerText
      13. 1.1.13 outerText
      14. 1.1.14 popover
3. 2 Element interface
4. 1. 2.1 プロパティ
   2. 1. 2.1.1 namespaceURI
      2. 2.1.2 prefix
      3. 2.1.3 localName
      4. 2.2.4 tagName
      5. 2.2.5 id
      6. 2.2.6 className
      7. 2.2.7 classList
      8. 2.2.8 slot
      9. 2.2.9 attributes
   3. 2.2 メソッド
   4. 1. 2.2.1 getAttributeNames
      2. 2.2.2 getAttribute
      3. 2.2.3 getAttributeNS
      4. 2.2.4 setAttribute
      5. 2.2.5 setAttributeNS
      6. 2.2.6 removeAttribute
      7. 2.2.7 removeAttributeNS
      8. 2.2.8 toggleAttribute
      9. 2.2.9 hasAttribute
      10. 2.2.10 hasAttributeNS
      11. 2.2.11 setAttributeNode
      12. 2.2.12 setAttributeNodeNS
      13. 2.2.13 removeAttributeNode
      14. 2.2.14 attachShadow
      15. 2.2.15 closest
      16. 2.2.16 matches
      17. 2.2.17 webkitMatchesSelector
      18. 2.2.18 getElementsByTagName
      19. 2.2.19 getElementsByTagNameNS
      20. 2.2.20 getElementsByClassName
      21. 2.2.21 insertAdjacentElement
      22. 2.2.22 insertAdjacentText
5. Node interface
6. 1. nodeType
   2. nodeName
   3. parentNode
   4. childNodes
   5. firstChild
   6. lastChild
   7. previousSibling
   8. nextSibling
   9. nodeValue
   10. textContent
   11. insertBefore()
   12. appendChild()
   13. replaceChild()
   14. removeChild()
7. EventTarget interface
8. 1. addEventListener()
   2. dispatchEvent()
   3. removeEventListener()

className

element オブジェクトの className プロパティは、HTML要素のすべてのクラスを表わす。

e = document.getElementById('#id')
e.className = 'container mx-auto'

classList

element オブジェクトの className プロパティは、HTML要素の個々のクラスを表わす。

HTML要素にクラスを追加する。

e = document.getElementById('#id')
e.classList.add('container')

HTML要素からクラスを削除する。

e = document.getElementById('#id')
e.classList.remove('container')

指定したクラスがHTML要素にあれば削除し、なければ追加する。

e = document.getElementById('#id')
e.classList.toggle('container')

指定したクラスがHTML要素にあればtrueを返し、なければfalseを返す。

e = document.getElementById('#id')
if (e.classList.contains('container')) {
  /* do something */
} 

classListから個々のクラスに対して繰返し処理を行うことができる。

e = document.getElementById('#id')
if (cls in e.classList) {
  console.log(cls)
} 

dir

要素の dir 属性

document.getElementById('p1').dir = 'ltr'
let dir = document.getElementById('p1').dir

lang

要素の lang 属性

document.getElementById('p1').lang = 'en'
let lang = document.getElementById('p1').lang

title

要素の title 属性

document.getElementById('p1').title = 'example'
let title = document.getElementById('p1').title

setAttribute()

要素に属性を追加する。

element.setAttribute(name, value)

element

属性を追加する要素のオブジェクト

name

要素へ追加する属性の名前

value

要素へ追加する属性の値

removeAttribute()

要素から属性を削除する。

element.removeAttribute(name)

element

属性を削除する要素のオブジェクト

name

要素から削除する属性の名前

.appendChild()

要素オブジェクトの appendChild メソッドは、この要素に子要素を追加するメソッドである。

テキストノードを新たに生成するJavaScriptを示す。

<p id="p1"></p>
<script>
  let textNode = document.createTextNode('<div>foo</div>');
  let element = document.getElementById('p1');
  element.appendChild(textNode);
</script>

参考文献

Web Hypertext Application Technology Working Group (2022) "Semantics, structure, and APIs of HTML documents" HTML Living Standard