Etiqueta: interfaz

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)

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