JavaScript上でHTML要素を取得する方法

はじめに

今回は、JavaScript上でHTML要素を取得する方法をアウトプットしていこうと思います！

JavaScriptにおけるオブジェクトとはデータや機能をまとめた情報そのものになります！

これは、名前と値をセットにしてデータを管理しています！

プロパティは、オブジェクトが持つ属性を表すものです！

let human = { name: 'yamada'}

こんな感じの記述になります！

プロパティには必ず属性値であるプロパティ名とデータである値をセットで持ちます！

オブジェクトの機能を定義することをメソッドと言います！

オブジェクトには予め、用意されたオブジェクトも存在しています！

windowオブジェクトとは、ブラウザの情報を持っているオブジェクトです！

ブラウザの情報を持っているため、ブラウザオブジェクトと呼ばれています！

JavaScriptで予め用意されているメソッドやオブジェクトは全てwindowオブジェクトのプロパティであると考えらます！

documentオブジェクトとはブラウザ上で表示された情報（HTML）を操作することができるオブジェクトです！

これには、非常に多くのプロパティやメソッドを持っています！

HTMLの処理をする際は頻繁に使用するオブジェクトになります！

DOMはHTMLを解析し、データを作成する仕組みです！

DOMによって解析されたHTMLは、階層構造のあるデータとなります！

これを、DOMツリーやドキュメントツリーと呼びます！

DOMツリーをHTMLを取得する方法は３つあります！

document.getElementById(“id名”)はDOMツリーから特定のHTMLの要素を取得するためのメソッドの１つです！

因数に渡したidを持つ要素を取得します！

このように記述します！

document.getElementById("id名")

classを指定して取得する際はこちらを利用します！

getElementsと複数形になっていることに注意しないといけません！

以下のように記述します！

document.getElementsByClassName("class名")

セレクタ名とは、CSSでスタイルを適応するために指定している要素です！

セレクタ名を指定して習得する場合、querySelectorAllメソッドを使用します！

HTML上から、引数指定したセレクタに合致するものを全て取得します！

document.querySelector("セレクタ名")

これに関連したもので、querySelectorというメソッドもあります！

これをモイいれば、HTML上から引数で指定したセレクタの合致する要素のうち１番最初に見つかった要素１つを取得することもできます！