JavaScript DOM 「操作・要素の取得」

JavaScript

JavaScriptを使ってDOMを操作し、Webページに動的な表現を加えることが出来ます。

以下はHTMLの要素の取得について検証してみました。

要素を取得する方法

getElementById()

このメソッドは、指定したID属性を持つ要素を取得します。

<div id="myDiv">これはサンプルのdiv要素です。</div>
const myEid = document.getElementById("myDiv"); 
console.log(myEid.textContent); // "これはサンプルのdiv要素です。"

myEid に myDiv のID属性を持つ要素を取得します。
text.Content を使用して取得した要素内のテキストのみを出力します。

getElementsByClassName()

このメソッドは、指定したクラス名を持つすべての要素を取得します。

<p class="myPara">サンプルの段落A</p>
<p class="myPara">サンプルの段落B</p>
const paraEl = document.getElementsByClassName("myPara");
    for (const para of paraEl) {
        console.log(para.textContent);
    }
    // 出力:
    // "サンプルの段落A"
    // "サンプルの段落B"

paraElにmyParaのクラス名を持つ要素を取得します。
上記のように要素が複数ある場合は、配列として取得します。

getElementsByTagName()

このメソッドは、指定したタグ名を持つすべての要素を取得します。

<ul>
    <li>リストアイテム1</li>
    <li>リストアイテム2</li>
</ul>
const listItems = document.getElementsByTagName("li");
    for (const item of listItems) {
        console.log(item.textContent);
    }
    // 出力:
    // "リストアイテム1"
    // "リストアイテム2"

querySelector()

このメソッドは、指定したCSSセレクターに一致する最初の要素を取得します。

<a href="https://example.com">リンク</a>
const linkElement = document.querySelector("a");
console.log(linkElement.href); // "https://example.com"

コメント