La interfaz Node es de la cual todos los Nodos de un documento xml heredan, en este caso cuando utilizamos HTML (XHTML, HTML5) nuestros Nodos son los elementos de la pagina (<a><p><input>), a estos Nodos se le atribuyen ciertas funcionalidades y atributos, los cuales podemos utilizar por medio de javascript, asi que en lo largo de este capitulo cada que hablemos de Nodo estamos hablando de un elemento HTML.
Siendo que estos Nodos heredan de la interfaz Node, podemos aplicar a nuestros elementos de HTML las siguientes funcionalidades (métodos):
| Metodo | Descripción |
|---|---|
| appendChild() | Agrega un nuevo nodo hijo al final de los nodos hijos del Nodo al que ejecutamos el metodo. |
| cloneNode() | Clona el Nodo |
| compareDocumentPosition() | Compara la colocación de dos nodos en la jerarquía del DOM |
| getFeature(feature,version) | Devuelve un objeto DOM que implementa las APIs especializadas de la función y la versión especificada |
| getUserData(key) | Devuelve el objeto asociado a una tecla en un este nodo. El objeto, primero debe haberse establecido en este nodo llamando setUserData con la misma clave |
| hasAttributes() | Devuelve true si el nodo especificado tiene algún atributo, false en caso contrario |
| hasChildNodes() | Devuelve true si el nodo especificado tiene nodos secundarios, false en caso contrario. |
| insertBefore() | Inserta un Nodo hijo antes del Nodo seleccionado |
| isDefaultNamespace(URI) | Devuelve si el namespaceURI especificado es el valor por defecto |
| isEqualNode() | Comprueba si dos Nodos son iguales |
| isSameNode() | Comprueba si dos Nodos son el mismo Nodo |
| isSupported() | Comprueba si la implementación DOM soporta una función específica y que la función es compatible con el nodo especificado |
| lookupNamespaceURI() | Devuelve el URI de espacio de nombres asociado con el prefijo dado |
| lookupPrefix() | Devuelve el prefijo asociado a un espacio de nombres determinado URI |
| normalize() | Pone todos los nodos de texto debajo de un nodo (incluidos los nodos de atributos) en una forma «normal», donde sólo la estructura (por ejemplo, elementos, comentarios, instrucciones de procesamiento, secciones CDATA y referencias a entidades) separa los nodos de texto, es decir, no existen nodos de texto adyacentes ni los nodos de texto vacíos |
| removeChild() | Elimina un Nodo hijo en especifico del Nodo en el que utilizamos este método. |
| replaceChild() | Remplaza un nodo Hijo con un nuevo Nodo hijo. |
| setUserData(key,data,handler) | Asocia un objeto a una tecla en un nodo |
Cabe mencionar que no todos estos métodos se aplican a todos los elementos, ya que hay elementos que no tienen hijos por ejemplo los tipo <input> o <img> por lo cual ejecutar el método removeChild() a uno de estos elementos es paradójico
Ahora que ya vimos el listado de los métodos que pueden realizarse en javascript a los elementos HTML, veamos una lista de los atributos (propiedades) que podemos obtener o asignarles un valor, y son los siguientes:
| Atributo | Descripción |
|---|---|
| attributes | Contiene los atributos de este Nodo, por ejemplo, tratándose de un input, podriamos utilizar el atributo value o id |
| baseURI | Devuelve el URI de base absoluta de un nodo |
| childNodes | Devuelve un tipo NodeList que contiene todos los Nodos hijos del Nodo con el que se utiliza el atributo |
| firstChild | Regresa el primer Nodo hijo del Nodo con el que se utiliza el atributo |
| lastChild | Regresa el ultimo Nodo hijo del Nodo con el que se utiliza el atributo |
| localName | Devuelve la parte local del nombre de un nodo |
| namespaceURI | Regresa el namespace (espacio de nombre) URI del Nodo |
| nextSibling | Devuelve el Nodo inmediato del Nodo al que se utilizo el atributo |
| nodeName | Devuelve el nombre de un Nodo, dependiendo de su tipo |
| nodeType | Regresa el tipo del Nodo |
| nodeValue | Establece o devuelve el valor de un nodo, dependiendo de su tipo |
| ownerDocument | Devuelve el elemento raíz (Document Object) para un nodo |
| parentNode | Regresa el padre del Nodo |
| prefix | Establece o devuelve el prefijo de espacio de nombres de un nodo |
| previousSibling | Devuelve el Nodo anterior del Nodo del que utilizamos este atributo |
| textContent | Establece o devuelve el contenido de texto de un nodo y sus descendientes |
Esta lista de atributos cabe recalcar el del nombre attributes que viene siendo los atributos de los elementos HTML, por ejemplo los atributos de un elemento de tipo <img> pueden ser “src”, “style”, “position”, etc.
Para poder seleccionar un Nodo utilizaremos el objeto que vimos el capitulo anterior, el objeto document, veamos un ejemplo:
Código HTML
<img id="imagen" src="https://hdeleon.net/wp-content/uploads/2014/01/cropped-cropped-logo1.jpg" /> <input type="button" value="cambia tamaño" onclick="cambiaTamano()" />
Código Javascript
function cambiaTamano(){
Nodo= document.getElementById("imagen")
//utilizamos el atributo style que a su vez tiene los atributos CSS y asignamos un nuevo width (ancho)
Nodo.style.width="300px";
}
Como podemos ver en el ejemplo utilizamos el objeto document, y uno de sus métodos, getElementById(), con esto, podemos obtener el Nodo deseado en este caso por medio de su Id, y poder utilizar la lista de funcionalidades y atributos anteriormente mostrada, en el código anterior cambiamos el tamaño de una imagen, y si quieren ver como funciona su ejecución den clic aquí.
En este capitulo unimos la funcionalidad de el objeto document, y los Nodos de una pagina web, y los siguientes dos capítulos haremos algo con lo cual se quitaran de todas las dudas (si es que tienen), y podrán ver el potencial de tener estas herramientas a la mano.
Ir Capítulo Siguiente (9.- Modificación de elementos HTML con Javascript)