HTMLCollection.namedItem() - name属性からHTML要素を取得する
namedItem()は、HTMLCollectionのメソッドです。name属性を指定してHTML要素を取得します。このメソッドは、ドット記法やブラケット記法に置き換えられます。
概要
- 名前
- namedItem
- 所属
- HTMLCollection
- IDL
getter Element? namedItem(DOMString name);
- 仕様書
- https://dom.spec.whatwg.org/#dom-htmlcollection-nameditem
説明
引数(name)に、取得したいname属性を指定します。存在しないname属性を指定した場合、nullを返します。
チュートリアル
メソッドを利用してHTML要素を取得する例です。
<input name="syncer1"> SYNCER1
<input name="syncer2"> SYNCER2
<input name="syncer3"> SYNCER3
// HTMLCollectionを取得
var elements = document.getElementsByTagName( "input" ) ;
elements.namedItem( "syncer1" ) ; // <input name="syncer1">
elements.namedItem( "syncer2" ) ; // <input name="syncer2">
elements.namedItem( "syncer3" ) ; // <input name="syncer3">
このメソッドは、下記の通り、ドット記法やブラケット記法で代用できます。特に理由がなければ、こちらを利用しましょう。
// ドット記法
elements.syncer1 ; // <input name="syncer1">
elements.syncer2 ; // <input name="syncer2">
elements.syncer3 ; // <input name="syncer3">
// ブラケット記法
elements.["syncer1"] ) ; // <input name="syncer1">
elements.["syncer2"] ) ; // <input name="syncer2">
elements.["syncer3"] ) ; // <input name="syncer3">
デモ
HTMLCollection.namedItem()のデモです。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<p><input name="syncer1"> SYNCER1</p>
<p><input name="syncer2"> SYNCER2</p>
<p><input name="syncer3"> SYNCER3</p>
<hr>
<div id="result"></div>
<script>
var elements = document.getElementsByTagName( "input" ) ;
var value = elements.namedItem( "syncer2" ) ;
// var value = elements["syncer2"] ;
console.log( value ) ;
document.getElementById( "result" ).appendChild( new Text( value + "\n\n" ) ) ;
document.getElementById( "result" ).appendChild( new Text( value.outerHTML ) ) ;
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● | ● | ● | ● | ● | ● | ● | ● |
関連記事
- NonElementParentNode
- NonElementParentNodeは、要素ではない親ノードが備えるインターフェイスです。具体的には、DocumentとDocumentFragmentです。
- class属性値を取得、変更する
- 要素のclass属性値を取得、変更、確認する方法をまとめています。
- Document.getElementsByName()
- getElementsByName()は、Documentのメソッドです。name属性を指定してノードを取得します。
- Selection.deleteFromDocument()
- deleteFromDocument()は、Selectionのメソッドです。選択範囲のコンテンツを削除します。