HTML DOM removeNamedItem()メソッドの使い方を徹底解説
HTML DOM の removeNamedItem() メソッドは、HTML ドキュメント内の属性ノードから、パラメータで指定した名前に一致するノードを削除するためのメソッドです。要素から特定の属性（例：style、class など）を動的に取り除きたい場合に活用できます。
構文
removeNamedItem() メソッドの基本的な構文は以下のとおりです。
node.removeNamedItem(属性名);
引数には、削除したい属性の名前を文字列で指定します。該当する属性が存在しない場合は、エラーは発生せず単に何も行われません。
removeNamedItem() メソッドの使用例
それでは、実際に removeNamedItem() メソッドを使って、<p> 要素から style 属性を削除するサンプルコードを見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
height:100%;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:60%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
</style>
</head>
<body>
<h1>DOM removeNamedItem() メソッド デモ</h1>
<p style="color:#db133a;font-size:1.2rem;">こんにちは！これはランダムなテキストを含む p 要素です</p>
<button onclick="remove()" class="btn">removeNamedItem() メソッドで属性を削除</button>
<script>
function remove() {
var p = document.querySelector("p");
p.attributes.removeNamedItem("style");
}
</script>
</body>
</html>
実行結果
上記のコードを実行すると、次のような画面が表示されます。
ここで「removeNamedItem() メソッドで属性を削除」ボタンをクリックすると、JavaScript の remove() 関数が呼び出され、<p> 要素から style 属性が削除されます。
ボタンをクリックした後は、style 属性が取り除かれたため、赤色のテキストスタイルが解除され、通常の表示に戻ります。
ポイントまとめ
- removeNamedItem() は NamedNodeMap（attributes オブジェクト）に対して呼び出すメソッドです。
- 削除したい属性名を文字列で引数に渡します。
- 属性を削除することで、その属性に関連付けられたスタイルや動作も同時に無効化されます。
- 類似メソッドとして、属性を追加・変更する setNamedItem() や、属性を取得する getNamedItem() も併せて覚えておくと便利です。
-
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()メソッドの主な活用シーン ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する モーダルウィンドウを開いたときに、特定のボタンや