今回はJavaScriptのDocumentメソッドです。

Documentオブジェクトは、Webページ全体を表現するためのオブジェクトであり、ブラウザ上でのドキュメントの構造や内容にアクセスするためのメソッドやプロパティを提供します。

1. getElementById(id)

指定されたid属性を持つ要素を取得します。

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

2.getElementsByClassName(className)

指定されたクラス名を持つ要素を含むHTMLCollectionオブジェクトを返します。

const elements = document.getElementsByClassName('myClass');

3.getElementsByTagName(tagName)

指定されたタグ名を持つ要素を含むHTMLCollectionオブジェクトを返します。

const elements = document.getElementsByTagName('div');

4.querySelector(selector)

指定されたCSSセレクタに一致する最初の要素を返します。

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

5.querySelectorAll(selector)

指定されたCSSセレクタに一致する全ての要素を含むNodeListオブジェクトを返します。このメソッドは、特定の条件に一致する複数の要素を取得する際に非常に便利です。

const elements = document.querySelectorAll('.myClass');

6.createElement(tagName)

指定された要素名の新しいElementオブジェクトを作成します。JavaScriptで動的に要素を生成する際に使われます。

const newElement = document.createElement('div');

7.addEventListener(event, listener)

指定されたイベントが発生したときに、指定されたリスナー関数を呼び出します。特定のイベントに対する処理を設定する際に使われます。

element.addEventListener('click', function() {
  console.log('Element clicked');
});

8.appendChild(node)

指定されたノードを現在の要素の子要素として追加します。新しい要素をDOMに追加する際によく使われます。

parent element.appendChild(newElement);

9.removeChild(node)

指定されたノードを現在の要素から削除します。不要な要素をDOMから削除する際に使われます。

parent element.removeChild(child element);

10.getElementById(id), getElementsByClassName(className), getElementsByTagName(tagName)

これらのメソッドは、要素をid、クラス、タグ名によって取得するために使用されます。特にidやクラス名によって要素を特定する必要がある場合によく利用されます。

const elementById = document.getElementById('myElement');
const elementsByClass = document.getElementsByClassName('myClass');
const elementsByTag = document.getElementsByTagName('div');