HTML DOM ElementoObjeto
Nodo HTML DOM
En HTML DOM (Document Object Model), todo esnodo:
- El documento en sí mismo es un objeto de documento
- Todos los elementos HTML son nodos de elemento
- Todos los atributos HTML son nodos de atributo
- El texto insertado en un elemento HTML es un nodo de texto
- Los comentarios son nodos de comentario
Objeto de elemento
En HTML DOM,el objeto de elementorepresenta un elemento HTML.
Del objeto de elementonodos hijospueden ser: nodos de elemento, nodos de texto, nodos de comentario.
Objeto NodeListRepresenta una lista de nodos, similar a una colección de nodos hijos de un elemento HTML.
Los elementos pueden tener atributos. Los atributos pertenecen a los nodos de atributo (ver la siguiente sección).
Soporte del navegador
Todos los navegadores principales admiten el objeto de elemento y el objeto NodeList.
Propiedades y métodos
Las propiedades y métodos anteriores se aplican a todos los elementos HTML:
| Propiedad / Método | Descripción |
|---|---|
| element.accessKey | Establece o devuelve el atributo accesskey de un elemento |
| element.addEventListener() | Añade un controlador de eventos al elemento especificado |
| element.appendChild() | Añade un nuevo elemento hijo al elemento |
| element.attributes | Devuelve una matriz de atributos de un elemento |
| element.childNodes | Devuelve una matriz de nodos hijos de un elemento |
| element.children | Devuelve una colección de elementos hijos de un elemento |
| element.classList | Devuelve el nombre de clase del elemento, como un objeto DOMTokenList. |
| element.className | Establece o devuelve el atributo class de un elemento |
| element.clientTop | Representa el ancho del borde superior de un elemento, en píxeles. |
| element.clientLeft | Representa el ancho del borde izquierdo de un elemento, en píxeles. |
| element.clientHeight | Devuelve la altura visible del contenido en la página (la altura incluye el padding, no incluye el border, el margin ni la barra de desplazamiento). |
| element.clientWidth | Devuelve el ancho visible del contenido en la página (el ancho incluye el padding, no incluye el border, el margin ni la barra de desplazamiento). |
| element.cloneNode() | Clona un elemento |
| element.compareDocumentPosition() | Compara la posición en el documento de dos elementos. |
| element.contentEditable | Establece o devuelve si el contenido de un elemento es editable |
| element.dir | Establece o devuelve la dirección del texto en un elemento |
| element.firstElementChild | Devuelve el primer elemento hijo de un elemento |
| element.firstChild | Devuelve el primer nodo hijo de un elemento |
| element.focus() | Establece el foco en un documento o elemento |
| element.getAttribute() | Devuelve el valor del atributo de un elemento especificado |
| element.getAttributeNode() | Devuelve el nodo de atributo especificado |
| element.getElementsByTagName() | Devuelve una colección de todos los elementos hijos con el nombre de etiqueta especificado. |
| element. getElementsByClassName() | Devuelve una colección de todos los elementos con la clase especificada en el documento, como un objeto NodeList. |
| element.getFeature() | Devuelve el objeto que ejecuta las APIs de la característica especificada. |
| element.getUserData() | Devuelve un objeto con pares clave-valor asociados a un elemento. |
| element.hasAttribute() | Devuelve true si el atributo especificado existe en el elemento; de lo contrario, devuelve false. |
| element.hasAttributes() | Devuelve true si el elemento tiene algún atributo; de lo contrario, devuelve false. |
| element.hasChildNodes() | Devuelve si un elemento tiene algún elemento hijo |
| element.hasFocus() | Devuelve un valor booleano que indica si el documento o el elemento tiene el foco. |
| element.id | Establece o devuelve el id de un elemento. |
| element.innerHTML | Establece o devuelve el contenido de un elemento. |
| element.insertBefore() | Inserta un nuevo elemento hijo antes de un elemento hijo existente |
| element.isContentEditable | Devuelve true si el contenido del elemento es editable; de lo contrario, devuelve false. |
| element.isDefaultNamespace() | Devuelve true si se ha especificado namespaceURI; de lo contrario, devuelve false. |
| element.isEqualNode() | Comprueba si dos elementos son iguales |
| element.isSameNode() | Comprueba si dos elementos tienen todos los mismos nodos. |
| element.isSupported() | Devuelve true si la característica especificada es compatible con el elemento. |
| element.lang | Establece o devuelve el idioma de un elemento. |
| element.lastChild | Devuelve el último nodo hijo |
| element.lastElementChild | Devuelve el último elemento hijo del elemento especificado |
| element.matches() | El método matches() devuelve true si el elemento coincide con el selector CSS especificado; de lo contrario, devuelve false. |
| element.namespaceURI | Devuelve el URI del espacio de nombres. |
| element.nextSibling | Devuelve el nodo inmediatamente siguiente a este elemento |
| element.nextElementSibling | Devuelve el siguiente elemento hermano del elemento especificado (el siguiente nodo de elemento en el mismo nivel del árbol de nodos). |
| element.nodeName | Devuelve el nombre de etiqueta del elemento (en mayúsculas) |
| element.nodeType | Devuelve el tipo de nodo del elemento |
| element.nodeValue | Devuelve el valor del nodo del elemento |
| element.normalize() | Hace que esto se convierta en una forma "normal", en la que solo la estructura (como elementos, comentarios, instrucciones de procesamiento, secciones CDATA y referencias a entidades) separa los nodos de Texto, es decir, todos los nodos de texto bajo un elemento (incluidos los atributos) no tienen nodos de texto adyacentes ni nodos de texto vacíos. |
| element.offsetHeight | Devuelve la altura de cualquier elemento, incluidos el border y el padding, pero sin incluir el margin. |
| element.offsetWidth | Devuelve el ancho de un elemento, incluidos el border y el padding, pero sin incluir el margin. |
| element.offsetLeft | Devuelve el contenedor de desplazamiento de la posición de desplazamiento horizontal relativa del elemento actual. |
| element.offsetParent | Devuelve el contenedor de desplazamiento del elemento. |
| element.offsetTop | Devuelve el contenedor de desplazamiento de la posición de desplazamiento vertical relativa del elemento actual. |
| element.ownerDocument | Devuelve el elemento raíz del elemento (objeto de documento). |
| element.parentNode | Devuelve el nodo padre del elemento |
| element.previousSibling | Devuelve el elemento inmediatamente anterior a un elemento |
| element.previousElementSibling | Devuelve el elemento hermano anterior del elemento especificado (el nodo de elemento anterior en el mismo nivel del árbol de nodos). |
| element.querySelector() | Devuelve el primer elemento hijo que coincide con el selector CSS especificado |
| document.querySelectorAll() | Devuelve una lista de nodos de todos los elementos hijos que coinciden con el selector CSS especificado |
| element.removeAttribute() | Elimina el atributo especificado del elemento |
| element.removeAttributeNode() | Elimina el nodo de atributo especificado y devuelve el nodo eliminado. |
| element.removeChild() | Elimina un elemento hijo |
| element.removeEventListener() | Elimina el controlador de eventos añadido por el método addEventListener() |
| element.replaceChild() | Reemplaza un elemento hijo |
| element.scrollHeight | Devuelve la altura total del elemento (incluidas las áreas ocultas con barras de desplazamiento) |
| element.scrollLeft | Devuelve la distancia entre el borde izquierdo del elemento real y el borde izquierdo de la vista actual. |
| element.scrollTop | Devuelve la distancia entre el borde superior del elemento real y el borde superior de la vista actual. |
| element.scrollWidth | Devuelve el ancho total del elemento (incluidas las áreas ocultas con barras de desplazamiento) |
| element.setAttribute() | Establece o cambia el atributo especificado con el valor especificado. |
| element.setAttributeNode() | Establece o cambia el nodo de atributo especificado. |
| element.setIdAttribute() | |
| element.setIdAttributeNode() | |
| element.setUserData() | Asocia un objeto con una clave especificada en el elemento. |
| element.style | Establece o devuelve el atributo de estilo de un elemento |
| element.tabIndex | Establece o devuelve el orden de tabulación de un elemento. |
| element.tagName | Devuelve el nombre de etiqueta de un elemento como una cadena (en mayúsculas) |
| element.textContent | Establece o devuelve un nodo y su contenido de texto |
| element.title | Establece o devuelve el atributo title de un elemento |
| element.toString() | Convierte un elemento en una cadena |
| nodelist.item() | Devuelve el índice de un elemento basado en el árbol del documento |
| nodelist.length | Devuelve el número de nodos en una lista de nodos. |