HTML DOMのhasAttributes()メソッドとは？構文・使い方・サンプルコードを解説
HTML DOMのhasAttributes()メソッドは、ある要素が属性（attribute）を1つでも持っているかどうかを判定するためのメソッドです。要素が属性を保持している場合はtrueを返し、1つも属性を持っていない場合はfalseを返します。また、このメソッドを要素ノード以外のノードに対して呼び出した場合、戻り値は常にfalseになるという特徴があります。
構文
hasAttributes()メソッドの基本構文は以下のとおりです。
node.hasAttributes()
引数は不要で、対象となるノードに対して直接呼び出すだけで、真偽値（Boolean）が返されます。
使用例
ここで、hasAttributes()メソッドの具体的な使用例を見てみましょう。
<!DOCTYPE html>
<html>
<body>
<h1>hasAttributes() example</h1>
<p>This paragraph has no attributes</p>
<button onclick="containsAttr()">CHECK</button>
<p id="Sample">The paragraph above hasAttribute value : </p>
<script>
function containsAttr() {
var p = document.getElementsByTagName("P")[0];
document.getElementById("Sample").innerHTML+=p.hasAttributes();
}
</script>
</body>
</html>
出力結果
上記のコードを実行すると、次のような画面が表示されます。
続いて、CHECKボタンをクリックすると、以下のように判定結果が表示されます。
コードの解説
このサンプルコードでは、以下のような処理を行っています。
1. 属性を持たない段落の作成
まず、classやidなどの属性を一切持たない段落（<p>要素）を用意しています。
<p>This paragraph has no attributes</p>
2. チェック用ボタンの設置
次に、ユーザーがクリックするとcontainsAttr()関数を実行するCHECKボタンを配置しています。
<button onclick="containsAttr()">CHECK</button>
3. 判定処理の実行
containsAttr()関数では、getElementsByTagName()メソッドを使ってドキュメント内の<p>要素のコレクションを取得し、インデックス[0]を指定することで最初の<p>要素を取り出して変数pに代入しています。その後、変数pに対してhasAttributes()メソッドを呼び出します。この例の最初の<p>要素には属性が存在しないため、戻り値としてfalseが返されます。最後に、innerHTMLプロパティを使って、id属性が「Sample」である段落にその結果を追記して画面に表示しています。
function containsAttr() {
var p = document.getElementsByTagName("P")[0];
document.getElementById("Sample").innerHTML+=p.hasAttributes();
}
このようにhasAttributes()メソッドを活用すれば、JavaScriptから簡単に要素の属性の有無を確認でき、条件分岐による動的なDOM操作にも役立ちます。
-
HTML DOM getBoundingClientRect()メソッドの使い方を徹底解説
getBoundingClientRect()メソッドとはHTML DOMのgetBoundingClientRect()メソッドは、要素のサイズや位置をビューポート（表示領域）を基準に取得するためのメソッドです。戻り値はDOMRect型のオブジェクトで、以下の8つのプロパティを持っています。lefttoprightbottomxywidthheightなお、このバウンディングボックス（外接矩形）の位置は、ページのスクロール位置が変わるとそれに応じて変化する点に注意してください。構文getBoundingClientRect()メソッドの構文は以下の通りです。element.getBoundi
-
HTML DOMのfocus()メソッドとは？基本構文と使い方を実例付きで解説
HTML DOMのfocus()メソッドは、指定したHTML要素にフォーカスを設定するために使用されるメソッドです。ただし、すべてのHTML要素にフォーカスを適用できるわけではありません。たとえば、<p>タグのようにフォーカスを受け付けない要素も存在します。また、要素からフォーカスを解除したい場合は、blur()メソッドを使用します。 focus()メソッドの主な活用シーン ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する モーダルウィンドウを開いたときに、特定のボタンや