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"
コメント