Tutorial JavaScript : Acceder a los elementos de la página WEB (II)

Acceder desde Javascript a elementos HTML

Para acceder a elementos HTML usaremos los siguientes métodos del Objeto Document():

getElementById(): nos permite acceder a elementos HTML a los que hemos asignado un identificador con el atributo HTML id (no deben haber más de uno con el mismo).
getElementsByName(): para acceder a elementos HTML que tienen un atributo HTML name (pueden ser varios, como en la imagen de ejemplo).
getElementsByTagName(): permite acceder a todos los elementos de una determinada etiqueta HTML.

En la siguiente imagen te mostramos un ejemplo:

JavaScript Document

Una vez que sabemos cómo acceder a los elementos HTML podremos usar sus propiedades, métodos y eventos:

En el siguiente ejemplo, desde JavaScript accedemos al elemento 'div1' y con la propiedad innerHTML modificamos el contenido del mismo. Además, cambiamos el texto que se muestra en el botón 'btnEnviar':

document.getElementById("div1").innerHTML = "<p style='color:yellow;'>Introduzca los datos</p>";
document.getElementById("btnEnviar").value = "Enviar los datos";

Podemos usar innerHTML para obtener y asignar el contenido HTML de cualquier etiqueta, incluidas <html> y <body>:

// Inserta código HTML en la página web (elimina lo existente):
document.body.innerHTML = "<p id='parrafo1'>Haz clic en este <a id='enlace' href='https://informaticapc.com/'>enlace</a></p>" +
                          "<p id='parrafo2'><span style='color:red;'>Cursos de informática gratis</span></p>";

// Usando el operador '+=' se añade el siguiente código HTML al existente:
document.body.innerHTML += "<p id='parrafo3' >Curso de JavaScript</p>";
document.body.innerHTML += "<p id='parrafo4' ><input type='text' id='texto1' value='El texto' /></p>";
document.body.innerHTML += "<p id='parrafo5' ><input type='button' id='boton1' value='Esto es un botón' /></p>";

Continuando con el ejemplo anterior, usaremos innerHTML para acceder a los elementos HTML que hemos creado:

alert("Pulsa para modificar la página");

document.getElementById("e").innerHTML = "enlace a informaticapc.com";
document.getElementById("parrafo2").innerHTML = "CURSOS GRATIS";

La propiedad innerHTML no forma parte del estándar W3C (organismo que desarrolla estándares para la Web), pero es soportado por la mayoría de los navegadores web.

En versiones antiguas del navegador web Internet Explorer para usar getElementsByName() se debía usar el id del elemento HTML, en lugar del atributo name.

Asimismo, no era posible acceder elementos HTML usando getElementsByName(), si se insertaban dinámicamente usando appendChild().

Crear elementos de forma dinámica

Con el método createElement() del objeto Document() podemos insertar elementos HTML al final del cuerpo de la página web, o de otro elemento HTML.

En el siguiente ejemplo te mostramos cómo crear un enlace e insertarlo en la página:

var enlace1 = document.createElement("A");

// Atributos o Propiedades:
enlace1.id = "enlace_1";
enlace1.innerHTML = "Cursos de informática gratis";
enlace1.href   = "https://informaticapc.com/";
enlace1.target = "blank";

// Insertar el enlace al final del body:
document.body.appendChild( enlace1 );

En este otro ejemplo creamos dinámicamente un botón, le asignamos algunas propiedades, definimos un evento onclick(), y lo insertamos en un <div> cuyo atributo id es 'div1':

var boton1 = document.createElement("input");

// Atributos o Propiedades:
boton1.id    = "boton_2";
boton1.type  = "button";
boton1.value = "Blog de informática y tecnología";

// Evento:
boton1.onclick = function(){
    window.location.href = "http://www.informaticapc.com/";
}

// Insertar el botón al final de 'div1':
document.getElementById("div1").appendChild( boton1 );

Podemos indicar si el nuevo elemento puede insertarse como padre de otro usando parentNode.insertBefore().

Supongamos que dentro de un <div> tenemos un <span> cuyo atributo id es 'span1': si accedemos a 'span1' como hemos visto antes, e insertamos dinámicamente otro <span>, éste quedaría dentro del primero. En cambio, del siguiente modo se insertaría fuera de él, quedando al final del <div>.

Lo puedes ver en el siguiente ejemplo:

var span2 = document.createElement("span");

// Atributos o Propiedades:
span2.id  = "span_2";
span2.style.backgroundColor = "red";
span2.innerHTML = "Contenido del span 2";

// Insertar 'span2' fuera de 'span1':
document.getElementById("span1").parentNode.insertBefore( span2 );

Vea también: [ Eventos en JavaScript ]

Eliminar elementos del DOM

Para borrar un elemento del DOM (y los que hayan dentro de él) debemos acceder al elemento HTML o nodo padre dentro del que se encuentra, y usar el método removeChild() del Objeto Document() para eliminarlo.

Por ejemplo, para eliminar un <div> cuyo id es 'div1', haríamos lo siguiente:

// Accedemos al elemento que deseamos borrar:
var objDiv = document.getElementById("div1");

// Obtenemos el nodo padre del elemento:
var objNodoSuperior = objDiv.parentNode;

// Borramos el elemento:
objNodoSuperior.removeChild( objDiv );

Dimensiones de un elemento HTML

Con las propiedades offsetHeight y offsetWidth podemos obtener el alto y ancho de un elemento HTML (incluidos bordes y relleno, pero no márgenes).

<html>

    <head>
        <title>Curso de JavaScript</title>
        <script language="JavaScript">

            function cargado()
            {
                alert( "offsetHeight: " + document.getElementById("span1").offsetHeight + "\n" +
                         "offsetWidth: "  + document.getElementById("span1").offsetWidth
                     );
            }

        </script>
    </head>

    <body onload="cargado();">

        <span id="span1" style="background-color:yellow;height:40px;width:100px;">Curso de JavaScript</span>

    </body>

</html>

Las dimensiones obtenidas dependerán del navegador web.

offsetWidth no forma parte del estándar W3C, aunque es soportada por la mayoría de los navegadores web más usados.

Vea también: [ Dimensiones del Documento ] - [ Scroll en una página web ] - [ Posición de la ventana ]

Vea también: [ Posición de un elemento HTML ]

Posición de un elemento HTML

Las propiedades offsetTop y offsetLeft nos permiten obtener la distancia entre los bordes superior e izquierdo de un elemento HTML, con respecto a dichos bordes principales del documento (no del área visible), teniéndose en cuenta el scroll realizado.

En el siguiente ejemplo obtenemos la posición del elemento HTML <span>:

<html>

    <head>
        <title>Curso de JavaScript</title>
        <script language="JavaScript">

            function cargado()
            {
                alert( "offsetTop: "  + document.getElementById("span1").offsetTop + "\n" +
                         "offsetLeft: " + document.getElementById("span1").offsetLeft
                     );
            }

        </script>
    </head>

    <body onload="cargado();">

        <div id="div1" style="background-color:red;
                              width:300px;
                              margin-top:80px;
                              margin-left:100px;
                              padding-top:0px;
                              padding-left:0px;">

            <span id="span1" style="background-color:yellow;
                              height:40px;
                              width:100px;">Curso de JavaScript</span>

        </div>

    </body>

</html>

Posición