【Javascript】HTML・CSS要素(タグ・属性・クラス・セレクタ)の取得方法|DOMにおける基本操作入門

こんにちは、Kosei(@kay_diacc2)です!

JavaScriptを用いてHTML/CSSを操作するDOM操作の解説記事です。DOM操作の基礎を知りたい方向けであり、具体的に「HTML/CSS要素を取得する方法」について徹底解説します。

目次

JavaScriptでHTML要素を取得する手順

HTML/CSS操作手順

DOM操作のもと、HTML要素を取得する手順を上図に示します。本記事では①、②を中心に、実際のプログラミング方法を解説しています。

DOM操作において登場する専門用語に迷われた際は別途下記の記事にまとめていますため、適時ご覧ください。

操作したいHTML要素を確認

JavaScriptをもとにHTML/CSSを操作するには、事前に操作対象のHTML要素を探し、要素名や属性名等を確認する必要があります。そして、対象要素が持つ特徴キー(id値やclass属性値等)を用いて要素情報を取得する流れとなります。

以下JavaScriptに用意された要素取得メソッドをご紹介していきます。

HTML要素を取得するためのメソッド

下記メソッド実行により、HTMLから対象要素の検索・取得ができるようになります。

要素を1つ取得する

ある特定の要素を1つ取得したい場合は、Id値やセレクタ記法を引数として下記メソッドに渡します。

メソッド 引数 戻り値
document.getElementById() id属性値 Element
document.querySelector() CSSセレクタ Element

複数の要素を取得する

クラスやタグ名等が同じ要素を一括して取得したい場合は、下記メソッドを用います。要素を複数取得しているため、戻り値はNodeList(要素の配列)であることに留意しましょう。

メソッド 引数 戻り値
document.getElementsByTagName() タグ名 NodeList
document.getElementsByClassName() クラス属性値 NodeList
document.getElementsByName name属性値 NodeList
document.querySelectorAll() CSSセレクタ NodeList

取得した要素情報を表示するためのメソッド

取得した要素情報を確認する代表的なメソッドを下記に示します。

メソッド 概要
.textContent テキストボックス記載のテキスト情報を取得
.getAttribute(“属性名”) aタグのhrefやsrcを指定しURLを取得

【実践】HTML/CSS要素の取得

それでは実際にプログラムを記述してみましょう。幾つかの例を示します。

Id属性値でHTML要素を1つ取得し、テキスト情報出力

//要素を取得
let elem = document.getElementById("id属性名")

//テキスト情報を取得
console.log(elem.textContent)

セレクタ記法でHTML要素を1つ取得し、テキスト情報出力

//要素を取得
let elem = document.querySelector("CSSセレクタ")

//テキスト情報を取得
console.log(elem.textContent)

タグ名からHTML要素を複数取得し、特定のhref情報出力

//要素を取得
let elems = document.getElementsByTagName("a")

//先頭要素のurlを取得
let url = elems[0].getAttribute("href")

//url出力
console.log(url)

クラス名からHTML要素を複数取得し、先頭要素のテキスト情報出力

//要素を取得
let elems = document.getElementsByClassName("クラス名")

//先頭要素のテキスト情報を取得
let text = elems[0].textContent

//テキスト出力
console.log(text)

JavaScriptを用いてHTML/CSSを操作する

ここまででJavaScriptを用いてHTML要素を取得できるようになったかと思います。最後に取得した要素に対して何らかの操作を加える場合について学んでいきましょう!

HTML/CSSの操作方法は下記の記事にまとめているため是非ご覧ください。

最後に

この記事が気に入ったら
フォローしてね!

本記事をシェア!
URLをコピーする
URLをコピーしました!
目次
閉じる