DOMの要素にアクセスする方法

投稿日: 2019-11-08 2022-04-20
タグ: Development, javascript

序章

DOMツリーとノードについてでは、DOMがノードと呼ばれるオブジェクトのツリーとしてどのように構造化されているか、およびノードがテキスト、コメント、または要素である可能性について説明しました。通常、DOMのコンテンツにアクセスするときは、HTML要素ノードを介してアクセスします。

DOM内の要素へのアクセスに習熟するには、CSSセレクター、構文、用語の実用的な知識と、HTML要素の理解が必要です。このチュートリアルでは、DOM内の要素にアクセスするためのいくつかの方法（ID、クラス、タグ、およびクエリセレクター）について説明します。

概要

これは、このチュートリアルで取り上げる5つの方法の概要を示しています。

取得	セレクター構文	方法
ID	`#demo`	`getElementById()`
クラス	`.demo`	`getElementsByClassName()`
鬼ごっこ	`demo`	`getElementsByTagName()`
セレクター（シングル）		`querySelector()`
セレクター（すべて）		`querySelectorAll()`

DOMを研究するときは、自分のコンピューターで例を入力して、学習した情報を理解し、保持していることを確認することが重要です。

このHTMLファイルaccess.htmlを独自のプロジェクトに保存して、この記事と一緒に例を実行することができます。 JavaScriptとHTMLをローカルで操作する方法がわからない場合は、JavaScriptをHTMLに追加する方法チュートリアルを確認してください。

access.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Accessing Elements in the DOM</title>

  <style>
    html { font-family: sans-serif; color: #333; }
    body { max-width: 500px; margin: 0 auto; padding: 0 15px; }
    div, article { padding: 10px; margin: 5px; border: 1px solid #dedede; }
  </style>

</head>

<body>

  <h1>Accessing Elements in the DOM</h1>

  <h2>ID (#demo)</h2>
  <div id="demo">Access me by ID</div>

  <h2>Class (.demo)</h2>
  <div class="demo">Access me by class (1)</div>
  <div class="demo">Access me by class (2)</div>

  <h2>Tag (article)</h2>
  <article>Access me by tag (1)</article>
  <article>Access me by tag (2)</article>

  <h2>Query Selector</h2>
  <div id="demo-query">Access me by query</div>

  <h2>Query Selector All</h2>
  <div class="demo-query-all">Access me by query all (1)</div>
  <div class="demo-query-all">Access me by query all (2)</div>

</body>

</html>

このHTMLファイルには、さまざまなdocumentメソッドでアクセスする多くの要素があります。ブラウザでファイルをレンダリングすると、次のようになります。

Browser rendering of access.html page

上記の概要で概説したさまざまな方法を使用して、ファイル内の使用可能な要素にアクセスします。

IDによる要素へのアクセス

DOM内の単一の要素にアクセスする最も簡単な方法は、その一意のIDを使用することです。 documentオブジェクトのgetElementById（）メソッドを使用して、IDで要素を取得できます。

document.getElementById();

IDでアクセスするには、HTML要素にid属性が必要です。 IDがdemoのdiv要素があります。

<div id="demo">Access me by ID</div>

Console で、要素を取得してdemoId変数に割り当てましょう。

const demoId = document.getElementById('demo');

demoIdをコンソールに記録すると、HTML要素全体が返されます。

console.log(demoId);

Output<div id="demo">Access me by ID</div>

borderプロパティをpurpleに変更することで、正しい要素にアクセスしていることを確認できます。

demoId.style.border = '1px solid purple';

そうすると、ライブページは次のようになります。

Browser rendering of ID element styling

IDで要素にアクセスすることは、DOMで要素をすばやく取得するための効果的な方法です。ただし、欠点があります。 IDは常にページに対して一意である必要があるため、getElementById()メソッドを使用して一度にアクセスできるのは1つの要素のみです。ページ全体の多くの要素に関数を追加したい場合、コードはすぐに反復的になります。

クラスごとの要素へのアクセス

class 属性は、DOM内の1つ以上の特定の要素にアクセスするために使用されます。 getElementsByClassName（）メソッドを使用して、指定されたクラス名を持つすべての要素を取得できます。

document.getElementsByClassName();

ここで、複数の要素にアクセスする必要があります。この例では、demoクラスの2つの要素があります。

<div class="demo">Access me by class (1)</div>
<div class="demo">Access me by class (2)</div>

Console の要素にアクセスして、demoClassという変数に入れましょう。

const demoClass = document.getElementsByClassName('demo');

この時点で、IDの例で行ったのと同じ方法で要素を変更できると思うかもしれません。ただし、次のコードを実行して、クラスデモ要素のborderプロパティをオレンジ色に変更しようとすると、エラーが発生します。

demoClass.style.border = '1px solid orange';

OutputUncaught TypeError: Cannot set property 'border' of undefined

これが機能しない理由は、1つの要素を取得するだけでなく、配列のような要素のオブジェクトがあるためです。

console.log(demoClass);

Output(2) [div.demo, div.demo]

JavaScript配列には、インデックス番号を使用してアクセスする必要があります。したがって、0のインデックスを使用して、この配列の最初の要素を変更できます。

demoClass[0].style.border = '1px solid orange';

一般に、クラスごとに要素にアクセスする場合、1つだけでなく、その特定のクラスを持つドキュメント内のすべての要素に変更を適用する必要があります。これを行うには、forループを作成し、配列内のすべてのアイテムをループします。

for (i = 0; i < demoClass.length; i++) {
  demoClass[i].style.border = '1px solid orange';
}

このコードを実行すると、ライブページは次のようにレンダリングされます。

Browser rendering of class element styling

これで、demoクラスを持つページ上のすべての要素が選択され、borderプロパティがorangeに変更されました。

タグによる要素へのアクセス

ページ上の複数の要素にアクセスするためのあまり具体的でない方法は、HTMLタグ名を使用することです。 getElementsByTagName（）メソッドを使用してタグで要素にアクセスします。

document.getElementsByTagName();

タグの例では、article要素を使用しています。

<article>Access me by tag (1)</article>
<article>Access me by tag (2)</article>

クラスで要素にアクセスするのと同じように、getElementsByTagName()は要素の配列のようなオブジェクトを返し、forループを使用してドキュメント内のすべてのタグを変更できます。

const demoTag = document.getElementsByTagName('article');

for (i = 0; i < demoTag.length; i++) {
  demoTag[i].style.border = '1px solid blue';
}

コードを実行すると、ライブページは次のように変更されます。

Browser rendering of tag element styling

ループにより、すべてのarticle要素のborderプロパティがblueに変更されました。

クエリセレクタ

jQuery APIの経験がある場合は、CSSセレクターを使用してDOMにアクセスするjQueryの方法に精通している可能性があります。

$('#demo'); // returns the demo ID element in jQuery

querySelector()メソッドとquerySelectorAll()メソッドを使用して、プレーンJavaScriptでも同じことができます。

document.querySelector();
document.querySelectorAll();

単一の要素にアクセスするには、 querySelector（）メソッドを使用します。 HTMLファイルには、demo-query要素があります

<div id="demo-query">Access me by query</div>

id属性のセレクターは、ハッシュ記号（#）です。 demo-queryidの要素をdemoQuery変数に割り当てることができます。

const demoQuery = document.querySelector('#demo-query');

クラスやタグなど、複数の要素を持つセレクターの場合、querySelector()はクエリに一致する最初の要素を返します。 querySelectorAll（）メソッドを使用して、特定のクエリに一致するすべての要素を収集できます。

サンプルファイルには、demo-query-allクラスが適用された2つの要素があります。

<div class="demo-query-all">Access me by query all (1)</div>
<div class="demo-query-all">Access me by query all (2)</div>

class属性のセレクターはピリオドまたはピリオド（.）であるため、.demo-query-allを使用してクラスにアクセスできます。

const demoQueryAll = document.querySelectorAll('.demo-query-all');

forEach()メソッドを使用して、一致するすべての要素のborderプロパティに色greenを適用できます。

demoQueryAll.forEach(query => {
  query.style.border = '1px solid green';
});

Browser rendering of querySelector() styling

querySelector()を使用すると、コンマ区切りの値がOR演算子として機能します。たとえば、querySelector('div, article')はdivまたはarticleのいずれかドキュメントの最初に表示されるものと一致します。 querySelectorAll()を使用すると、カンマ区切りの値がAND演算子として機能し、querySelectorAll('div, article')は資料。

CSSファイルの場合と同じように、DOM内の任意の要素または要素のグループにアクセスできるため、クエリセレクターメソッドの使用は非常に強力です。セレクターの完全なリストについては、MozillaDeveloperNetworkのCSSセレクターを確認してください。

完全なJavaScriptコード

以下は、上記で行った作業の完全なスクリプトです。これを使用して、サンプルページのすべての要素にアクセスできます。ファイルをaccess.jsとして保存し、bodyタグを閉じる直前にHTMLファイルにロードします。

access.js

// Assign all elements
const demoId = document.getElementById('demo');
const demoClass = document.getElementsByClassName('demo');
const demoTag = document.getElementsByTagName('article');
const demoQuery = document.querySelector('#demo-query');
const demoQueryAll = document.querySelectorAll('.demo-query-all');

// Change border of ID demo to purple
demoId.style.border = '1px solid purple';

// Change border of class demo to orange
for (i = 0; i < demoClass.length; i++) {
  demoClass[i].style.border = '1px solid orange';
}

// Change border of tag demo to blue
for (i = 0; i < demoTag.length; i++) {
  demoTag[i].style.border = '1px solid blue';
}

// Change border of ID demo-query to red
demoQuery.style.border = '1px solid red';

// Change border of class query-all to green
demoQueryAll.forEach(query => {
  query.style.border = '1px solid green';
});

最終的なHTMLファイルは次のようになります。

access.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Accessing Elements in the DOM</title>

  <style>
    html { font-family: sans-serif; color: #333; }
    body { max-width: 500px; margin: 0 auto; padding: 0 15px; }
    div, article { padding: 10px; margin: 5px; border: 1px solid #dedede; }
  </style>

</head>

<body>

  <h1>Accessing Elements in the DOM</h1>

  <h2>ID (#demo)</h2>
  <div id="demo">Access me by ID</div>

  <h2>Class (.demo)</h2>
  <div class="demo">Access me by class (1)</div>
  <div class="demo">Access me by class (2)</div>

  <h2>Tag (article)</h2>
  <article>Access me by tag (1)</article>
  <article>Access me by tag (2)</article>

  <h2>Query Selector</h2>
  <div id="demo-query">Access me by query</div>

  <h2>Query Selector All</h2>
  <div class="demo-query-all">Access me by query all (1)</div>
  <div class="demo-query-all">Access me by query all (2)</div>

  <script src="access.js"></script>

</body>

</html>

HTML要素にアクセスすることで、これらのテンプレートファイルで引き続き作業を行い、追加の変更を加えることができます。

結論

このチュートリアルでは、DOM内のHTML要素にアクセスするための5つの方法（ID、クラス、HTMLタグ名、およびセレクター）について説明しました。要素または要素のグループを取得するために使用する方法は、ブラウザのサポートと操作する要素の数によって異なります。これで、DOMを介してJavaScriptを使用してドキュメント内のHTML要素にアクセスできるようになりました。

getdocs

13036