javascriptのDOM操作

DOMとは、Document object Modelの略であり、リソース要素を操作可能にする仕組みです。

所謂、head,title,body,article,div等のHTMLのタグの属性をjavascriptで操作することみたいな感じです。

実は以前勉強していますが、今回はそれについて詳しく勉強していきます。

javascriptのイベント

今回はイベントについて勉強します。今までは「<input type="button" value="OK" onclick="keisan(4)">」のonclickで感知して動くイベントでjavascriptを動かしていましたが、...

kamonhobby.com

2024/06/25

まず、idの取得です。

let button = document.getElementById('xxx');

これはxxxというidのものを取得します。
これは間違い用が無いので、要素の取得はidが一番手っ取り早いかもしれません。

次はセレクターです。

const event = document.querySelector(".event");

これでクラスを指定することができます。
タグの属性そのものを指定することだってできちゃいます。

const list = document.querySelector('ul');

これはulタグを取得しています。

次は親の要素を取得していきます。

<div class="oya">
  <button class="ko">click me</button>
</div>

const Child = document.querySelector('.ko');
const Parent = Child.parentNode;

子の要素を取得する事もできます。

<div class="oya">
  <button class="ko">click me</button>
</div>

const list = document.querySelector('.oya');
const listItems = list.childNodes;

主にイベント操作で使っていくことになるでしょう。

次回は他の操作も学んでいきます。