初心者向けの説明

HTMLとDOMの違いについて最初に話しましょう。

普通の<table>要素は、HTMLファイル内で使用できる単純なコードです。要素はその表示や動作を制御するための属性を持っています。

JavaScriptと直接関連するものではありません。

DOMの役割は、JavaScriptコードをHTML要素と結びつけ、要素に対してオブジェクトとしての操作を可能にすることです。

これが文書オブジェクトモデルです。

HTMLの各要素は、DOMの"インターフェース"に対応しています。このインターフェースは、要素のプロパティ（通常はHTML属性にマッピングされます）とメソッドを定義しています。例えば、<table>要素はHTMLTableElementインターフェースに対応します。

要素の参照を取得する方法は次のとおりです。

const searchElement = document.querySelector('#search-box');

このようにして、要素のプロパティやメソッドにアクセスできます。例えば、`searchElement.value`で値にアクセスしたり、`searchElement.focus()`でフォーカスを設定したりできます。

これらの小技を発見するためには、仕様書を確認する必要がありますが、ほとんどの開発者は無関心です。

仕様書の確認と小技の収集は、私にとってはストレスを軽減する方法です。

ブラウザのDevToolsを使用している場合、要素ツリーで要素を選択し、コンソールに`$0`を入力すると選択した要素の参照が返されます。`dir($0)`を入力すると、要素のオブジェクトが表示されます。

1. tableのメソッド

<table>要素（いまだにサイトレイアウトのトップ選択肢）には、テーブルを作成するための便利なメソッドが多数あります。

次のようなコードを使用すると、要素の作成が簡単に行えます。

const table = document.querySelector('table');
const headerRow = table.createHead().insertRow();
headerRow.insertCell().textContent = 'メーカー';
headerRow.insertCell().textContent = 'モデル';
headerRow.insertCell().textContent = '色';
const newRow = table.insertRow();
newRow.insertCell().textContent = 'はい';
newRow.insertCell().textContent = 'いいえ';
newRow.insertCell().textContent = 'ありがとう';

このコードでは、`document.createElement()`を使用する必要はありません。

テーブル要素上に`.insertRow()`を呼び出すと、自動的に<tbody>要素が挿入されます。

2. scrollIntoView()

ページのURLに`#something`が含まれている場合、ページ読み込み時にブラウザは自動的に該当する要素までスクロールします。

しかし、ページ読み込み後に要素をレンダリングする場合、この機能は動作しません。

以下のような方法を使用すると、手動でこの機能を有効にすることができます。

document.querySelector(window.location.hash).scrollIntoView();

3. hidden

hiddenは属性ではなく、要素を非表示にするためのプロパティです。

`myElement.style.display = 'none';`を使用しないでください！代わりに`myElement.hidden = true;`を使用してください。

4. toggle()

`toggle()`は、特定のクラスを要素に追加または削除するメソッドです。

`el.classList.toggle('some-class', theme === 'orange');`

この方法は、条件に基づいてクラスを切り替えるのに役立ちます。

5. querySelector()

このメソッドは、任意の要素内でCSSセレクターに一致する要素を検索します。

`myElement.querySelector('.my-class')`は、`myElement`の子要素内で`.my-class`クラスを持つ要素を返します。

6. closest

`closest()`は、要素の親要素を辿って指定した要素を検索します。

`myElement.closest('article').querySelector('h1');`

このコードは、最近の<article>要素を見つけて、その中の<h1>要素を返します。

7. getBoundingClientRect()

このメソッドは、要素の位置やサイズを含むオブジェクトを返します。

使用する際には、レンダリングの再描画が発生することに注意してください。

8. matches()

要素が特定のCSSセレクターに一致するかを確認する方法です。

`if (myElement.matches('.some-class')) { ... }`

9. insertAdjacentElement()

子要素を親要素の特定位置に挿入する方法です。

`parentElement.insertAdjacentElement('beforeend', newElement);`

挿入位置は`beforebegin`、`afterbegin`、`afterend`を指定可能です。

10. contains()

ある要素が別の要素の中に含まれているかどうかを確認します。

`const handleClick = e => { if (!modalElement.contains(e.target)) modalElement.hidden = true; };`

11. getAttribute()

属性値を取得する方法です。例えば、`el.getAttribute('href')`を使用して完全なURLを取得します。

12. dialog要素の3つの便利なメソッド

`show()`、`close()`、`showModal()`メソッドを使用してモーダルダイアログを表示します。

13. forEach()

要素コレクションをループ処理します。

`document.querySelectorAll('a').forEach(el => { console.log(el.href); });`

14. form要素

`submit()`、`reset()`、`reportValidity()`メソッドを使用してフォームを操作します。

15. select()

要素を選択します。