JavaScriptのelementオブジェクトはHTMLの要素を表現するオブジェクトであり、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 属性
コンテンツとパディングを合わせた要素の高さ
コンテンツ、パディング、ボーダーおよびスクロールバーを合わせた要素の高さを取得または設定するには、elment.offsetHeightプロパティを使う。
実際に表示されている高さではなく、スクロール領域で非表示になっている部分も含めた高さを取得または設定するには、element.scrollHeightプロパティを使う
| プロパティ | コンテンツの高さ | パディングの高さ | ボーダーの高さ | スクロールバーの高さ |
|---|---|---|---|---|
.scrollHeight |
含む | 含む | 含まない | 含まない |
.clientHeight |
含む | 含む | 含まない | 含まない |
.offsetHeight |
含む | 含む | 含む | 含む |
コンテンツとパディングを合わせた要素の高さを取得する例を次に示す。
<p id="example">Example</p>
<script>
const clientHeight = $('#example').clientHeight;
console.log(clientHeight);
<script>コンテンツとパディングを合わせた要素の幅
コンテンツ、パディング、ボーダーおよびスクロールバーを合わせた要素の幅を取得または設定するには、elment.offsetWidthプロパティを使う。
実際に表示されている幅ではなく、スクロール領域で非表示になっている部分も含めた幅を取得または設定するには、element.scrollWidthプロパティを使う
| プロパティ | コンテンツの幅 | パディングの幅 | ボーダーの幅 | スクロールバーの幅 |
|---|---|---|---|---|
.scrollWidth |
含む | 含む | 含まない | 含まない |
.clientWidth |
含む | 含む | 含まない | 含まない |
.offsetWidth |
含む | 含む | 含む | 含む |
コンテンツとパディングを合わせた要素の幅を取得する例を次に示す。
<p id="example">Example</p>
<script>
const clientWidth = $('#example').clientWidth;
console.log(clientWidth);
<script>要素の 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コンテンツ、パディング、ボーダーおよびスクロールバーを合わせた要素の高さ
コンテンツとパディングを合わせた要素の高さを取得または設定するには、element.clientHeightプロパティを使う。
実際に表示されている高さではなく、スクロール領域で非表示になっている部分も含めた高さを取得または設定するには、element.scrollHeightプロパティを使う
| プロパティ | コンテンツの高さ | パディングの高さ | ボーダーの高さ | スクロールバーの高さ |
|---|---|---|---|---|
.scrollHeight |
含む | 含む | 含まない | 含まない |
.clientHeight |
含む | 含む | 含まない | 含まない |
.offsetHeight |
含む | 含む | 含む | 含む |
コンテンツ、パディング、ボーダーおよびスクロールバーを合わせた要素の高さを取得する例を次に示す。
<p id="example">Example</p>
<script>
const offsetHeight = $('#example').offsetHeight;
console.log(offsetHeight);
<script>コンテンツ、パディング、ボーダー、スクロールバーを合わせた要素の幅
コンテンツとパディングを合わせた要素の幅を取得または設定するには、element.clientWidthプロパティを使う。
実際に表示されている幅ではなく、スクロール領域で非表示になっている部分も含めた幅を取得または設定するには、element.scrollWidthプロパティを使う
| プロパティ | コンテンツの幅 | パディングの幅 | ボーダーの幅 | スクロールバーの幅 |
|---|---|---|---|---|
.scrollWidth |
含む | 含む | 含まない | 含まない |
.clientWidth |
含む | 含む | 含まない | 含まない |
.offsetWidth |
含む | 含む | 含む | 含む |
コンテンツ、パディング、ボーダー、スクロールバーを合わせた要素の幅を取得する例を次に示す。
<p id="example">Example</p>
<script>
const offsetWidth = $('#example').offsetWidth;
console.log(offsetWidth);
<script>要素の 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