HTMLの操作 要素の取得 Javascript初学者講座

JavaScript

JavaScriptではHTMLの要素を操作して様々な変化を与えることができます。
基本的な処理の流れは

要素の情報を取得
↓
取得した要素の情報を操作

の順で処理をしていきます。

まずは要素の取得から勉強していきましょう。要素の取得勉強するためにヘッダー部分のHTMLを作りましたので、下記をサンプルとして進めていきます。

  <header class="globalHeader">
    <h1 id="globalHeader__heading">JavaScript初学者講座</h1>
    <nav class="globalHeader__navigation">
      <ul class="globalHeader__navigationList">
        <li class="globalHeader__navigationItem globalHeader__navigationItem--about"><a href="" class="globalHeader__navigationLink">講座概要</a></li>
        <li class="globalHeader__navigationItem globalHeader__navigationItem--teacher"><a href="" class="globalHeader__navigationLink">講師紹介</a></li>
        <li class="globalHeader__navigationItem globalHeader__navigationItem--contact"><a href="" class="globalHeader__navigationLink">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

document

JavaScriptでHTMLの要素を取得する際にdocumentオブジェクトを記述してからIDやclassなどで要素を取得していきます。
試しにdocumentオブジェクトをコンソールで表示してみましょう。

console.log(document);

するとHTMLのソースコードが全て出てきます。この中から何を取得するという指示をこれから勉強していきます。

getElementById

IDを指定してその要素を取得します。

const headerHeading = document.getElementById("globalHeader__heading");
console.log(headerHeading);
// <h1 id="globalHeader__heading">JavaScript初学者講座</h1>

IDは1つのHTML内に1つというルールがあるので、この指定方法で複数の要素が取れることはないはずです。しかし、記述ミスでHTML側でそのルールが守られていない可能性もあるので注意が必要です。試しに同じIDの要素を作って検証します。

// HTML
<h1 id="globalHeader__heading">JavaScript初学者講座</h1>
<h2 id="globalHeader__heading" class="globalHeader__subHeading">フロントエンジニア13年目からの起訴のやり直し</h2>

// JavaScript
const headerHeading = document.getElementById("globalHeader__heading");
console.log(headerHeading);

// <h1 id="globalHeader__heading">JavaScript初学者講座</h1>

結果は先に記述したものがコンソールに表示されました。getElementById()は１件該当のものがあった時点で値を返して処理を完了しているようです。

getElementsByClassName

クラス名を指定して要素を取得するメソッドです。先ほどのIDをは違いclassは複数表記されていることがあり、getElementByClassNameでは該当するすべてのものを配列内にオブジェクトで代入します。
下記コードでは取得した内容をループ処理して、HTML内のテキストをコンソールに出力しています。

const navItem = document.getElementsByClassName("globalHeader__navigationItem");

for(let i = 0; i < navItem.length; i++) {
  console.log(navItem[i].innerText);
}

// 講座概要
// 講師紹介
// お問い合わせ

ここで書いていたときに気づいたのですが、配列にオブジェクトを持つデータなのでforEachを使ってループさせたほうがいいんじゃないかと思ったので、初めは下記のように記述していました。

const navItem = document.getElementsByClassName("globalHeader__navigationItem");

navItem.forEach(item => {
  console.log(item.innerTetx);
}
// Uncaught TypeError: navItem.forEach is not a function

しかし、これはエラーが表示されてしまいました。
調べてみたところgetElementByClassNameメソッドではforEachでループ処理を行う際に必要な、forEachメソッドが定義されていないとのことでした。
対処法は色々とあるようですが、for文で書くのが一番シンプルでしたのでそのように記述しました。

querySelector

querySelector()はIDやclassなどメソッド自体で取得する要素を限定しません。
IDやclassでも取得できますし、HTMLの要素名でも取得ができます。試しにナビゲーションのliタグを取得します。

const item = document.querySelector(".globalHeader__navigation li");

console.log(item);
// <li class="globalHeader__navigationItem"><a href="" class="globalHeader__navigationLink">講座概要</a></li>

querySelector()ではCSS同様に .（ドット）を先頭につけてclassを指定します。上記の例では半角スペース空きを入れてliを入力して「.globalHeader__navigation 内のliタグ」を指定しています。
結果はgetElementById()の時と同じで最初の1つを取得します。

querySelectorAll

querySelectorでは1つの要素しか取得しませんでしたが、querySelectorAll()では条件に一致する全ての要素を取得します。ひとつ前の例を書き換えてコンソールを確認します。

const itemList = document.querySelectorAll(".globalHeader__navigation li");

itemList.forEach(item => {
  console.log(item.innerText);
})

// 講座概要
// 講師紹介
// お問い合わせ

getElementByClassName()の時と同様に該当する全ての要素をループ処理し、HTMLのテキストを表示させました。（こちらはforEachが使えるようです）

親要素、子要素、前後要素の取得

続いてはCSSで言うところの擬似クラスのような、特定要素の付近の要素の取得方法を勉強していきましょう。
ナビゲーションのHTMLを取得して様々な取得方法を試します。

子要素 children

まずは子要素の取得です。「.globalHeader__navigationList」の子要素のように取得します。

const itemList = document.querySelector(".globalHeader__navigationList");
const items = itemList.children;

for (let i = 0; i < items.length; i++) {
  console.log(items[i].innerText)
}

// 講座概要
// 講師紹介
// お問い合わせ

querySelectorAllの時と同様に子要素を取得していますが、childrenの場合は1階層下の子要素を取得することになりますので、処理の流れに違いがあることを忘れないでおきましょう。

.childrenに近いメソッドで最初の子要素のみを取得する firstElementChild や、最後の子要素のみを取得する lastElementChild があるので例を挙げておきます。

const itemList = document.querySelector(".globalHeader__navigationList");
const firstItem = itemList.firstElementChild;
const lastItem = itemList.lastElementChild;

console.log(firstItem.innerText); // 講座概要
console.log(lastItem.innerText); // お問い合わせ

親要素 parentNode

子要素から親要素を取得するメソッドです。下記の場合は「#globalHeader__heading」をもとに、parentNodeメソッドで親要素の「.globalHeader」の要素を取得しています。

const headerHeading = document.getElementById("globalHeader__heading");

console.log(headerHeading.parentNode);
// <header class="globalHeader">...</header>

兄弟要素 nextElementSibling previousElementSibling

特定要素の兄弟要素を取得するメソッドです。下記の場合は「.globalHeader__navigationItem–teacher」を元に前後のliタグを取得してHTML内のテキストを取り出しています。

const item = document.querySelector(".globalHeader__navigationItem--teacher");
const nextItem = item.nextElementSibling;
const prevousItem = item.previousElementSibling;

console.log(nextItem.innerText); // お問い合わせ
console.log(prevousItem.innerText); // 講座概要

終わりに

これからHTMLを操作していく前にまずはHTMLの取得方法を勉強しました。
割とCSSに近い指定方法だったので既にマークアップができる人には馴染みやすいのと、以前の勉強で配列やオブジェクト、ループ処理を学んでいたので取得後にどの値を参照するかの操作もスムーズにできました。
次回は実際にHTMLの操作を勉強していきましょう。

ここまで読んでくださり、ありがとうございました。

参考記事
【JavaScript】 getElementsByClassNameでforEachがエラーな理由と対処方法 | けーちゃんのプログラム開発ノート

制作協力
サムネイル制作：うみ Twitter

スポンサーリンク

コメント

タイトルとURLをコピーしました