JavaScriptのdocumentオブジェクトでよく使いそうな用途

概要

JavaScriptには、ウェブページのHTMLドキュメントにアクセスするためのdocumentオブジェクトが用意されています。これを利用することで、ウェブページ内の要素を取得、変更、追加、削除など、さまざまな操作を行うことができます。

以下はdocumentオブジェクトの主な利用方法をまとめます。

getElementByIdメソッド

const element = document.getElementById("id");

このメソッドを使うと、HTML要素のIDを指定して、その要素を取得することができます。

getElementsByClassNameメソッド

const elements = document.getElementsByClassName("className");

このメソッドを使うと、クラス名を指定して、そのクラスを持つ全ての要素を取得することができます。

getElementsByTagNameメソッド

const elements = document.getElementsByTagName("tagName");

このメソッドを使うと、タグ名を指定して、そのタグを持つ全ての要素を取得することができます。

querySelectorとquerySelectorAllメソッド

const element = document.querySelector(".className #id");
const elements = document.querySelectorAll("tagName .className");

これらのメソッドを使うと、CSSセレクタを使用して要素を取得することができます。querySelectorは最初に一致した要素を、querySelectorAllは一致した全ての要素を取得します。

更に、CSSセレクタの疑似クラスを使用して、特定の位置の要素を絞り込むことも可能です。

// ページ内の全てのp要素のうち、最初の要素を取得
const firstPElement = document.querySelector("p:first-child");

// ページ内の全てのp要素のうち、最後の要素を取得
const lastPElement = document.querySelector("p:last-child");

// ページ内の全てのp要素のうち、偶数番目の要素を全て取得
const evenPElements = document.querySelectorAll("p:nth-child(even)");

createElementメソッド

const element = document.createElement("tagName");

新しいHTML要素を作成するには、このメソッドを使います。

createTextNodeメソッド

const textNode = document.createTextNode("text");

新しいテキストノードを作成するには、このメソッドを使います。

appendChildメソッド

parentElement.appendChild(childElement);

新しい子要素を既存の親要素に追加するには、このメソッドを使います。