JavaScriptでDOM (Document Object Model) 操作を行う際によく使う関数やメソッドたち

getElementById(id)

getElementByIdメソッドは、指定したID属性を持つ要素をHTMLドキュメントから取得するために使用されます。このメソッドは、HTML Documentオブジェクトのメソッドであり、JavaScriptでDOM（Document Object Model）操作を行う際に非常によく使用されます。

JavaScript

const myElement = document.getElementById('myId');

上記の例では、IDが'myId'である要素を取得しています。結果として取得される要素は、HTMLのDOM表現の一部を持つJavaScriptオブジェクトです。このオブジェクトは、要素の属性、子要素、スタイルなどにアクセスしたり変更したりするために使用できます。

なお、getElementByIdメソッドは、IDが一意（つまり、ページ内で一度だけ使われる）であることを前提としています。もし同じIDが複数の要素に使われている場合、getElementByIdメソッドは最初に見つけた要素だけを返します。

getElementsByClassName(name)

クラス名を用いてHTML要素を取得します。

getElementsByTagName(name)

タグ名（p, div, spanなど）を用いてHTML要素を取得します。

querySelector(selector)

CSSのセレクタと同じ構文を用いてHTML要素を取得します。

JavaScript

const element = document.querySelector('.myClass');

上記の例では、CSSクラス名 "myClass" を持つ最初の要素を取得します。

また、複数のセレクタを組み合わせることも可能です

JavaScript

const element = document.querySelector('#myId .myClass');

上記の例では、ID "myId" を持つ要素の子要素のうち、クラス名 "myClass" を持つ最初の要素を取得します。

複雑なセレクタも使用できます。例えば：

JavaScript

const element = document.querySelector('div.content > p:first-child');

この例では、クラス名 "content" を持つdiv要素の直接の子要素であるp要素の中から、最初の要素を取得します。

querySelectorAll(selector)

CSSのセレクタと同じ構文を用いてHTML要素を取得します。同じセレクタに一致する複数の要素を全て取得します。

innerText

HTML要素の内部テキストを取得または設定します。

JavaScript

const element = document.getElementById('myElement');
console.log(element.innerText);  // HTML要素の内部テキストを取得

上記の例では、idが"myElement"のHTML要素の内部テキストを取得しています。

要素の内部テキストを設定するためには、以下のようにします：

JavaScript

const element = document.getElementById('myElement');
element.innerText = 'Hello, World!';  // HTML要素の内部テキストを設定

上記の例では、idが"myElement"のHTML要素の内部テキストを設定し、その結果、該当する要素の中のテキストがHello, World!に置き換えられます。

setAttribute(name, value)

setAttributeメソッドは、HTML要素の属性を設定するために使用されます。このメソッドは2つの引数をとります。最初の引数は属性の名前、2番目の引数はその属性に設定する値です。

JavaScript

const element = document.getElementById('myElement');
element.setAttribute('class', 'myClass');

上記の例では、idが'myElement'のHTML要素のクラス属性を設定しています。このコードを実行した後、その要素のclass属性は'myClass'となります。

removeAttribute(name)

HTML要素の属性を削除します。

createElement(tagName)

新たなHTML要素を作成します。

appendChild(element)

appendChildメソッドは、新しい子ノード（子要素）を特定の親ノード（親要素）の子ノードリストの末尾に追加するために使用されます。このメソッドは、引数として追加するノード（要素）を受け取ります。

JavaScript

const parentElement = document.getElementById('parent');
const newElement = document.createElement('div');

parentElement.appendChild(newElement);

上記の例では、新しい<div>要素を作成し、その要素をidが'parent'の要素の子ノードとして追加しています。

appendChildメソッドは、追加される新しい子ノードを戻り値として返します。また、指定されたノードがすでにドキュメントの他の場所に存在する場合、そのノードは現在の位置から新しい位置に移動されます。つまり、appendChildは元のノードを新しい位置に移動するので、元のノードの複製を作成しません。

removeChild(element)

removeChildメソッドは、指定された子要素をDOMツリーから削除するために使用されます。親要素からこのメソッドを呼び出し、削除する子要素を引数として指定します。

JavaScript

const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');

parentElement.removeChild(childElement);

上記の例では、idが'parent'の要素からidが'child'の要素を削除しています。

removeChildメソッドは、指定した要素をDOMから削除しますが、JavaScript内の変数としてはまだ存在します。したがって、必要であれば再度DOMに追加することも可能です。

なお、削除する要素が実際に親要素の子でない場合、removeChildメソッドはエラーを投げます。そのため、削除する要素が実際に親要素の子であることを確認してからremoveChildメソッドを呼び出すことが重要です。

addEventListener(type, listener)

addEventListenerメソッドは、特定のイベントが発生したときに実行する関数（イベントリスナー）をHTML要素に追加するために使用されます。このメソッドは2つの引数をとります。最初の引数はイベントの種類（例えば、'click'、'mouseover'など）、2番目の引数はイベントが発生したときに実行する関数です。

JavaScript

const button = document.getElementById('myButton');

button.addEventListener('click', function() {
  console.log('Button was clicked!');
});

上記の例では、idが'myButton'の要素に'click'イベントリスナーを追加しています。このボタンがクリックされると、'Button was clicked!'というメッセージがコンソールに出力されます。

よく使うイベント一覧

click: ユーザーが要素をクリックしたときに発生します。
dblclick: ユーザーが要素をダブルクリックしたときに発生します。
mousedown: ユーザーがマウスボタンを押したときに発生します。
mouseup: ユーザーがマウスボタンを離したときに発生します。
mousemove: ユーザーがマウスを動かしたときに発生します。
mouseover: ユーザーが要素の上にマウスを移動したときに発生します。
mouseout: ユーザーが要素からマウスを移動したときに発生します。
keydown: ユーザーがキーを押したときに発生します。
keyup: ユーザーがキーを離したときに発生します。
keypress: ユーザーがキーを押し続けているときに発生します。
change: フォーム要素の状態が変更されたときに発生します。
submit: ユーザーがフォームを送信したときに発生します。
load: ページや画像などのリソースが完全に読み込まれたときに発生します。
unload: ページが閉じられるときに発生します。
scroll: ユーザーがスクロールしたときに発生します。

removeEventListener(type, listener)

HTML要素からイベントリスナーを削除します。

これらは基本的なDOM操作に用いられるもので、より複雑な操作にはこれらを組み合わせたり、より高度なAPIを利用したりします。また、jQueryなどのライブラリを使用すると、DOM操作をより直感的に、より少ないコードで行うことが可能になります。