【JavaScript】超基礎的なメソッドの紹介 その１

JavaScriptで行うDOM(Document Object Model、要はHTML等のマークアップ言語にアクセス・編集しやすい標準的に仕組み)の操作において、基礎的なメソッドを学んだため、備忘として記します。

１　HTML要素の取得（すべてはこれから始まる）
　　getElementByIdメソッド、getElementsByTagNameメソッド

<h1 id = "heading1">朝の献立</h1>
<h1 id = "heading2">昼の献立</h1>
const select = getElementById(`heading1`); //「heading1」のidを持つHTML要素を取得し、定数selectに代入。
console.log(select); //「<h1 id = "heading1">朝の献立</h1>」をコンソールに出力。
const selects = getElementsByTagName(`h1`); //<h1>要素すべてを「配列の様に」取得（getElement"s"ByTagNameである点に注意）
console.log(selects[0]); //<h1>要素のうち１つ目をコンソールに出力。※文字列「朝の献立」を出力するわけではない点に注意。
console.log(selects[2]); //<h1>要素の３つ目は、undefined（定義されていない）とエラー。

２　テキストデータの取得
　textContentメソッド（ついでにfor文を用いた応用）

<h1 id = "heading1">朝の献立</h1>
<h1 id = "heading2">昼の献立</h1>
<h1 id = "heading3">夜の献立</h1>
const selects = getElementsByTagName(`h1`); //<h1>要素すべてを「配列の様に」取得（getElement"s"ByTagNameである点に注意）
console.log(selects[0].textContent); //「朝の献立」とコンソールに出力。

for (let i = 0; i > selects.length; i++) {
     console.log(selects[i].textContent);
} //「朝の献立」「昼の献立」「夜の献立」とコンソールに出力。※for文の条件式の注意点としては、.lengthでselects要素の数を取得している。

とりあえずここまで。
その１と書いたので、続けたいと思います。