JavaScript(JS)のDOM操作の基本、DOM取得について〜

2021年1月31日

こんにちは！

今回は「JavaScript(JS)の基本的なDOM操作方法」について、お伝えしていきたいと思います。

最近はReactやVue.jsのようなフレームワークを使ってフロントエンドの開発をすることが多いかと思います。

しかし、ワードプレスやExpressを使う際には素のJSを書くこともあると思うので、記事にしました。

Contents

1 DOMの取得方法４選

DOMの取得方法４選

以降では、DOMの取得方法について、解説していきます。

準備として、以下のような画面を用意しています。
ボタンをクリックすると、JavaScript関数（getDom）が実行されます。

コードは以下です。

<head>
  <link rel="stylesheet" href="css/style.css">
</head>
  
<body>
  <div class="btn" onclick="getDom()">DOM操作</div>
  <p  id="testId" name="testName" class="testClass">このDOMを操作します</p>
</body>

<script type="text/javascript">
const getDom = () => {
  // 処理を記述
}
</script>

idを指定して取得：document.getElementById()

１つ目はidを指定して取得する方法です。


const getDom = () => {
  const testDom1 = document.getElementById('testId');
  console.log(testDom1);
  // 出力：　<p id="testId" name="testName" class="testClass">このDOMを操作します</p>
};

name:を指定して取得：document.getElementsByName()

２つ目はnameを指定して取得する方法です。


const getDom = () => {
  const testDomList2 = document.getElementsByName('testName');
  // 配列で返されるので、要素の一番目を格納
  const testDom2 = testDomList2[0];
  console.log(testDom2);
  // 出力：　<p id="testId" name="testName" class="testClass">このDOMを操作します</p>
};

セレクタを指定して１件のみ取得：document.querySelector()

３つ目はセレクタを指定して１件のみ取得する方法です。


const getDom = () => {
  const testDom3 = document.querySelector('.testClass');
  console.log(testDom3);
  // 出力：　<p id="testId" name="testName" class="testClass">このDOMを操作します</p>
};

セレクタを指定してすべて取得：document.querySelectorAll()

４つ目はセレクタを指定してすべて取得する方法です。


const getDom = () => {
  // クラス名を指定
  const testDomList4 = document.querySelectorAll('.testClass');
  // タグ名を指定することもできます
  // const testDomList4 = document.querySelectorAll('p');
  const testDom4 = testDomList4[0];
  console.log(testDom4);
  // 出力：　<p id="testId" name="testName" class="testClass">このDOMを操作します</p>
};

以上がDOMの操作方法の基本である、DOMの取得方法についてになります。