Como obtener los métodos

• getElementsByTagName()

getElementsByTagName(TagName) , Devuelve una lista de todas las etiquetas o etiquetas en una página XHTML.

var paragrafos = document.getElementsByTagName("p");

El nombre que aparece antes de la función indica la ubicación donde se inicia el árbol (documento en nuestro caso, es decir, la raíz del documento).

El valor de retorno será una rana.

Así que acceda al primer párrafo:

var primerParagrafo = paragrafos[0];

Si queremos todos los parrafos:

for(var i=0; i<paragrafos.length; i++) {

var paragrafo = paragrafos[i];

}

Ejemplo: Obtener todos los enlaces al primer párrafo de XHTML.

var paragrafos = document.getElementsByTagName("p");var primerParagrafo = paragrafos[0];

var enlaces = primerParagrafo.getElementsByTagName("a");

• getElementsByName()

Al igual que el anterior, la función getElementsByName () buscará los nombres de los atributos con el atributo name.

<p name="prueba">...</p><p name="especial">...</p><p>...</p>

var paragrafoEspecial = document.getElementsByName("especial");

• getElementById()

Esta función es más comúnmente utilizada y sólo se accede a un nodo. (el atributo id debe ser único para todo el documento).

<div id="cabecera"> <a href="/" id="logo">...</a></div>

var cabecera = document.getElementById("cabecera");

Creación de nodos y eliminación

Crear elementos XHTML simples

Es por eso que la creación de un nuevo elemento de página XHTML requiere cuatro pasos diferentes:

Nodo de element creado.

Nodo de text creado.

Nodo de text

Reconocer como hijo del nodo del element

Agregar elemento a la página del nodo, como siempre para ser reconocido como el hijo de otro nodo en el documento.

Ejemplo: Para añadir un párrafo al final de un documento XHTML, tendremos que ejecutar el código JavaScript de fondo:

var paragrafo = document.createElement("p"); var contenido = document.createTextNode("Kaixo Mundua!"); paragrafo.appendChild(contenido);

document.body.appendChild(paragrafo);

Así que la creación de nuevos nodos es un proceso engorroso. Están involucradas tres funciones:

• createElement(etiqueta)
• createTextNode(contenido)
• nodoPadre.appendChild(nodoHijo)

Eliminar nodos

Afortunadamente, la eliminación de un nodo es mucho más fácil. En nuestro caso, sólo necesitamos usar la función removeChild ():

var paragrafo = document.getElementById("primero"); paragrafo.parentNode.removeChild(paragrafo); <p id="primero">...</p>

Acceso directo a los atributos

Una vez que se accede a un nodo, el siguiente paso será cambiar los atributos o propiedades de ese nodo.

Por ejemplo: Considere el siguiente ejemplo:

<a id="nuestro" href="http://www...com">Nuestro enlace</a>

var enlace = document.getElementById("nuestro"); alert(enlace.href); ¡

Las propiedades CSS también son muy fáciles de acceder. Para acceder a una propiedad CSS de un nodo, utilice el atributo style.

Ejemplo 1: Obtenemos la propiedad de margen de imagen:

<img id="imagen01" style="margin:0; border:0;" src="logo.png" />

var imagen = document.getElementById("imagen01"); alert(imagen.style.margin);

Ejemplo 2: Si el nombre de la propiedad está compuesto, ver cómo actuamos.

<p id="paragrafo" style="font-weight: bold;">...</p>

var paragrafo = document.getElementById("paragrafo"); alert(paragrafo.style.fontWeight); // se vera en negrita

Otros ejemplos

Excepcion: class = className

<p id="paragrafo=01" class="normal">...</p>

var paragrafo = document.getElementById("paragrafo01"); alert(paragrafo.class);

alert(paragrafo.className);