JavaScript elementオブジェクト

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

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

参考文献

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