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

前書き

DOMツリーとノードの理解では、DOMがノードと呼ばれるオブジェクトのツリーとしてどのように構成されるかを調べました、そのノードはテキスト、コメント、または要素になります。 通常、DOMのコンテンツにアクセスするときは、HTML要素ノードを介します。

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

概要

このチュートリアルで扱う5つの方法の概要を表に示します。

Gets Selector Syntax Method

ID

#demo

getElementById()

Class

.demo

getElementsByClassName()

Tag

demo

getElementsByTagName()

Selector (single)

querySelector()

Selector (all)

querySelectorAll()

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

このHTMLファイルである `+ access.html +`を独自のプロジェクトに保存して、この記事とともに例を実行することができます。 JavaScriptとHTMLをローカルで使用する方法がわからない場合は、https://www.digitalocean.com/community/tutorials/how-to-add-javascript-to-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`メソッドでアクセスする多くの要素があります。 ブラウザでファイルをレンダリングすると、次のようになります。

image:https://assets.digitalocean.com/articles/eng_javascript/dom/html-rendering.png [access.htmlページのブラウザレンダリング]

上記のhttps://www.digitalocean.com/community/tutorials/how-to-access-elements-in-the-dom#overview [概要]で説明したさまざまな方法を使用して、利用可能なファイル内の要素。

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

DOMの単一の要素にアクセスする最も簡単な方法は、一意のhttps://developer.mozilla.org/en-US/docs/Web/API/Element/id[ID]を使用することです。 + document +`オブジェクトのhttps://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById [+ 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';

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

image:https://assets.digitalocean.com/articles/eng_javascript/dom/id-element.png [ID要素のスタイル設定のブラウザレンダリング]

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

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

class属性は、DOMの1つ以上の特定の要素にアクセスするために使用されます。 https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName [+ 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 arrayは、インデックス番号でアクセスする必要があります。 したがって、 `+ 0 +`のインデックスを使用して、この配列の最初の要素を変更できます。

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

通常、クラスで要素にアクセスする場合、1つだけでなく、その特定のクラスを持つドキュメント内のすべての要素に変更を適用します。 これを行うには、「+ for +」ループを作成し、配列内のすべての項目をループします。

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

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

image:https://assets.digitalocean.com/articles/eng_javascript/dom/class-element.png [クラス要素スタイリングのブラウザレンダリング]

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

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

ページ上の複数の要素にアクセスするあまり具体的ではない方法は、HTMLタグ名によるものです。 https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName [+ 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';
}

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

image:https://assets.digitalocean.com/articles/eng_javascript/dom/tag-element.png [タグ要素スタイリングのブラウザレンダリング]

ループは、すべての `+ article `要素の ` border `プロパティを ` blue +`に変更しました。

クエリセレクター

jQuery APIの使用経験がある場合は、CSSセレクターを使用してDOMにアクセスするjQueryの方法に慣れているかもしれません。

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

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

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

単一の要素にアクセスするには、https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector [+ querySelector()+]メソッドを使用します。 HTMLファイルには、 `+ demo-query`要素があります

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

+ id +`属性のセレクターはハッシュ記号( `+#+)です。 + demo-query idの要素を` + demo Query`変数に割り当てることができます。

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

クラスやタグなど、複数の要素を持つセレクターの場合、 + querySelector()+`はクエリに一致する最初の要素を返します。 https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll [+ 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';
});

image:https://assets.digitalocean.com/articles/eng_javascript/dom/query-selector.png [querySelector()スタイリングのブラウザーレンダリング]

+ querySelector()+`を使用すると、コンマ区切り値はOR演算子として機能します。 たとえば、 `+ querySelector( 'div、article')+`は `+ div + or + article +`のいずれかがドキュメントの最初に現れるものと一致します。 `+ querySelectorAll()+`を使用すると、コンマ区切り値はAND演算子として機能し、 `+ querySelectorAll( 'div、article')+`はドキュメント内のすべての `+ div + and `+ article +`値と一致します。

クエリセレクターメソッドを使用すると、CSSファイルと同じ方法でDOMの任意の要素または要素のグループにアクセスできるため、非常に強力です。 セレクターの完全なリストについては、Mozilla Developer Networkでhttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors[CSS Selectors]を確認してください。

完全な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要素にアクセスすることで、これらのテンプレートファイルの作業を続行して、追加の変更を加えることができます。

結論

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