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

JavaScript での HTML 要素の比較:ステップバイステップ ガイド

JavaScript での HTML 要素の比較は、動的 Web アプリケーションを構築する際の一般的な要件です。 2 つの要素が同じタグ名、クラス、コンテンツ、またはその他のプロパティを持っているかどうかを確認する必要がある場合があります。この記事では、JavaScript を使用して HTML 要素を比較するための 2 つの効果的な方法について説明します。

方法 1:手動で要素を比較する

手動比較により、比較するプロパティを完全に制御できます。このメソッドは、タグ名、クラス名、コンテンツなどの特定の属性を直接チェックします。 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Manual HTML Elements Comparison</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 = [];
 // Compare first and second elements
 if (areElementsSame(firstElement, secondElement)) {
 results.push("? First and Second elements are identical");
 } else {
 results.push("? First and Second elements are different");
 }
 // Compare first and third elements
 if (areElementsSame(firstElement, thirdElement)) {
 results.push("? First and Third elements are identical");
 } else {
 results.push("? First and Third elements are different");
 }
 output.innerHTML = results.join("<br>");
 </script>
</body>
</html>

Three div elements are displayed with gray backgrounds. Below them, comparison results show:
? First and Second elements are identical
? First and Third elements are different

方法 2:JSON ベースの要素の比較

JSON 比較では、要素のプロパティを文字列にシリアル化し、比較を容易にします。このアプローチは、複数の属性を同時に比較する場合に効率的です。 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>JSON-Based HTML Elements Comparison</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 = [];
 // Compare block1 and block2
 if (compareElementsByJSON(block1, block2)) {
 comparisons.push("? Block 1 and Block 2 are identical");
 } else {
 comparisons.push("? Block 1 and Block 2 are different");
 }
 // Compare block1 and block3
 if (compareElementsByJSON(block1, block3)) {
 comparisons.push("? Block 1 and Block 3 are identical");
 } else {
 comparisons.push("? Block 1 and Block 3 are different");
 }
 output.innerHTML = "<h4>JSON Comparison Results:</h4>" + comparisons.join("<br>");
 </script>
</body>
</html>

Three div elements with light gray backgrounds are displayed. Below them, the comparison results show:
JSON Comparison Results:
? Block 1 and Block 2 are identical
? Block 1 and Block 3 are different

方法の比較

アスペクト 手動による比較 JSON の比較 コントロール プロパティを完全に制御 定義されたすべてのプロパティを比較 パフォーマンス 少数のプロパティでは高速 多くのプロパティでは効率的 柔軟性 高度にカスタマイズ可能 カスタマイズ可能性は低い コードの複雑さ 基本的な比較は簡単 複雑な比較はよりクリーン

結論

どちらの方法も、JavaScript で HTML 要素を比較する効果的な方法を提供します。特定のプロパティを正確に制御する必要がある場合は手動比較を使用し、複数の属性を効率的に処理する場合は JSON 比較を使用します。

JavaScript での HTML 要素の比較:ステップバイステップ ガイド


  1. CSSを使用して同じ幅のナビゲーションリンクを持つナビゲーションバーを作成するにはどうすればよいですか？

    以下は、同じ幅のナビゲーションリンクを備えたナビゲーションバーを作成するためのコードです。− 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style&

  2. CSS垂直整列プロパティ

    CSSを作成するときに、ページ上での要素の配置方法を変更したい場合があります。この記事では、CSSプロパティと、要素の垂直方向の配置方法を変更するプロパティ値について説明します。 プロパティの構文は次のとおりです。 vertical-align: property-value; ここで、property-valueには、baseline、length、sub、super、top、text-top、middle、bottom、text-bottom、initial、inheritのいずれかのオプションを含めることができます。 プロパティ値 ベースライン `baseline`プロパティ値は