要素を取得や生成

2024 3/04

2024.02.14 2024.03.04

記事の内容

取得

JavaScriptを使用して要素を取得したり生成したりする方法はいくつかあります。
基本的な方法を説明します。

要素の取得

記法

//　ID属性
document.getElementById(‘id名’);
//　クラス名
document.getElementsByClassName(‘クラス名’);
//　タグ名
document.getElementsByTagName(‘タグ名’);
//　クラス属性
document.querySelector(‘.クラス名’);

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>要素の取得に関して</title>
  </head>

  <body>
    <div id="box1">box1</div>
    <div class="box2">box2</div>
    <p>box3</p>
    <div class="box4">box4</div>
    <script src="main.js"></script>
  </body>
</html>

//　ID属性
let box1 = document.getElementById("box1");
box1.style.backgroundColor = "#bfdd9e";

//　クラス名
let box2 = document.getElementsByClassName("box2");
box2[0].style.backgroundColor = "#56c1db";

//　タグ名
let box3 = document.getElementsByTagName("p");
box3[0].style.backgroundColor = "#f4af2b";

//　クラス属性
let box4 = document.querySelector(".box4");
box4.style.backgroundColor = "#bfdd9e";

出力結果

box1

box2

box3

box4

生成

要素の生成

記法

//　要素作成
document.createElement(‘タグ名’);
//　新しい要素を既存の要素に追加
要素名.appendChild(新しい要素);

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>要素の生成に関して</title>
  </head>

  <body>
    <button id="create_element">クリックしてみて♡</button>
    <ul id="ul"></ul>
    <script src="main.js"></script>
  </body>
</html>

let btn = document.getElementById("create_element");
var ul = document.getElementById("ul");

btn.addEventListener("click", function () {
  // liタグを生成
  var li = document.createElement("li");
  // body内にタグ追加
  ul.appendChild(li);
  // 文字列追加
  li.innerHTML　= "リスト";
});

出力結果