Javascript: setAttribute() v.s. element.attribute = valor para establecer el atributo "nombre"

Así que estoy aprendiendo a manipular el DOM y me di cuenta de una cosa interesante:Javascript: setAttribute() v.s. element.attribute = valor para establecer el atributo "nombre"

Digamos que quiero establecer el atributo name de un elemento mediante el uso de la". " notación de puntos:

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

Sin embargo si uso el método document.setAttribute(), que funciona bien:

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

No sé por qué el método de notación de puntos no funciona en el primer caso.

¿Por qué sucede esto?

Fuente

2011-12-08 dkugappi

Generalmente, trate de evitar el uso de 'getElementsByName' – zzzzBov

¿Por qué se debe evitar el uso de getElementsByName? –

Los atributos SON accesibles usando notación de puntos si así es como desea acceder a ellos. Si desea acceder a los atributos mediante la notación de puntos, debe consultar obj.attributes.attributeName para recuperar el atributo y obj.attributes.attributeName.value para manipular su valor. Es largo sin aliento cuando se compara con setAttribute o getAttribute. y no se recomienda como una solución, pero independientemente de eso, una respuesta completa a su pregunta "¿Por qué la notación de puntos no funciona en el primer caso?" - tiene que incluir "sí. Usted solo estaba buscando en el lugar equivocado los atributos y sus valores ". – Radiotrib

Mi conjetura (porque no especificaste el tipo de elemento) es que el elemento normalmente no tiene un atributo name, por lo que establecer la propiedad DOM así no funcionará.

Por ejemplo, establecer la propiedad name en un elemento input funcionará. Establecerlo en un div no lo hará.

Funcionará, sin embargo, con setAttribute().

jsFiddle.

Fuente

2011-12-08 05:20:24 alex

Sir cuando establezco un atributo de elemento html como "indefinido", no funciona, y continúa tomando sus valores anteriores. ¿Puedes decirme por qué es así? –

cuando usa, element.name, está accediendo a la propiedad/creando una propiedad llamada "nombre" y estableciendo su valor.

pero,

durante el uso, element.setAttribute ('nombre', 'somename'), que está configurando en realidad el 'nombre' atributo.

IE8 y siguientes trata la propiedad y el atributo como iguales, el error se ha corregido en IE9 y superior.
Safari, FireFox, Chrome tratan la propiedad y el atributo de forma diferente.

Sin embargo, siempre puede crear una nueva propiedad de su elección si así lo desea.

Fuente

2013-03-22 12:20:27 Nilesh

respuesta parcial ... limitada y no explica el razonamiento detrás del problema – Radiotrib

Extender las respuestas proporcionadas por algunos de los otros ...

El atributo 'nombre' sólo se considera válida DOM durante unos objetos específicos. De acuerdo con https://developer.mozilla.org/en-US/docs/DOM/element.name esos objetos son:

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

Para estos objetos se puede establecer, obtener y cambiar el atributo de nombre utilizando object.name PERO PARA cualquier otro objeto DOM el 'nombre' atributo es un atributo personalizado y debe crearse con SetAttribute() o agregándolo a la declaración HTML. Una vez creado, puede acceder a él usando setAttribute() y getAttribute() o puede consultar su valor directamente usando object.attributes.name.value eche un vistazo a http://jsfiddle.net/radiotrib/yat72/1/ para ver un ejemplo. Por cierto - el cuadro de alerta en la carga es intencional - comprobar el código para ver qué ...

Fuente

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>

Fuente

2013-09-30 01:54:10 OBV

(El intento de explicar parte de la post anterior mejor, por separado, puesto que ya se entró en calificación -ve, y la creencia en esa publicación será menor. Ayude a mejorar esto aún más.)

*** El property

Cuando se utiliza, element.name, tiene acceso a un property llamado "nombre" existente o establecer su valor.

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

*** El attribute

pero, durante el uso, element.setAttribute('name','someName'), que está configurando la realidad attribute llamado 'nombre'. Este atributo puede ser una propiedad existente demasiado

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

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

Fuente

2015-06-05 11:58:42

cuando se utiliza, element.name, se accede a la propiedad/crear una propiedad denominada "nombre" y fijando su valor.

Fuente

2018-01-28 19:04:55

Javascript: setAttribute() v.s. element.attribute = valor para establecer el atributo "nombre"

Respuesta

Cuestiones relacionadas