web-dev-qa-db-fra.com

Javascript: setAttribute () v.s. element.attribute = valeur pour définir l'attribut "nom"

J'apprends donc à manipuler le DOM et j'ai remarqué une chose intéressante:

Disons que je veux définir l'attribut name d'un élément en utilisant le "." notation par points:

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

Cependant, si j'utilise la méthode document.setAttribute(), cela fonctionne très bien:

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

Je ne sais pas pourquoi la méthode de notation par points ne fonctionne pas dans le premier cas.

Pourquoi cela arrive-t-il?

javascriptsetattributegetelementsbyname
15
dkugappi

Ma supposition (parce que vous n'avez pas spécifié le type d'élément) est que l'élément n'a normalement pas d'attribut name, donc définir la propriété DOM comme ça ne fonctionnera pas.

Par exemple, définir la propriété name sur un élément input fonctionnera. Le définir sur un div ne le sera pas.

Cela fonctionnera cependant avec setAttribute().

jsFiddle .

17
alex

Pour étendre les réponses apportées par certains des autres ...

L'attribut 'nom' n'est considéré comme DOM valide que pour quelques objets spécifiques. Selon https://developer.mozilla.org/en-US/docs/DOM/element.name ces objets sont:

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

Pour ces objets, vous pouvez définir, obtenir et modifier l'attribut de nom à l'aide de object.name MAIS POUR TOUT AUTRE OBJET DOM, l'attribut 'nom' est un attribut personnalisé et doit être créé à l'aide de SetAttribute() ou en ajoutant à la déclaration HTML. Une fois qu'il est créé, vous pouvez y accéder en utilisant setAttribute() et getAttribute() ou vous pouvez vous référer directement à sa valeur en utilisant object.attributes.name.value Jetez un œil à http: //jsfiddle.net/radiotrib/yat72/1/ pour un exemple. BTW - la boîte d'alerte sur la charge est intentionnelle - vérifiez le code pour voir pourquoi ...

6
Radiotrib

(Tenter d'expliquer une partie du message ci-dessus mieux, séparément, car il est déjà entré dans la note -ve, et la croyance en ce poste sera moins. Aidez à améliorer cela sinon mieux.)

*** Le property

Lorsque vous utilisez, element.name, vous accédez à un property existant nommé "nom" ou définissez sa valeur.

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

*** Le attribute

mais, lors de l'utilisation de element.setAttribute('name','someName'), vous définissez en fait le attribute nommé 'nom'. Cet attribut peut être une propriété existante OR une propriété personnalisée que nous voulons:

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

lorsque vous utilisez, element.name, vous accédez à la propriété/créez une propriété nommée "nom" et définissez sa valeur.

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

lorsque vous utilisez, element.name, vous accédez à la propriété/créez une propriété nommée "nom" et définissez sa valeur.

mais,

lors de l'utilisation de element.setAttribute ('name', 'someName'), vous définissez en fait l'attribut 'name'.

IE8 et les versions antérieures traitent la propriété et l'attribut de la même manière, le bogue a été corrigé dans IE9 et versions ultérieures.
Safari, FireFox, Chrome traite la propriété et l'attribut différemment.

Cependant, vous pouvez toujours créer une nouvelle propriété de votre choix si vous le souhaitez.

0
Nilesh