JavaScriptでDOMの基本操作: 要素とNODEの取得方法まとめ

2021年1月7日JavaScript

JavaScriptでDOMの基本操作: 要素を取得する方法をまとめました。

HTML要素を取得する



// 要素の選択 Selecting elements
console.log(document.documentElement);//HTML全体を取得できる
console.log(document.head);//headを取得できる
console.log(document.body);//bodyを取得できる

単にHTML要素を取得したい場合は、上のようにdocumentから指定します。document.documentElementでHTML要素自体を選択することも可能です。

DOM要素の取得方法まとめ

要素の取得方法には次のものがあります。

  • querySelector()→1つの要素なら何でも選択できる
  • querySelectorAll()→何でも複数選択できる
  • getElementById()→id属性のみ選択できる
  • getElementsByTagName() →要素名を複数選択できる
  • getElementsByClassName()→クラス名を複数選択できる
  • closest()→DOMツリーを上に上がって親もしくは自分自身を取得できる

querySelector()とquerySelectorAll()はどの属性でも選択できるのでクラスならピリオド(.)、idなら#(ハッシュ)が必要です。

closest()メソッドは、要素とその親を階層を登って、指定されたセレクター文字列に一致するノードが見つかるまで探します。
closest()メソッドは、querySelector()と真逆と考えるとわかりやすいです。querySelector()はDOMツリーをどんどん階層の下へ向かって探しに行きますが、closest()メソッドはDOMツリーを上に上がって探しに行きます。
見つかったら、その要素自体もしくは一致する祖先を返します。closest()メソッドは、イベント移譲の際に重要になります。

NodeListの取得



//NodeListを取得
const allSections = document.querySelectorAll('.section');
console.log(allSections); //NodeList(4)
NodeListが返される。とても良く使います。

このdocument.querySelector()というのはdocumentだけで使えるわけではないです。子要素でも使えます。

HTMLCollectionsの取得



//HTMLCollectionsを取得
document.getElementById('#section-1');
const allButtons = document.getElementsByTagName('button');
console.log(allButtons); 
//HTMLCollection(9)

console.log(document.getElementsByClassName('btn'));
//HTMLCollection(5)

HTMLCollectionを取得しています。NodeListではありません。HTMLCollectionはNodeListとは違い、更新すると自動的に変化します。
ほとんどの場合、querySelector()もしくはquerySelectorAll()を使う方がいいでしょう。

 

DOM操作を関数と組み合わせる

DOM操作を関数と組み合わせてみましょう。

0.5秒後に変化するように関数を作ってみましょう。


'use strict';
{
  function change() {
    document.querySelector('h1').textContent = 'DOMを操作する';
  }
  setTimeout(change, 500);
}

JavaScriptのsetInterval()とsetTimeout()を使い方については、次の記事を参考にしてみてください。


関数の使い方については、次の記事を参考にしてみてください。

複数の要素を取得する

document.querySelectorは最初に見つかった要素だけを選択し操作することができます。
複数の要素を同時に選択して変更したくてもできないということです。
複数の要素を取得するためには、document.querySelectorAll(‘’)を使います。
また配列と同じでdocument.querySelectorAll(‘p’)[1]とすると、インデックス番号で1番目にくるpタグを取得できます。

<h2>タイトル1</h2>
  <p>Pタグ1</p>
  <p>Pタグ2</p>
<h2>タイトル2</h2>
  <p>Pタグ3</p>
  <p>Pタグ4</p>

  'use strict';
  {
    function change() {
      document.querySelectorAll('p')[0].textContent = 'DOMを操作する';
    }
    setTimeout(change, 500);
  }

forEachを使う

そして、querySelectorAllではNodeListが配列の形で取得できるため、forEach()を使うことができます。
forEachにはp要素とindexを引数で渡すことで2つともそれぞれ呼び出せます。


  'use strict';
  {
    function change() {
      document.querySelectorAll('p').forEach((p, index) => {
      p.textContent = `${index}番目の内容:${p}`;
      });
    }
    setTimeout(change, 500);
  }

 

子Nodeの取得方法

  • firstChild→改行・空白含めた最初の子Nodeのみを取得
  • lastChild→改行・空白含めた最後の子Nodeのみを取得
  • childNodes→改行・空白含めた子Nodeを複数取得
  • children→改行・空白含めない子Nodeを複数取得
  • firstElementChild→改行・空白含めない最初の子Nodeのみを取得
  • lastElementChild→改行・空白含めない最後の子Nodeのみを取得

親Nodeの取得方法

  • parentNode→一つ上の親のNodeのみ取得
  • parentElement→一つ上の親の要素のみ取得

またliからみた親Nodeを取得したい場合は、li.parentNodeとすればOKです。

兄弟Node・要素の取得取得

  • previousSibling→改行・空白含めた先の兄弟Nodeのみを取得
  • nextSibling→改行・空白含めた後の兄弟Nodeのみを取得
  • previousElementSibling→改行・空白含めない先の兄弟Nodeのみを取得
  • nextElementSibling→改行・空白含めない後の兄弟Nodeのみを取得

兄弟要素をすべて取得する場合

兄弟要素に関しては、となりの要素を一つしか選択できません。
すべての兄弟要素を指定したいときは、一度親要素を指定してから子要素を選択します。

console.log(h1.parentElement.children);

 

    JavaScript

    Posted by devsakaso