プログラミング フロントエンド

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

スポンサーリンク

こんにちは!

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

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

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

DOMの取得方法4選

以降では、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()

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


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

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

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


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

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

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


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

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

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


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の取得方法についてになります。

スポンサーリンク

-プログラミング, フロントエンド
-

© 2021 エンジニア×ライフハック Powered by AFFINGER5