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

HTML DOM getNamedItem()メソッド


HTML DOM getNamedItem()メソッドは、NamedNodeMapオブジェクトとして指定された名前の属性ノードを取得するために使用されます。その特定の属性ノードを取得するには、属性プロパティでのみこのメソッドを呼び出す必要があります。これは、属性プロパティが、getNamedItem()メソッドを使用して特定の属性をフィルタリングできるリストを返すためです。

構文

以下は、getNamedItem()メソッドの構文です-

namednodemap.getNamedItem(nodename)

ここで、nodenameは、namedNodeMapに存在するノードの名前を示す文字列型の必須パラメーター値です。

getNamedItem()メソッドの例を見てみましょう-

<!DOCTYPE html>
<html>
<body>
<h1>getNamedItem() example</h1>
USERNAME: <input type="text" name="USR">
<br><br>
<button onclick="attrValue()">GET</button>
<p id="Sample"></p>
<script>
   function attrValue() {
      var usr = document.getElementsByTagName("input")[0];
      var val = usr.attributes.getNamedItem("type").value;
      document.getElementById("Sample").innerHTML = "The type attribute value for the input field is: "+val;
   }
</script>
</body>
</html>

出力

これにより、次の出力が生成されます-

HTML DOM getNamedItem()メソッド

GETボタンをクリックすると-

HTML DOM getNamedItem()メソッド

上記の例では-

最初に、type =” text”およびname =” USR”の入力フィールドを作成しました。

USERNAME: <input type="text" name="USR">

次に、ユーザーがクリックしたときにメソッドattrValue()を実行するボタンGETを作成しました-

<button onclick="attrValue()">GET</button>

attrValue()メソッドは、getElementsByTagName()メソッドを使用して入力要素を取得し、それを変数usrに割り当てます。次に、すべての属性のコレクションをnamedNodeMapオブジェクトとして返すattributesプロパティを使用します。属性プロパティでgetNamedItem()メソッドを呼び出すと、その特定の属性ノードのみが返されます。

getNamedItem()によって返される特定のノードのvalueプロパティを使用して、その属性値を取得し、それを変数valに割り当てます。この値は、innerHTMLプロパティを使用して、IDが「Sample」の段落に表示されます。


  1. HTML DOM hasAttributes()メソッド

    HTML DOM hasAttributes()メソッドは、要素に属性があるかどうかをチェックします。要素に属性が含まれている場合はtrueを返し、含まない場合はfalseを返します。このメソッドが要素ノード以外のノードで呼び出された場合、戻り値は常にfalseになります。 構文 以下は、hasAttribbutes()メソッドの構文です- node.hasAttributes() 例 hasAttributes()メソッドの例を見てみましょう- <!DOCTYPE html> <html> <body> <h1>hasAttributes(

  2. HTML DOM focus()メソッド

    HTML DOM focus()メソッドは、HTML要素にフォーカスを与えるために使用されます。フォーカスをすべてのHTML要素に適用することはできません。例:タグにフォーカスすることはできません。要素からフォーカスを削除するには、blur()メソッドを使用します。 構文 以下は構文です- HTMLElementObject.focus() 例 focus()メソッドの例を見てみましょう- <!DOCTYPE html> <html> <head> <style>    input[type=text]:focus, p: