8.- La Interfaz Node – Curso Básico de #Javascript #8

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):

MetodoDescripció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:

AtributoDescripción
attributesContiene los atributos de este Nodo, por ejemplo, tratándose de un input, podriamos utilizar el atributo value o id
baseURIDevuelve el URI de base absoluta de un nodo
childNodesDevuelve un tipo NodeList que contiene todos los Nodos hijos del Nodo con el que se utiliza el atributo
firstChildRegresa el primer Nodo hijo del Nodo con el que se utiliza el atributo
lastChildRegresa el ultimo Nodo hijo del Nodo con el que se utiliza el atributo
localNameDevuelve la parte local del nombre de un nodo
namespaceURIRegresa el namespace (espacio de nombre) URI del Nodo
nextSiblingDevuelve el Nodo inmediato del Nodo al que se utilizo el atributo
nodeNameDevuelve el nombre de un Nodo, dependiendo de su tipo
nodeTypeRegresa el tipo del Nodo
nodeValueEstablece o devuelve el valor de un nodo, dependiendo de su tipo
ownerDocumentDevuelve el elemento raíz (Document Object) para un nodo
parentNodeRegresa el padre del Nodo
prefixEstablece o devuelve el prefijo de espacio de nombres de un nodo
previousSiblingDevuelve el Nodo anterior del Nodo del que utilizamos este atributo
textContentEstablece 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)

Ir Capítulo Anterior (7.- El objeto document)

Autor: Héctor de León

Desarrollador de software, lector compulsivo.