CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

JavaScriptでHTML要素を比較する2つの方法｜手動比較とJSON比較を徹底解説

動的なWebアプリケーションを開発していると、JavaScriptでHTML要素同士を比較したい場面は頻繁に発生します。たとえば「2つの要素が同じタグ名やクラス、テキスト内容を持っているかどうかを確認したい」といったケースです。本記事では、JavaScriptを使ってHTML要素を比較するための2つの効果的な手法を、実際に動作するサンプルコードとともに詳しく解説します。

方法1：手動でプロパティを比較する

手動比較の最大のメリットは、どのプロパティを比較対象にするかを完全にコントロールできる点です。この方法では、タグ名（tagName）、クラス名（className）、テキスト内容（innerText）など、必要な属性だけをピンポイントでチェックします。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>HTML要素の手動比較</title>
 <style>
 .sample {
 padding: 10px;
 margin: 5px 0;
 background-color: #f0f0f0;
 border: 1px solid #ccc;
 }
 .result {
 margin-top: 20px;
 padding: 10px;
 background-color: #e8f5e8;
 border-left: 4px solid #4CAF50;
 }
 </style>
</head>
<body>
 <div id="firstElement" class="sample">Hello World</div>
 <div id="secondElement" class="sample">Hello World</div>
 <div id="thirdElement" class="sample">TutorialsPoint</div>
 <div id="output" class="result"></div>
 <script>
 function areElementsSame(elementA, elementB) {
 return elementA.tagName === elementB.tagName &&
 elementA.className === elementB.className &&
 elementA.innerText === elementB.innerText;
 }
 const firstElement = document.getElementById("firstElement");
 const secondElement = document.getElementById("secondElement");
 const thirdElement = document.getElementById("thirdElement");
 const output = document.getElementById("output");
 let results = [];
 // 1つ目と2つ目の要素を比較
 if (areElementsSame(firstElement, secondElement)) {
 results.push("○ 1つ目と2つ目の要素は同一です");
 } else {
 results.push("× 1つ目と2つ目の要素は異なります");
 }
 // 1つ目と3つ目の要素を比較
 if (areElementsSame(firstElement, thirdElement)) {
 results.push("○ 1つ目と3つ目の要素は同一です");
 } else {
 results.push("× 1つ目と3つ目の要素は異なります");
 }
 output.innerHTML = results.join("<br>");
 </script>
</body>
</html>
実行すると、グレー背景の3つのdiv要素が画面に表示され、その下に以下の比較結果が出力されます。
○ 1つ目と2つ目の要素は同一です
× 1つ目と3つ目の要素は異なります

方法2：JSON.stringifyを活用した比較

もうひとつの方法は、要素の各プロパティをオブジェクトとしてまとめ、JSON.stringify()で文字列化してから比較するアプローチです。プロパティの数が多い場合や、複数の属性を一度に比較したい場合に特に効率的です。data属性（dataset）などもまとめて比較できるのが特徴です。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>JSONによるHTML要素の比較</title>
 <style>
 .content {
 padding: 15px;
 margin: 5px 0;
 background-color: #f9f9f9;
 border: 1px solid #ddd;
 border-radius: 4px;
 }
 .result {
 margin-top: 20px;
 padding: 15px;
 background-color: #fff3cd;
 border: 1px solid #ffeaa7;
 border-radius: 4px;
 }
 </style>
</head>
<body>
 <div id="block1" class="content" data-value="test">Hello World</div>
 <div id="block2" class="content" data-value="test">Hello World</div>
 <div id="block3" class="content" data-value="different">TutorialsPoint</div>
 <div id="output" class="result"></div>
 <script>
 function compareElementsByJSON(el1, el2) {
 const el1Props = {
 tagName: el1.tagName,
 className: el1.className,
 innerText: el1.innerText,
 dataset: el1.dataset
 };
 const el2Props = {
 tagName: el2.tagName,
 className: el2.className,
 innerText: el2.innerText,
 dataset: el2.dataset
 };
 return JSON.stringify(el1Props) === JSON.stringify(el2Props);
 }
 const block1 = document.getElementById("block1");
 const block2 = document.getElementById("block2");
 const block3 = document.getElementById("block3");
 const output = document.getElementById("output");
 let comparisons = [];
 // block1とblock2を比較
 if (compareElementsByJSON(block1, block2)) {
 comparisons.push("○ Block 1とBlock 2は同一です");
 } else {
 comparisons.push("× Block 1とBlock 2は異なります");
 }
 // block1とblock3を比較
 if (compareElementsByJSON(block1, block3)) {
 comparisons.push("○ Block 1とBlock 3は同一です");
 } else {
 comparisons.push("× Block 1とBlock 3は異なります");
 }
 output.innerHTML = "<h4>JSON比較の結果：</h4>" + comparisons.join("<br>");
 </script>
</body>
</html>
実行すると、薄いグレー背景の3つのdiv要素が表示され、その下に以下の比較結果が出力されます。
JSON比較の結果：
○ Block 1とBlock 2は同一です
× Block 1とBlock 3は異なります

2つの手法の比較

それぞれの方法には得意・不得意があります。用途に応じて最適な手法を選びましょう。

観点手動比較JSON比較
制御性比較するプロパティを完全に制御できる定義済みの全プロパティが比較対象になる
パフォーマンスプロパティ数が少ない場合に高速多数のプロパティを扱う場合に効率的
柔軟性高度にカスタマイズ可能カスタマイズ性はやや低め
コードの複雑さ基本的な比較ならシンプルに書ける複雑な比較でもコードがすっきりする

まとめ

どちらの手法も、JavaScriptでHTML要素を比較するうえで有効なアプローチです。特定のプロパティだけを厳密にチェックしたい場合は手動比較を、複数の属性をまとめて効率よく処理したい場合はJSON.stringifyを使った比較を選ぶとよいでしょう。状況に応じて使い分けることで、より保守しやすく信頼性の高いコードを実現できます。

JavaScriptでHTML要素を比較する2つの方法｜手動比較とJSON比較を徹底解説

  1. CSSでソーシャルメディアログインフォームを作成する方法【サンプルコード付き】

    CSSとFont Awesomeのアイコンフォントを組み合わせれば、TwitterやFacebookなどのソーシャルメディアログインボタンを備えた、レスポンシブ対応のログインフォームを簡単に作成できます。本記事では、そのままコピーして使える完全なサンプルコードを交えながら、実装手順をわかりやすく解説します。サンプルコード以下は、CSSを使ってソーシャルメディアログインフォームを作成するコード例です。通常のメールアドレス・パスワードによるログインに加えて、「パスワードを保存する」チェックボックス、「パスワードをお忘れですか？」リンク、そしてTwitter・Facebookでのログインボタンも配置

  2. CSS offset-path（モーションパス）を使って要素を円形パス上に移動させる方法

    CSSでは、offset-pathプロパティを使用することで、要素にモーションパス（移動経路）を定義できます。このプロパティを活用すると、要素を指定したパスに沿ってアニメーションさせることが可能です。構文CSS offset-pathプロパティの基本的な構文は以下のとおりです。Selector { offset-path: /*値*/ }offset-pathとoffset-distanceの組み合わせoffset-pathは単独では機能せず、通常offset-distanceプロパティと組み合わせて使用します。offset-distanceは、パスの始点からどの位置まで進んだかをパー