No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Atributos y propiedades

8/28
Recursos

Aportes 37

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

<h4>Ideas/conceptos claves</h4>

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

<h4>Recursos</h4>

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

<h4>Apuntes</h4>
  • 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"
<h4>Atributo 馃啔 Propiedad</h4>
  • 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 鈥渁ttributes鈥 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 鈥渃lass鈥 se encuentra como propiedad del objeto bajo el nombre 鈥渃lassName鈥).
  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

<h4>Atributos y propiedades</h4>

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 鈥渄entro 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=鈥渢ext鈥 value=鈥淓jemplo鈥 >
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