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

HTML DOMオブジェクトのnameプロパティとは？取得・設定方法を解説

HTML DOMのObject nameプロパティは、<object>要素のname属性の値を設定または取得するために使用されます。なお、name属性にはオブジェクトの名前を識別するための値のみが格納され、表示内容などには影響しません。

構文

nameプロパティの値を取得する場合

obj.name

nameプロパティに値を設定する場合

obj.name = "新しい名前"

それでは、DOM Objectのnameプロパティを実装した具体的な例を見ていきましょう。

サンプルコード

次の例では、ボタンをクリックすると<object>要素のname属性の値が「obj」から「obj2」に変更され、その結果が画面に表示されます。

<!DOCTYPE html>
<html>
<body>
<object id="obj1" width="570" height="350" data="https://www.tutorialspoint.com/flex/samples/CSSApplication.swf" name="obj"></object>
<button onclick="display()">Change the object name</button>
<p id="demo"></p>
<script>
   function display() {
      document.getElementById("obj1").name = "obj2";
      document.getElementById("demo").innerHTML = "Name updated to obj2";
   }
</script>
</body>
</html>

実行結果

ページを開くと、最初はname属性に「obj」が設定された状態でオブジェクトが表示されます。

HTML DOMオブジェクトのnameプロパティとは？取得・設定方法を解説

続いて、ボタンをクリックしてオブジェクトの名前を更新してみましょう。

HTML DOMオブジェクトのnameプロパティとは？取得・設定方法を解説

ボタンをクリックすると、JavaScriptのdisplay()関数が実行され、nameプロパティの値が「obj2」に書き換えられ、メッセージが表示されることが確認できます。


  1. HTML DOM Objectのdataプロパティとは？使い方とサンプルコードを解説

    HTML DOM Object dataプロパティとはHTML DOMのObject要素が持つdataプロパティは、<object>要素のdata属性の値に対応する文字列（URL）を取得または設定するためのプロパティです。このプロパティを使うことで、JavaScriptから動的にオブジェクトで埋め込まれたリソースのURLを読み取ったり、変更したりすることができます。構文data属性の値を取得する場合ObjectElement.datadata属性に文字列値（URL）を設定する場合ObjectElement.data = URLStringHTML DOM Object dataプロ

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注