web-dev-qa-db-ja.com

Javascript：setAttribute（）対element.attribute = "name"属性を設定する値

だから私はDOMを操作することを学んでいて、私は1つの興味深いことに気づきました：

「。」を使用して要素のname属性を設定するとします。ドット表記：

_element.name = "someName";
console.log(document.getElementsByName("someName")[0]); // returns "undefined"??
_

ただし、document.setAttribute()メソッドを使用すると、正常に機能します。

_element.setAttribute("name", "someName");
console.log(document.getElementsByName("someName")[0]); // returns the element like it should.
_

最初のケースでドット表記法が機能しない理由がわかりません。

なぜこれが起こるのですか？

javascriptsetattributegetelementsbyname
15
dkugappi

（要素タイプを指定しなかったため）通常、要素にはname属性がないため、DOMプロパティをそのように設定しても機能しないと思います。

たとえば、name要素にinputプロパティを設定すると機能します。 divに設定することはできません。

ただし、setAttribute()では機能します。

jsFiddle 。

17
alex

他の一部から提供された回答を拡張するには...

属性 'name'は、いくつかの特定のオブジェクトに対してのみ有効なDOMと見なされます。 https://developer.mozilla.org/en-US/docs/DOM/element.name によると、これらのオブジェクトは次のとおりです。

_ <a>, <applet>, <button>, <form>, <frame>, <iframe>, <img>, <input>, 
 <map>, <meta>, <object>, <param>, <select>, and <textarea>
_

これらのオブジェクトについて、_object.name_を使用してname属性を設定、取得、および変更できますが、他のDOMオブジェクトの場合、属性 'name'はカスタム属性であり、SetAttribute()を使用して、または追加して作成する必要がありますHTML宣言に。作成されたら、setAttribute()およびgetAttribute()を使用してアクセスするか、_object.attributes.name.value_を使用してその値を直接参照できます http：/ /jsfiddle.net/radiotrib/yat72/1/ の例。ところで-ロード時の警告ボックスは意図的なものです-コードをチェックして理由を確認してください...

6
Radiotrib

（上記の投稿の一部については、すでに-veの評価が行われているため、より適切に個別に説明しようとしています。その投稿への信念は少なくなります。これが改善されない場合は、さらに改善してください。）

*** property

Element.nameを使用すると、「name」という名前の既存のpropertyにアクセスするか、その値を設定します。

_Example 1:
var div1 = document.getElementById("div1"); 
div1.textContent = "2";
_

*** attribute

しかし、element.setAttribute('name','someName')を使用している間、実際には 'name'という名前のattributeを設定しています。この属性は、既存のプロパティにすることができますORカスタムプロパティ：

_Example 2:
var h1 = document.getElementById("H1"); 
h1.setAttribute("class", "democlass");

Example 3:
var d = document.getElementById("d1"); 
d.setAttribute("name1", "value1");
_
3
Manohar Reddy Poreddy

element.nameを使用すると、プロパティにアクセスし、「name」という名前のプロパティを作成して、その値を設定します。

1
Billy senders
<head>
<script>
function test($count) {
document.getElementById("test1").setAttribute("name","file-upload_" + $count);
}
</script>
</head>
<body>

<p>some content</p>
<input id="test1" type="file" name="file-upload" id="file-upload" />
<p>some other content</p>
<script>test(1);</script>
</body>
0
OBV

element.nameを使用すると、プロパティにアクセスし、「name」という名前のプロパティを作成して、その値を設定します。

だが、

element.setAttribute（ 'name'、 'someName'）を使用している間、実際には属性 'name'を設定しています。

IE8以前では、プロパティと属性は同じように扱われ、バグはIE9以降で修正されています。
Safari、FireFox、Chromeプロパティと属性の扱いが異なります。

ただし、必要に応じて、選択した新しいプロパティをいつでも作成できます。

0
Nilesh