HTML DOM Métodos
Los métodos HTML DOM son acciones que podemos ejecutar en los nodos (elementos HTML).
Los atributos HTML DOM son valores que podemos establecer y modificar en los nodos (elementos HTML).
Interfaz de programación
Se puede acceder al HTML DOM mediante JavaScript (y otros lenguajes de programación).
Todos los elementos HTML se definen como objetos, y la interfaz de programación son los métodos y propiedades de los objetos.
Los métodos son acciones que puede ejecutar (como agregar o modificar elementos).
Las propiedades son valores que puede obtener o establecer (como el nombre o el contenido de un nodo).
Método getElementById()
El método getElementById() devuelve el elemento con el ID especificado:
Objetos HTML DOM - Métodos y propiedades
Algunos métodos HTML DOM de uso común:
- getElementById(id) - Obtiene el nodo (elemento) con el id especificado
- appendChild(node) - Inserta un nuevo nodo hijo (elemento)
- removeChild(node) - Elimina un nodo hijo (elemento)
Algunas propiedades HTML DOM de uso común:
- innerHTML - El valor de texto del nodo (elemento)
- parentNode - El nodo padre del nodo (elemento)
- childNodes - Los nodos hijos del nodo (elemento)
- attributes - Los nodos de atributos del nodo (elemento)
Aprenderá más sobre las propiedades en el próximo capítulo de este tutorial.
Objetos de la vida real
Una persona es un objeto.
Los métodos de una persona podrían ser eat(), sleep(), work(), play(), etc.
Todas las personas tienen estos métodos, pero los ejecutan en diferentes momentos.
Las propiedades de una persona incluyen nombre, altura, peso, edad, sexo, etc.
Todas las personas tienen estas propiedades, pero sus valores varían de una persona a otra.
Algunos métodos de objetos DOM
Aquí hay algunos métodos comunes que aprenderá en este tutorial:
| Método | Descripción |
|---|---|
| getElementById() | Devuelve el elemento con el ID especificado. |
| getElementsByTagName() | Devuelve una lista de nodos (colección/array de nodos) que contiene todos los elementos con el nombre de etiqueta especificado. |
| getElementsByClassName() | Devuelve una lista de nodos que contiene todos los elementos con el nombre de clase especificado. |
| appendChild() | Agrega un nuevo nodo hijo al nodo especificado. |
| removeChild() | Elimina un nodo hijo. |
| replaceChild() | Reemplaza un nodo hijo. |
| insertBefore() | Inserta un nuevo nodo hijo antes del nodo hijo especificado. |
| createAttribute() | Crea un nodo de atributo. |
| createElement() | Crea un nodo de elemento. |
| createTextNode() | Crea un nodo de texto. |
| getAttribute() | Devuelve el valor del atributo especificado. |
| setAttribute() | Establece o modifica el atributo especificado al valor especificado. |