【ワンピースで覚えるJavaScript】第２１回 DOM操作 (プログラミング入門講座)

2023年7月29日 12:09

JavaScriptのDOM操作です。

これで、要素の取得をすることができます。

状況に応じて、適切な取得をできるようにしましょう！

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" media="screen" href="style.css">
  </head>
  <body>
    <h1 id="title">ワンピース</h1>
    <h2 class="man">ルフィ</h2>
    <h2 class="man">ゾロ</h2>
    <h2>ナミ</h2>
    <form>
      <p>欲しい悪魔の実は？</p>
      <label>
        <input type="radio" name="fruits" value="gum">ゴムゴムの実
      </label>
      <label>
        <input type="radio" name="fruits" value="chop">バラバラの実
      </label>
      <label>
        <input type="radio" name="fruits" value="flare">メラメラの実
      </label>
    </form>
    <script src="index.js"></script>
  </body>
</html>

/* DOM操作(HTML文書をオブジェクトデータとして)
①id属性による検索
②タグ名による検索
③name属性による検索
④class属性による検索
⑤セレクター式で検索
*/
//①id属性による検索 getElementById
console.log("--getElementById--");
let title = document.getElementById("title");
console.log(title);
console.log("--textContent--");
console.log(title.textContent);

//②タグ名による検索 getElementsByTagName
console.log("--getElementsByTagName--");
let h2_elems = document.getElementsByTagName("h2");
console.log(h2_elems);
console.log("--textContent--");
//console.log(h2_elems.textContent);
for (let i = 0; i < h2_elems.length; i++) {
    console.log(h2_elems[i].textContent);
}

//③name属性による検索　getElementsByName
console.log("--getElementsByName--");
let name_elems = document.getElementsByName("fruits");
console.log(name_elems);
console.log("--value--");
for (let i = 0; i < name_elems.length; i++) {
    console.log(name_elems[i].value);
}

//④class属性による検索 getElementsByClassName
console.log("--getElementsByClassName--");
let class_elems = document.getElementsByClassName("man");
console.log(class_elems);
console.log("--textContent--");
for (let i = 0; i < class_elems.length; i++) {
    console.log(class_elems[i].textContent);
}

//⑤セレクター式で検索 querySelector
//CSSに準じる　※getElement..と比べると低速
console.log("--querySelector--");
let elems = document.querySelector("form input");
console.log(elems);
console.log("--value--");
console.log(elems.value);
//⑤セレクター式で検索 querySelectorAll
console.log("--querySelectorAll--");
elems = document.querySelectorAll("form input");
console.log(elems);
console.log("--value--");
for (let i = 0; i < elems.length; i++) {
    console.log(elems[i].value);
}

この記事が気に入ったらサポートをしてみませんか？