Atributos y propiedades

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"

⚖️ Atributos y propiedades

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

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

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

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.

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

1. Los atributos nacen cuando creamos un elemento HTML en el código (estado inicial).
2. 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!).
3. Una de esas propiedades se llama “attributes” y contiene los atributos que habíamos indicado en el HTML.
4. 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”).
5. 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).

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

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

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

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

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

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

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.

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

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

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.

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

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.

Diferencia entre atributos HTML y propiedades DOM:
"Los atributos están definidos por HTML. Las propiedades las define el DOM. El valor de un atributo es constante. El valor de una propiedad es variable".

fuente: es.acervolima. com

Una forma facil que encontre para recordarlo y diferenciar entre atributos y propiedades es:

• Los atributos: es aquello que atribuimos a nuestros elementos en el HTML.
• Las propiedades: Podran ir modificandose a lo largo de su vida.

Entendí lo siguiente, un atributo es un comportamiento
en elementos HTML, el cual puede o no llevar propiedades (durante el ciclo de vida del elemento las propiedades pueden ser cambiadas).

Cuando el navegador carga la página, lee el HTML y genera objetos DOM a partir de él. Para los nodos de elementos, la mayoría de los atributos HTML estándar se convierten automáticamente en propiedades de los objetos DOM.
Acá más información:

Conseguí esto, y me parece que deja claras las diferencias entre atributos y propiedades

Implementen la velocidad 2.5x y 3x.

Les comparto mis notas de la clase, he intentado hacerlas lo mas completas que he podido referenciando la página que menciona el profesor.

Atributos y propiedades

• Atributos

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. … En sintaxis HTML, un atributo se añade a una etiqueta de inicio de HTML.

// se pueden inspeccionar los atributos de cualquier etiqueta usando
$0.atribute
// seleccionando previamente en el inspector la etiqueta deseada

Consulta la lista de atributos posibles para las etiquetas de HTML aquí:

Referencia de Atributos HTML - HTML: Lenguaje de etiquetas de hipertexto | MDN

• Propiedades

Las propiedades son la ventana que se tiene para modificar absolutamente todo lo que tiene un elemento dentro del DOM.

• Diferencias entre atributos y propiedades:
  Mientras un atributo es aquel que es usado en un principio en la declaración de una etiqueta HTML (es decir, es un valor estático), la propiedad es todo valor el cual se puede consultar y/o cambiar dentro de la misma etiqueta (es decir, es un valor dinámico), siempre referidas a un atributo posible de la misma etiqueta la cual se este tomando referencia.
  Ejemplo:

Por lo General muy bien el profe Jonathan Alvarez, pero en la explicacion de Atributos vs Propiedades es muy Redundante y tiende a la confuncion

La diferencia entre un atributo y una propiedad
.
Es que los atributos son utilzados unicamente al principio para inicializar el HTML. Ejemplo: Type, Class, Id, Required, Value, Placeholder
.
Las propiedades cambian segun se lo modifique. Por ejemplo:

$0.value = 'valor'
"valor"

Vemos el cambio reflejado en el navegador como tal pero no lo veremos reflejado como parte del DOM, porque el DOM esta representado por atributos
.
Cambia de acuerdo al lenguaje de programacion donde nos encontremos.

Son los que realmente le dan vida a los elementos que se encuentran en el DOM. El 80% del tiempo que manipulemos el DOM es que realmente estamos cambiando de forma dinamica las propiedades para adecuarlo a nuestras necesidades.

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

No podemos abarcar todos los metodos porque depende mucho de cada elemento.

La diferencia entre un atributo y una propiedad es que los atributos son utilizados al inicio de HTML son utilizados para inicializar el HTML. La propiedades las podemos ver como las cosas vivientes o cambiantes que hay dentro del DOM, cuando la pagina esta viva en el navegador

Entonces lo que realmente estamos haciendo la mayoría del tiempo es cambiar dinámicamente las propiedades de los elementos con Javascript, interesante.

Atributos -> Son valores con los que podemos configurar el funcionamienta de las etiquetas.

Propiedades -> Son todos los valores que puede tener un Objeto. Y cada Nodo (etiqueta html) es un Objeto. A las propiedades podemos desde JS

Algunas de estas propiedades se pueden inicializar desde el HTML pasandolos como atributos.
Ej:
Atributo HTML: <div class="container"></div>
Propiedad (Object) = div.className, esto nos daría= 'container'

Así inicializamos la propiedad className con el atributo class

La mayoría de propiedades tienen el mismo nombre que el atributo, pero algunas no como este caso, la propiedad de class es className

Si me equivoco en algo me dicen, por favor, me costo mucho entenderlo y escribí esto para ayudarme a entenderlo y ayudar a alguien más a hacerlo.

Atributo vs Propiedad
<input type=“text” value=“Ejemplo” >
type y value son atributos, lo que le sigue después del = son sus propiedades
"text" es la propiedad del atributo type
"Ejemplo" es la propiedad del atributo value

La clave diferencial es si ese valor se utiliza al inicio (atributos) o no (cosas vivientes y cambiantes dentro del DOM en tiempo real).

Los atributos son usado únicamente al inicio del HTML, mientras que las propiedades pueden cambiar en cualquier momento.

En HTML, los atributos son puestos al inicio y dentro de HTML solo como para inicializar. Las propiedades son esos valores que pueden ser cambiantes dentro de la pagina y pueden modificarse con JS para manipularlos y cambiarlos pero no siempre se ven en el DOM.
Bueno al menos yo lo entendí así 😅

Genial

Diferencia entre atributo y propiedad

👌🤷‍♂️👌

Diferencia entre un atributo y una propiedad