HTML DOM isEqualNode()メソッドとは？使い方をわかりやすく解説
HTML DOMのisEqualNode()メソッドは、指定した2つのノードが等しいかどうかを判定し、その結果をブール値（true / false）で返すメソッドです。ノード同士の比較を行いたい場面で活用できます。
構文
isEqualNode()メソッドの基本的な書き方は以下の通りです。
firstNode.isEqualNode(secondNode)
注意：「firstNode」と「secondNode」が等しいとみなされるのは、両者が同じノードタイプを持ち、同じ属性と属性値を備えている場合のみです。さらに、子ノード（childNodes）が存在する場合は、それらもすべて同一である必要があります。1つでも異なる要素があれば、falseが返されます。
サンプルコード
ここでは、2つの記事コンテンツが同一かどうかをチェックする「盗作チェッカー」風の例を使って、isEqualNode()メソッドの実際の動作を見ていきましょう。ボタンをクリックすると、2つのクラス名「content」を持つ要素を取得し、isEqualNode()で比較して結果を表示します。
<!DOCTYPE html>
<html>
<head>
<title>isEqualNode()</title>
<style>
body{
width: 90%;
margin: 0 auto;
}
button{
border-radius:10px;
display:block;
margin:0 auto;
}
#authorJohn, #authorMaya{
border:1px solid black;
border-radius:10px;
}
#showContent{
text-align:center;
}
</style>
</head>
<body>
<div id="authorJohn">
<h2>
Lorem ipsum dolor
</h2>
<h5>By - John</h5>
<p class="content">
sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</div>
</p>
<div>
<div id="authorMaya">
<h2>
Excepteur sint occaecat
</h2>
<h5>By - Maya</h5>
<p class="content">
sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</div>
</p>
<button onclick="checkPlagiarism()">Check Plagiarism</button>
<div id="showContent"></div>
<script>
function checkPlagiarism(){
var articleOne = document.getElementsByClassName("content")[0];
var articleTwo = document.getElementsByClassName("content")[1];
var divDisplay = document.getElementById("showContent");
if(articleOne.isEqualNode(articleTwo))
divDisplay.textContent = 'Content is copied!'
else
divDisplay.textContent = 'Content is not copied!'
}
</script>
</body>
</html>
実行結果
このコードをブラウザで実行すると、以下のような画面が表示されます。
「Check Plagiarism」ボタンをクリックする前：
「Check Plagiarism」ボタンをクリックした後：
このように、isEqualNode()メソッドを使えば、2つのノードの内容が完全に一致しているかどうかを簡単に判定できます。テンプレートの重複チェックやDOM構造の比較など、さまざまなシーンで役立つ便利なメソッドです。
-
HTML DOMのhasAttributes()メソッドとは？構文・使い方・サンプルコードを解説
HTML DOMのhasAttributes()メソッドは、ある要素が属性（attribute）を1つでも持っているかどうかを判定するためのメソッドです。要素が属性を保持している場合はtrueを返し、1つも属性を持っていない場合はfalseを返します。また、このメソッドを要素ノード以外のノードに対して呼び出した場合、戻り値は常にfalseになるという特徴があります。 構文 hasAttributes()メソッドの基本構文は以下のとおりです。 node.hasAttributes() 引数は不要で、対象となるノードに対して直接呼び出すだけで、真偽値（Boolean）が返されます。 使用例 ここで
-
HTML DOMのfocus()メソッドとは？基本構文と使い方を実例付きで解説
HTML DOMのfocus()メソッドは、指定したHTML要素にフォーカスを設定するために使用されるメソッドです。ただし、すべてのHTML要素にフォーカスを適用できるわけではありません。たとえば、<p>タグのようにフォーカスを受け付けない要素も存在します。また、要素からフォーカスを解除したい場合は、blur()メソッドを使用します。 focus()メソッドの主な活用シーン ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する モーダルウィンドウを開いたときに、特定のボタンや