Atributos y propiedades

Clase 9 de 29 • Curso de Manipulación del DOM

Carlos Eduardo Gomez García

teacher•

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"

Jimmy Buriticá Londoño

student•

Muy buen aporte, gracias.

Rafael Ángel Girón Girón

student•

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

Fernando Quinteros Gutierrez

student•

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

Eduardo Rodriguez

student•

Gracias por tu resumen

Omar García Betanzos

student•

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

student•

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

Giselle Desiree Boyer Jimenez

student•

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

Kevin Ariel Merino Peña

student•

¡Infinitas gracias!

Andrés D Amelio

student•

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

student•

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

student•

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

Anfernee Valera

student•

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

Jose Funez

student•

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

student•

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

Juan Esteban Galvis

student•

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?

Carlos Eduardo Gomez García

teacher•

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

student•

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

student•

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

student•

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

student•

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

student•

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.

Miguel Angel Reyes Moreno

student•

Atributos y propiedades

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

student•

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

Sebastian Gonzalez

student•

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

student•

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

Dario Paladines

student•

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

Amderson Hernandez

student•

Si lo comparo a los objetos seria el atributo como la key y las propiedades como el value. Así lo entiendo...

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

Atributos y propiedades

DOM y Web API

Y entonces nació internet...

Accede a la versión más actualizada de este contenido

¿Qué es el DOM?

Web APIs modernas

Operaciones básicas

Leer nodos

NodeLists vs Array

Crear y agregar

Otras formas de agregar

Atributos y propiedades

Eliminar nodos

Operaciones en lote

Workshop 1: Fetch

Presentación del proyecto

Descargando información y creando nodos

Enriqueciendo la información

Usando la API de internacionalización del browser

Comparte el resultado

Eventos

Reaccionar a lo que sucede en el DOM

Event propagation

Event delegation

Workshop 2: Lazy loading

Presentación del proyecto

Nuestro propio plugin Lazy Loading

Creando las imagenes con JavaScript

Intersection Observer

Aplicando Lazy loading

Comparte el resultado

Workshop 3

Proyectos propuestos

Librerías relacionadas

¿Y jQuery?

¿Y JSX?

Conclusiones

Conclusiones