DOM操作-javascript備忘録

要素の選択

DOM操作の基本、要素をひっぱる方法まとめ

  <div class="row col-10 mb-3 mx-auto justify-content-center">
    <button id="btn1" class="btn btn-danger col-2 m-1">ボタン赤</button>
    <button class="btn btn-success col-2 m-1">ボタン緑</button>
    <button class="btn btn-primary col-2 m-1">ボタン青</button>
    <button class="btn btn-warning col-2 m-1">ボタン黄</button>
  </div>

.getElementById();

ピンポイントで習得できるが、IDの設定がいる。

const btn = document.getElementById('btn1');
console.log(btn.textContent); //結果 ボタン赤

.getElementsByClassName()[];

同名のクラスが複数習得されてオブジェクトされる。
getElementsなのに注意。

const btn = document.getElementsByClassName('btn')[1];
console.log(btn.textContent); //結果 ボタン緑

.getElementsByTagName()

const btn = document.getElementsByTagName('btn')[2];
console.log(btn.textContent); //結果 ボタン青

タグ名でもオブジェクトで指定できる。