Ir al contenido principal
Sesión de Estudio 8 / Ejercicio 2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Sesión VIII / Ejercicio 2</title>
<style type="text/css">
body{
width: 700px;
}
p{
color: #000080;
background-color: #cccccc;
width: 700px;
font-size: 18px;
font-family: arial;
padding: 5px;
}
input{
font-size: 22px;
font-family: arial;
float:right;
}
</style>
<script type="text/javascript" >
function decidir(){
var rutaboton = document.getElementById("BotonVerMas");
var textoboton = rutaboton.value;
var seleccion =(textoboton == "Ver +")? vermas() : cerrar() ;
}
function vermas(){
var parrafo=document.createElement('p');
parrafo.id ="textoampliado";
var contenido=document.createTextNode("La conversion de etiquetas en nodos se realiza en forma jerarquica. Para el tratamiento y acceso a los mismos existen funciones especificas que permiten llegar a cualquiera de ellos en forma sencilla e inmediata. El árbol generado no sólo representa los contenidos del archivo original (mediante los nodos del árbol) sino que también representa sus relaciones (mediante las ramas del árbol que conectan los nodos). Aunque en ocasiones DOM se asocia con la programación web y con JavaScript, la API de DOM es independiente de cualquier lenguaje de programación. De hecho, DOM está disponible en la mayoría de lenguajes de programación comúnmente empleados. La ventaja de emplear DOM es que permite a los programadores disponer de un control muy preciso sobre la estructura del documento HTML o XML que están manipulando. Las funciones que proporciona DOM permiten añadir, eliminar, modificar y reemplazar cualquier nodo de cualquier documento de forma sencilla. La primera especificación de DOM (DOM Level 1) se definió en 1998 y permitió homogeneizar la implementación del DHTML o HTML dinámico en los diferentes navegadores, ya que permitía modificar el contenido de las páginas web sin necesidad de recargar la página entera.");
parrafo.appendChild(contenido);
var rutatexto=document.getElementById("VerMas");
rutatexto.appendChild(parrafo);
var rutaboton =document.getElementById("BotonVerMas");
rutaboton.value="Cerrar";
}
function cerrar(){
var ruta=document.getElementById("textoampliado");
ruta.parentNode.removeChild(ruta);
var rutaboton =document.getElementById("BotonVerMas");
rutaboton.value="Ver +";
}
</script>
</head>
<body>
<p>DOM: Modelo de objetos del Documento.</p>
<p>Al cargar una pagina web, el navegador trasnforma automaticamente los documentos HTML,
en un conjunto de elementos llamados nodos. Los mismos se encuentran interconectados y
por su aspecto, a la coleccion, se le llama "arbol de nodos".</p>
<p id="VerMas"></p>
<p style="background-color: white"><input type= "button" value="Ver +" id="BotonVerMas" onclick="decidir();"></p>
<p>DOM: Funciones.</p>
</body>
</html>