Javascript: setAttribute() v.s. element.attribute = valore da impostare attributo "nome"

Così sto imparando a manipolare il DOM e ho notato una cosa interessante:Javascript: setAttribute() v.s. element.attribute = valore da impostare attributo "nome"

Diciamo che voglio impostare l'attributo name di un elemento utilizzando la". " dot notation:

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

Tuttavia, se io uso il metodo document.setAttribute(), funziona benissimo:

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

Non certo perché il metodo di notazione non funziona nel primo caso.

Perché succede?

fonte

2011-12-08 dkugappi

Generalmente prova a evitare l'uso di 'getElementsByName' – zzzzBov

Perché dovresti evitare di usare getElementsByName? –

Gli attributi sono accessibili usando la notazione a punti se è così che desideri accedervi. Se si desidera accedere agli attributi utilizzando la notazione dot, è necessario fare riferimento a obj.attributes.attributeName per recuperare l'attributo e obj.attributes.attributeName.value per manipolarne il valore. È prolisso se confrontato con setAttribute o getAttribute. e non raccomandato come soluzione, ma a prescindere da ciò, una risposta completa alla tua domanda "Perché la notazione dei punti non funziona nel primo caso" - deve includere "lo fa. Stavi solo cercando nel posto sbagliato per gli attributi e i loro valori. " – Radiotrib

La mia ipotesi (perché non è stato specificato il tipo di elemento) è che l'elemento normalmente non ha un attributo name, quindi l'impostazione della proprietà DOM come quella non funzionerà.

Ad esempio, l'impostazione della proprietà name su un elemento input funzionerà. Impostandolo su un div no.

Funzionerà, tuttavia, con setAttribute().

jsFiddle.

fonte

2011-12-08 05:20:24 alex

Signore, quando ho impostato un attributo di elemento html come "non definito", non funziona e continua a prendere i suoi valori precedenti. Puoi dirmi perché è così? –

quando si utilizza, element.name, si accede alla proprietà/creando una proprietà denominata "nome" e impostandone il valore.

ma,

durante l'utilizzo, element.setAttribute ('name', 'SomeName'), in realtà si sta impostando il 'nome' attributo.

IE8 e successivi tratta la proprietà e attribuisce lo stesso valore, il bug è stato corretto in IE9 e versioni successive.
Safari, FireFox, Chrome trattano proprietà e attributi in modo diverso.

Tuttavia, è sempre possibile creare una nuova proprietà di propria scelta se si desidera farlo.

fonte

2013-03-22 12:20:27 Nilesh

risposta parziale ... limitata e non spiega il ragionamento dietro il problema – Radiotrib

per estendere le risposte fornite da alcuni degli altri ...

L'attributo 'name' è considerato solo DOM valido per alcuni oggetti specifici. Secondo https://developer.mozilla.org/en-US/docs/DOM/element.name quegli oggetti sono:

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

Per questi oggetti è possibile impostare, ottiene e modificare l'attributo nome utilizzando object.name MA PER QUALSIASI ALTRO DOM oggetto l'attributo 'name' è un attributo personalizzato e devono essere creati utilizzando SetAttribute() o aggiungendolo alla dichiarazione HTML. Una volta creato, puoi accedervi utilizzando setAttribute() e getAttribute() oppure puoi fare riferimento al suo valore direttamente utilizzando object.attributes.name.value per dare un'occhiata a http://jsfiddle.net/radiotrib/yat72/1/ per un esempio. BTW - la finestra di avviso sul carico è intenzionale - controllare il codice per capire perché ...

fonte

2013-03-24 16:50:14 Radiotrib

<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>

fonte

2013-09-30 01:54:10 OBV

(tentativo di spiegare una parte del post di cui sopra una migliore, a parte, dal momento che è già andato in voto ve, e la fiducia in quel post sarà inferiore. Aiutaci a migliorare ulteriormente.)

*** Il property

Quando si utilizza, element.name, si accede a un property chiamato "nome" esistente o impostare il suo valore.

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

*** Il attribute

ma, durante l'utilizzo, element.setAttribute('name','someName'), in realtà si sta impostando il attribute chiamato 'nome'. Questo attributo può essere una proprietà esistente troppo

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

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

fonte

2015-06-05 11:58:42

quando si utilizza, element.name, si accede alla proprietà/creazione di una proprietà denominata "nome" e impostando il suo valore.

fonte

2018-01-28 19:04:55

Javascript: setAttribute() v.s. element.attribute = valore da impostare attributo "nome"

risposta

Problemi correlati