SYNCERのロゴ
アイキャッチ画像

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>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月8日 (日)
コンテンツを公開しました。