Atributos y propiedades
Contenido del curso
Atributos y propiedades
Contenido del curso
Carlos Eduardo Gomez García
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
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
⚖️ 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
// 👀 Lectura console.log(inputName.value) // "Fer" // 📝 Modificación inputName.value = "Fernando"
Atributo 🆚 Propiedad
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
Gracias por tu resumen
Omar García Betanzos
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
Diferencia entre atributos y propiedades Fue un poco confuso en la clase, pero creo que puedo aclararlo en 4 puntos:
Giselle Desiree Boyer Jimenez
Gracias por este contenido, de verdad no quedó muy claro en la clase
Kevin Ariel Merino Peña
¡Infinitas gracias!
Andrés D Amelio
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
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
ATRIBUTOS HTML algunos métodos para utilizar en un elemento HTML y añadir, modificar o eliminar sus atributos
Anfernee Valera
En el minuto 3:41 el profesor repite **atributos **pero en realidad creo que quería decir propiedades.
Jose Funez
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
$0.value sobre cualquier password de cualquier input y te muestra su constraseña :o
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?
Carlos Eduardo Gomez García
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
PROPIEDADES
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
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
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
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
UserSi yo tambien lo entendi asi, aunque con JS se pueden agregar atributos y modificar sus propiedades, creo que lo entendi bien ja
