DOM

Problemas con el document write

Pese a ser la instrucción más sencilla para reescribir un documento html...

  1. W3C no lo valida si usamos XHTML (no es posible asegurar que el nuevo documento generado usando document.write sea válido).
  2. Puede dar problemas cuando lo usemos después de que la página web haya sido totalmente cargada (como en el próximo ejemplo.)

Copiaremos el código del siguiente ejemplo y lo iremos modificando para implementar todas las posibilidades de acceso a los elementos que nos ofrece el DOM.

Accediendo por el name

Recuperar valor por el name I

<script>
	function saludar(){
		alert(document.formularioName.campoNombre.value);
	}
</script>

<form name="formularioName">
	Escribe tu nombre, por favor:
    <input type="text" name="campoNombre">
    <input type="button" value="Enviar formulario" onclick="saludar()">
</form>
Ver ejemplo

Recuperar valor por el name II

<script>
	function saludar(){
		let nombre = document.formularioName.campoNombre.value;
		alert(nombre);
	}
</script>

<form name="formularioName">
	Escribe tu nombre, por favor:
    <input type="text" name="campoNombre">
    <input type="button" value="Enviar formulario" onclick="saludar()">
</form>
Ver ejemplo resuelto

Recuperar valor por el name III

<script>
	function saludar(){
		let nombre = document.formularioName.campoNombre.value;
		document.formularioName.campoNombre2.value = nombre;
	}
</script>

<form name="formularioName">
	Escribe tu nombre, por favor:
    <input type="text" name="campoNombre">
    <input type="button" value="Enviar formulario" onclick="saludar()">
    <input type="text" name="campoNombre2">
</form>
Ver ejemplo

Recuperar valor por el name IV

<script>
	function saludar(){
		document.formularioName.campoNombre2.value = document.formularioName.campoNombre.value;
	}
</script>

<form name="formularioName">
	Escribe tu nombre, por favor:
    <input type="text" name="campoNombre">
    <input type="button" value="Enviar formulario" onclick="saludar()">
    <input type="text" name="campoNombre2">
</form>
Ver ejemplo resuelto

Accesos HTML5

document.querySelector("ul.first"); // Coge siempre la primera ocurrencia

document.getElementsByClassName('hidden')[0]

Accediendo por la id

Accediendo por la id I

<script>
	function saludar(){
		alert(document.getElementById("campoNombre").value);
	}
</script>

<form>
	Escribe tu nombre, por favor:
    <input type="text" id="campoNombre">
    <input type="button" value="Enviar formulario" onclick="saludar()">
</form>
getElementById

Accediendo por la id II

<script>
	function saludar(){
		let nombre = document.getElementById("campoNombre").value;
		alert(nombre);		
	}
</script>

<form>
	Escribe tu nombre, por favor:
    <input type="text" id="campoNombre">
    <input type="button" value="Enviar formulario" onclick="saludar()">
</form>
getElementById 2

Recuperar valor por el id III

<script>
	function saludar(){
		let nombre = document.getElementById("campoNombre").value;
 		document.getElementById("campoNombre2").value = nombre;
	}
</script>


Escribe tu nombre, por favor:
<input type="text" id="campoNombre">
<input type="button" value="Enviar formulario" onclick="saludar()">
<input type="text" id="campoNombre2">
getElementById 3

Recuperar valor por el id IV

<script>
	function saludar(){
		document.getElementById("campoNombre2").value = document.getElementById("campoNombre").value;
	}
</script>

Escribe tu nombre, por favor:
<input type="text" id="campoNombre">
<input type="button" value="Enviar formulario" onclick="saludar()">
<input type="text" id="campoNombre2">
getElementById 4

Mecánica de resolución ejercicios

  1. Escribe el código HTML.
  2. Al pulsar sobre el botón debes llamar a una función que muestre un mensaje de alerta: alert("llega").
  3. Ahora el alert mostrará el value de los datos de entrada en lugar del texto "llega".
  4. Procesa la información.
  5. Muestra el resultado.

Ejercicios DOM

  1. Hacer un formulario que convierte de euros a dólares. Supondremos que un euro son dos dólares

  2. Hacer un formulario que convierta de grados centígrados a grados Fahrenheit. Para ello deberé multiplicar por 9/5 y sumar 32.

    Es posible ampliar este ejercicio añadiendo un segundo botón, de tal forma que cuando lo pulsemos, recojamos los grados Fahrenheit introducidos, calculemos los correspondientes grados centígrados y los pintemos en la caja de texto correspondiente.

  3. Hacer un formulario para solicitar el envío de una caja de cartón. En el formulario podremos especificar las características de la caja.

    Recogeremos el value de los radio buttons utilizando:

    document.formulario.radioButtonName.value
icono de mandar un mail¡Contacta conmigo!
Pablo Monteserín
contacta conmigoPablo Monteserín

¡Hola! ¿En qué puedo ayudarte?