JavaScriptのelementオブジェクトはHTML及びXHTMLの要素を表現するオブジェクトであり、DOMのHTMLElementインタフェースが実装されている。
element オブジェクトの className プロパティは、HTML要素のすべてのクラスを表わす。
e = document.getElementById('#id')
e.className = 'container mx-auto'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)
} 要素の accesskey 属性
要素の autocapitalize 属性
要素の autocorrect 属性
要素の dir 属性
document.getElementById('p1').dir = 'ltr'
let dir = document.getElementById('p1').dir要素の draggable 属性
要素の hidden 属性
要素の inert 属性
要素の lang 属性
document.getElementById('p1').lang = 'en'
let lang = document.getElementById('p1').lang要素の spellcheck 属性
let textArea1 = document.getElementById('textarea1');
textArea1.spellcheck = 'false';要素の title 属性
document.getElementById('p1').title = 'example'
let title = document.getElementById('p1').title要素の translate 属性
要素の writingsuggestions 属性
要素に属性を追加する。
element.setAttribute(name, value)要素から属性を削除する。
element.removeAttribute(name)要素オブジェクトの 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