Cursos Empresas Blog Live Conf Eventos Precios

0:005:12

Atributos y propiedades

Curso de Manipulación del DOM

Clase 9 / 29

Ver clases

Atributos y propiedades

Curso de Manipulación del DOM

Clase 9 de 29

Clase 9 / 29

Atributos y propiedades

Curso de Manipulación del DOM

Clase 9 / 29

Ver clases

Comentarios

Carlos Eduardo Gomez García#2170952

Básicamente un atributo es el estado inicial en nuestro HTML, es HTML solo podemos escribir atributos porque es el estado inicial con el que se renderizan y una propiedad es la variable que podemos cambiar a lo largo de la ejecución del programa mediante JavaScript, es decir, podemos acceder a dichos atributos y cambiarlo, haciendo que sean propiedades, aquí un poco más de información sobre ello. . Lo genial de JavaScript es que podemos cambiarlas de forma dinámica. Recordemos que JavaScript son en su mayoría objetos, por lo que los nodos HTML dentro de JavaScript son representados como objetos. Teniendo eso en cuenta, podemos acceder a cualquier atributo de dichos nodos desde HTML y cambiar sis propiedades, por ejemplo:

// Al seleccionar el nodo HTML, JavaScript lo convierte en un objeto!
const input = document.querySelector("input")

// Y of course, podemos modificarlo como cualquier otro objeto de JavaScript:
input.placeholder = "Escribe algo"
input.value = 2
input.type = "number"

Fernando Quinteros Gutierrez#2173522

⚖️ Atributos y propiedades

Ideas/conceptos claves

Los atributos de HTML son palabras especiales utilizadas dentro de la etiqueta de apertura, para controlar el comportamiento del elemento. Los atributos de HTML son un modificador de un tipo de elemento de HTML

Propiedad del DOM sera inicializada por los atributos del HTML para posteriormente modificarlas

Recursos

What is the difference between properties and attributes in HTML? - GeeksforGeeks

Apuntes

El 80% del tiempo que estemos manipulando el DOM, lo que haremos sera cambiando dinámicamente con JS las propiedades de un elemento
Podemos acceder y modificar las propiedades mediante las propiedades del elemento deseado

// 👀 Lectura
console.log(inputName.value) // "Fer"
// 📝 Modificación
inputName.value = "Fernando"

Atributo 🆚 Propiedad

Atributo
- Definidas por el HTML
- Constantes
- Solo se usan para iniciar el HTML y las propiedades del DOM
Propiedad
- Son lo que irán cambiando en JS
- Definidas por el DOM
- Valor de una propiedad es variable

RESUMEN: Las propiedades de los elementos serán aquellas que mayormente se modificarán. La diferencia entre un atributo y una propiedad es que el atributo para iniciar el HTML y DOM, son constantes mientras que las propiedades vienen del DOM y se pueden ir cambiando

Omar García Betanzos#2171486

El 80% del tiempo que estemos manipulando el DOM, realmente lo que nosotros estamos haciendo, es cambiar de forma dinámica con JavaScript las propiedades de un elemento para adecuarlo a nuestras necesidades.

William Fernando Cañas Salas#2370684

Diferencia entre atributos y propiedades Fue un poco confuso en la clase, pero creo que puedo aclararlo en 4 puntos:

Los atributos nacen cuando creamos un elemento HTML en el código (estado inicial).
Este elemento será representado en el DOM como un nodo y por ende su representación será un objeto. Como sabemos, todo objeto puede tener propiedades y los nodos efectivamente las tendrán (y bastantes!).
Una de esas propiedades se llama "attributes" y contiene los atributos que habíamos indicado en el HTML.
El objeto aparte de la propiedad attributes tendrá más propiedades, algunas de ellas de nombre idéntico o similar a los atributos (id es exactamente igual, pero por ejemplo el atributo "class" se encuentra como propiedad del objeto bajo el nombre "className").
Aparte de la cercanía entre los nombres, algunos valores de estos attributes serán iguales a sus propiedades recíprocas (por ejemplo, nodo_x.id === nodo_x.attributes.id), pero no siempre es así (por ejemplo, un input.attribute.value !== input.value, el primero es el valor con el que inicializamos el input, pero el segundo cambiará según el usuario interactúe con él).

Andrés D Amelio#2240690

Atributos

En nuestro documento le podemos asignar atributos a cada elemento del DOM, ¿Pero que son los atributos? son valores adicionales que agregamos a las etiquetas para configurar o ajustar su comportamiento de muchas formas, con el fin de cumplir con los criterios que requieren los usuarios.

Con javascript podemos acceder a esos atributos definidos en el HTML, veamos un ejemplo de como podemos hacer esto, supongamos que tenemos un input que recibe el nombre completo de una persona

// Nuestro input
<input class="form-control" 
       id="persona-nombre" 
       placeholder="Nombre completo" />

// Obtenemos el input
const input = document.querySelector("#persona-nombre");

// Obtenemos los atributos
input.className // salida: "form-control"
input.id // salida: "persona-nombre"
input.placeholder // salida: "Nombre completo"

Como vimos podemos acceder a cada atributo como lo hacemos cuando queremos obtener una propiedad en un objeto de javascript, con esto podemos verificar que valor esta tomando cada atributo. Si en el input escribimos texto desde el navegador, podemos acceder a ese valor a traves de input.value.

Javascript cuenta ademas con otras metodos que permiten manipular los atributos de los nodos, estos son element.setAttribute(), element.getAttribute() y element.removeAttribute(). Veamos como funciona cada uno

element.setAttribute()

Este método establece el valor de un atributo en el elemento indicado, recibe dos argumentos, el primero de ellos un string donde se indica el nombre del atributo, y el segundo el valor que tomará dicho atributo. Es importante mencionar que si el atributo ya existe en el elemento, el valor será actualizado. supongamos que al input del ejemplo anterior queremos agregarle el atributo name, lo hacemos de la siguiente manera
```
input.setAttribute("name", "fullName");

// Ahora el input quedará de la siguiente manera

<input class="form-control" 
       id="persona-nombre" 
       placeholder="Nombre completo" 
			 name="fullName" />
```
element.getAttribute()

Este método retorna el valor del atributo especificado en el elemento. Si el atributo al que se hace referencia no esta definido en el elemento, el valor que retornará dicho método es null. Supongamos que queremos obtener el valor del atributo name agregado en el ejemplo anterior.
```
input.getAttribute("name"); // Salida: "fullName"
```
element.removeAttribute()

Este método elimina el atributo del elemento que lo invoca, con esto podemos quitar atributos que ya no necesitemos, supongamos que queremos eliminar el atributo del input de los ejemplos anteriores, lo hacemos de la siguiente forma

sebastian gomez#2556876

Yo tomo este concepto como : Atributos: Constantes ya establecidas en el DOM Propiedades: Variables que puedo cambiar pero no se veran reflejados en el DOM

Marianna Guedez#2832836

ATRIBUTOS HTML algunos métodos para utilizar en un elemento HTML y añadir, modificar o eliminar sus atributos

Anfernee Valera#2701864

En el minuto 3:41 el profesor repite **atributos **pero en realidad creo que quería decir propiedades.

Jose Funez#2701574

Cada uno de estos elementos en el DOM es accesible desde JavaScript mediante un objeto. Los atributos de las etiquetas son accesibles como propiedades de estos objetos. . https://www.jasoft.org/Blog/post/la-relacion-entre-atributos-html-y-propiedades-javascript

Carlos Hernández#3731028

$0.value sobre cualquier password de cualquier input y te muestra su constraseña :o

// Al seleccionar el nodo HTML, JavaScript lo convierte en un objeto!
const input = document.querySelector("input")

// Y of course, podemos modificarlo como cualquier otro objeto de JavaScript:
input.placeholder = "Escribe algo"
input.value = 2
input.type = "number"

// Nuestro input
<input class="form-control" 
       id="persona-nombre" 
       placeholder="Nombre completo" />

// Obtenemos el input
const input = document.querySelector("#persona-nombre");

// Obtenemos los atributos
input.className // salida: "form-control"
input.id // salida: "persona-nombre"
input.placeholder // salida: "Nombre completo"

input.setAttribute("name", "fullName");

// Ahora el input quedará de la siguiente manera

<input class="form-control" 
       id="persona-nombre" 
       placeholder="Nombre completo" 
			 name="fullName" />

Comentarios

Carlos Eduardo Gomez García#2170952

// Al seleccionar el nodo HTML, JavaScript lo convierte en un objeto!
const input = document.querySelector("input")

// Y of course, podemos modificarlo como cualquier otro objeto de JavaScript:
input.placeholder = "Escribe algo"
input.value = 2
input.type = "number"

Fernando Quinteros Gutierrez#2173522

⚖️ Atributos y propiedades

Ideas/conceptos claves

Propiedad del DOM sera inicializada por los atributos del HTML para posteriormente modificarlas

Recursos

What is the difference between properties and attributes in HTML? - GeeksforGeeks

Apuntes

El 80% del tiempo que estemos manipulando el DOM, lo que haremos sera cambiando dinámicamente con JS las propiedades de un elemento
Podemos acceder y modificar las propiedades mediante las propiedades del elemento deseado

// 👀 Lectura
console.log(inputName.value) // "Fer"
// 📝 Modificación
inputName.value = "Fernando"

Atributo 🆚 Propiedad

Atributo
- Definidas por el HTML
- Constantes
- Solo se usan para iniciar el HTML y las propiedades del DOM
Propiedad
- Son lo que irán cambiando en JS
- Definidas por el DOM
- Valor de una propiedad es variable

Omar García Betanzos#2171486

William Fernando Cañas Salas#2370684

Diferencia entre atributos y propiedades Fue un poco confuso en la clase, pero creo que puedo aclararlo en 4 puntos:

Los atributos nacen cuando creamos un elemento HTML en el código (estado inicial).
Este elemento será representado en el DOM como un nodo y por ende su representación será un objeto. Como sabemos, todo objeto puede tener propiedades y los nodos efectivamente las tendrán (y bastantes!).
Una de esas propiedades se llama "attributes" y contiene los atributos que habíamos indicado en el HTML.
El objeto aparte de la propiedad attributes tendrá más propiedades, algunas de ellas de nombre idéntico o similar a los atributos (id es exactamente igual, pero por ejemplo el atributo "class" se encuentra como propiedad del objeto bajo el nombre "className").
Aparte de la cercanía entre los nombres, algunos valores de estos attributes serán iguales a sus propiedades recíprocas (por ejemplo, nodo_x.id === nodo_x.attributes.id), pero no siempre es así (por ejemplo, un input.attribute.value !== input.value, el primero es el valor con el que inicializamos el input, pero el segundo cambiará según el usuario interactúe con él).

Andrés D Amelio#2240690

Atributos

Con javascript podemos acceder a esos atributos definidos en el HTML, veamos un ejemplo de como podemos hacer esto, supongamos que tenemos un input que recibe el nombre completo de una persona

// Nuestro input
<input class="form-control" 
       id="persona-nombre" 
       placeholder="Nombre completo" />

// Obtenemos el input
const input = document.querySelector("#persona-nombre");

// Obtenemos los atributos
input.className // salida: "form-control"
input.id // salida: "persona-nombre"
input.placeholder // salida: "Nombre completo"

element.setAttribute()

Este método establece el valor de un atributo en el elemento indicado, recibe dos argumentos, el primero de ellos un string donde se indica el nombre del atributo, y el segundo el valor que tomará dicho atributo. Es importante mencionar que si el atributo ya existe en el elemento, el valor será actualizado. supongamos que al input del ejemplo anterior queremos agregarle el atributo name, lo hacemos de la siguiente manera
```
input.setAttribute("name", "fullName");

// Ahora el input quedará de la siguiente manera

<input class="form-control" 
       id="persona-nombre" 
       placeholder="Nombre completo" 
			 name="fullName" />
```
element.getAttribute()

Este método retorna el valor del atributo especificado en el elemento. Si el atributo al que se hace referencia no esta definido en el elemento, el valor que retornará dicho método es null. Supongamos que queremos obtener el valor del atributo name agregado en el ejemplo anterior.
```
input.getAttribute("name"); // Salida: "fullName"
```
element.removeAttribute()

Este método elimina el atributo del elemento que lo invoca, con esto podemos quitar atributos que ya no necesitemos, supongamos que queremos eliminar el atributo del input de los ejemplos anteriores, lo hacemos de la siguiente forma

sebastian gomez#2556876

Yo tomo este concepto como : Atributos: Constantes ya establecidas en el DOM Propiedades: Variables que puedo cambiar pero no se veran reflejados en el DOM

Marianna Guedez#2832836

ATRIBUTOS HTML algunos métodos para utilizar en un elemento HTML y añadir, modificar o eliminar sus atributos

Anfernee Valera#2701864

En el minuto 3:41 el profesor repite **atributos **pero en realidad creo que quería decir propiedades.

Jose Funez#2701574

Carlos Hernández#3731028

$0.value sobre cualquier password de cualquier input y te muestra su constraseña :o

// Al seleccionar el nodo HTML, JavaScript lo convierte en un objeto!
const input = document.querySelector("input")

// Y of course, podemos modificarlo como cualquier otro objeto de JavaScript:
input.placeholder = "Escribe algo"
input.value = 2
input.type = "number"

// Nuestro input
<input class="form-control" 
       id="persona-nombre" 
       placeholder="Nombre completo" />

// Obtenemos el input
const input = document.querySelector("#persona-nombre");

// Obtenemos los atributos
input.className // salida: "form-control"
input.id // salida: "persona-nombre"
input.placeholder // salida: "Nombre completo"

input.setAttribute("name", "fullName");

// Ahora el input quedará de la siguiente manera

<input class="form-control" 
       id="persona-nombre" 
       placeholder="Nombre completo" 
			 name="fullName" />

Comentarios (41)41 comentarios

Carlos Eduardo Gomez García

Hace 6 años

Jimmy Buriticá Londoño

Muy buen aporte, gracias.

Rafael Ángel Girón Girón

Gracias por el aporte. Se me genera una duda entre lo que son objectos y lo que son prototipos en Javascript?

Fernando Quinteros Gutierrez

Eduardo Rodriguez

Gracias por tu resumen

Omar García Betanzos

William Fernando Cañas Salas

Giselle Desiree Boyer Jimenez

Gracias por este contenido, de verdad no quedó muy claro en la clase

Kevin Ariel Merino Peña

Hace 5 años

¡Infinitas gracias!

Andrés D Amelio

element.setAttribute()

Este método establece el valor de un atributo en el elemento indicado, recibe dos argumentos, el primero de ellos un string donde se indica el nombre del atributo, y el segundo el valor que tomará dicho atributo. Es importante mencionar que si el atributo ya existe en el elemento, el valor será actualizado. supongamos que al input del ejemplo anterior queremos agregarle el atributo name, lo hacemos de la siguiente manera
```
input.setAttribute("name", "fullName");

// Ahora el input quedará de la siguiente manera

<input class="form-control" 
       id="persona-nombre" 
       placeholder="Nombre completo" 
			 name="fullName" />
```
element.getAttribute()

Este método retorna el valor del atributo especificado en el elemento. Si el atributo al que se hace referencia no esta definido en el elemento, el valor que retornará dicho método es null. Supongamos que queremos obtener el valor del atributo name agregado en el ejemplo anterior.
```
input.getAttribute("name"); // Salida: "fullName"
```
element.removeAttribute()

Este método elimina el atributo del elemento que lo invoca, con esto podemos quitar atributos que ya no necesitemos, supongamos que queremos eliminar el atributo name del input de los ejemplos anteriores, lo hacemos de la siguiente forma
```
input.removeAttribute("name");

// input final
<input class="form-control" 
       id="persona-nombre" 
       placeholder="Nombre completo" />
```

sebastian gomez

Marianna Guedez

Anfernee Valera

Jose Funez

Carlos Hernández

Hace 4 años

Juan Esteban Galvis

Entonces comienzan como atributos y luego pasan a ser propiedades? Dado que al inicio los declaramos en el HTML pero luego todos los atributos son modificables en la ejecución, entonces todos atributos se convierten en propiedades?

Así es! Inician siendo atributos (atributos HTML, es su nombre) y dentro de JavaScript se vuelven propiedades, porque por la naturaleza de JavaScript, cualquier atributo que esté dentro de un objeto es una propiedad modificable.

Es decir, cuando tú escribes HTML le estás diciendo: "Ok, tú vas a tener esto y esto y eso", pero en HTML no lo puedes modificar en tiempo de ejecución, en JavaScript si:D

Sebastian Gonzalez

Así es, podría decirse también que los atributos son las primeras propiedades que va a tomar el navegador, después las demás propiedades las deja en su valor por defecto

matias bravo

Atributos vs Propiedades

Atributo: Estado inicial en nuestro HTML, con el que se renderizan el dom

Propiedad: Es la variable que podemos cambiar a lo largo de la ejecución del programa mediante JavaScript,

Basicamente podemos acceder a dichos atributos y cambiarlos, haciendo que sean propiedades.

Cesidio Antonio Di Benedetto Carri

La diferencia entre propiedades y atributos

ATRIBUTOS

Son definidos por el HTML (Ej: type, class, id, type…)
El valor del atributo es constante
Se utiliza para inicializar las propiedades del DOM

PROPIEDADES

Son definidos por el DOM (Ej: className, getElementById, getAttribute…)
El valor de la propiedad es variable
No finaliza al inicializarse el DOM

José Alberto Ramírez Quiroz

Cual es la diferencia entre Atributos y propiedades

Un atributo es la forma en que inicializamos lo que queremos hacer por ejemplo asignar una clase a un div

<div class='box'></div>

Aquí el atributo es class y la propiedad es 'box' esto pude cambiar durante el transcurso del programa, una forma facil de recordarlo sería: Un atribito es estatico y las propiedades son dinamicas puesto que hay muchas en base al atributo que estemos usando

Mauricio J Carrillo

Hola José! . Creo que estás confundiendo los conceptos. Según lo que yo he entendido con el ejemplo que propones: En el div, "class" es el atributo y "box" es el valor de ese atributo. . Si quisieras cambiar el valor de class = "box", por otro, debes utilizar la propiedad "className".

div.className = "nuevo_nombre".

Ahora en el DOM el valor de class = "nuevo_nombre"

<div class='nuevo_nombre'></div>

Saludos! Si estoy equivocado por favor corregirme.

Germán de Jesús Hernández García

En resumen:

Atributos: es lo que está escrito en HTML. Propiedades: es lo que se crea en los objetos DOM a partir de los atributos estándar de HTML. Los atributos estándar son aquellos que ya están definidas por HTML como id, class, src, type, value, etc. Si alguno de los elementos HTML contiene estos atributos, podrán crearse estas propiedades en el objeto DOM. Sin embargo, es importante tener en cuenta que un atributo estándar para un elemento puede ser desconocido para otro. Por ejemplo, cualquier etiqueta puede recibir un id o una class. Pero no podemos asignar a una etiqueta h1 el atributo value o src. Si lo hacemos, no habrá una propiedad DOM para él. Pero eso tampoco lo hace inaccesible, existen métodos para llegar ellos como getAttribute.

Miguel Angel Reyes Moreno

Los atributos y propiedades son los que realmente le dan vida a los elementos que se encuentran en el DOM. El 80% del tiempo que estemos manipulando el DOM, realmente lo que nosotros estamos haciendo, es cambiar de forma dinámica con JavaScript las propiedades de un elemento para adecuarlo a nuestras necesidades.

PREGUNTA DE ENTREVISTA: ¿CUÁL ES LA DIFERENCIA ENTRE UN ATRIBUTO Y UNA PROPIEDAD?: Los atributos son usados únicamente al inicio del HTML. Las propiedades pueden cambiar en cualquier momento, pero los atributos son usados únicamente al principio para inicializar el HTML. En el DOM vemos los atributos y en la página web veremos las propiedades.

Sebastian Heredia

Atributos: Son los que están al inicio como Input, class, id, etc. Propiedades: Son las cosas vivientes y cambiantes que hay dentro del DOM

ATRIBUTOs: son todo lo que le agregamos como tal al codigo html, los input son elementos que nos permiten visualizar varias propiedades facilmente

<input type="text" placeholder="Escribe Aqui" class="first-input" id="jobTitle" required style="color: red">

Estos son solo algunos de los atributos que podemos encontrar en html y podemos modificarlos facilmente y solo se usan cuando se crea inicializa el HTML.

PROPIEDADES: Las propiedades cambias mas facilmente y puede ir cambiando en toda su vida "dentro de la pagina claro", algunas de ellas son: (parentElement, firstElementChild, value, textContent, etc) obviamente no todos los elementos van a traer inicializadas estas propiedades, ejemplo si el elemento no tiene hijos o mas nodos dentro de el la propiedad firstElement vendria con null. Si quieres ver algunos de ellos abre la consola de chrome y pega lo siguiente

if(window) {
debugger;
console.log(window);
}else {
debugger;
console.log(document);
}

Debe de activarse el debugger que basicamente te permite analizar linea a linea tu codigo (util para corregir bugs), si pones tu mouse en el window del if o en el document del else podras ver que se muestra en pantalla algunas de las propiedades

Fernando Garcia

Que pasa con el objeto OPTION de un SELECT porque no se puede modificar el estilo fácilmente?

Dario Paladines

De lo que yo entendí los atributos son aquellos que vienen por defecto en HTML, mientras que las propiedades las podemos ir cambiando conforme lo necesitemos, asi por ejemplo

<img src= " " alt =" " class= " " width = " ">

En ese ejemplo, según lo que yo entendí los atributos serían "src" y "alt" que son aquellos que vienen por defecto, mientras que las propiedades sería el "width" y "class", estoy entendiendo bien? o acaso estoy confundido. Claro podemos modificar esos atributos y convertirlos en propiedades, manipulando el DOM pero inicialmente fueron atributos no?

Usuario anónimo

User

Si yo tambien lo entendi asi, aunque con JS se pueden agregar atributos y modificar sus propiedades, creo que lo entendi bien ja

Atributos y propiedades

Atributos y propiedades

Atributos y propiedades

Progreso del curso

DOM y Web API

Operaciones básicas

Workshop 1: Fetch

Eventos

Workshop 2: Lazy loading

Workshop 3

Librerías relacionadas

Conclusiones

Atributos y propiedades

Atributos y propiedades

Comentarios

⚖️ Atributos y propiedades

Ideas/conceptos claves

Recursos

Apuntes

Atributo 🆚 Propiedad

Atributos

Comentarios

⚖️ Atributos y propiedades

Ideas/conceptos claves

Recursos

Apuntes

Atributo 🆚 Propiedad

Atributos