Descarga la aplicación para disfrutar aún más
Vista previa del material en texto
PAW 2023 Programación de Aplicaciones Web - JavaScript DOM Javascript DOM: Document Object Model • El DOM representa un documento HTML como un árbol. Javascript DOM: Document Object Model • El DOM representa un documento HTML como un árbol. Página HTML Javascript DOM: Document Object Model • El DOM representa un documento HTML como un árbol. Página HTML DOM Javascript DOM: Document Object Model • El DOM representa un documento HTML como un árbol. Página HTML Javascript DOM: Document Object Model • El DOM representa un documento HTML como un árbol. Página HTML DOM Javascript DOM: Document Object Model Tipos de Nodos Una vez construido automáticamente el árbol completo de nodos, ya es posible utilizar las funciones DOM para acceder de forma directa a cualquier nodo del árbol. document nodo raíz del que derivan todos los demás nodos del árbol. element representa cada uno de las etiquetas HTML. Es el único que puede contener atributos y el único del que pueden derivar otros elementos. text nodo que contiene el texto encerrado por una etiqueta HTML. comment representa los comentarios incluidos en la página HTML. atr se define un nodo de este tipo para representar uno de los atributos de las etiquetas HTML, es decir, uno por cada atributo=valor ... Javascript DOM: Document Object Model • getElementsByTagName(): obtiene todos los elementos de la página HTML cuya etiqueta sea igual que el parámetro que se le pasa a la función. Javascript DOM: Document Object Model • getElementsByTagName(): obtiene todos los elementos de la página HTML cuya etiqueta sea igual que el parámetro que se le pasa a la función. Página HTML Javascript DOM: Document Object Model • getElementsByTagName(): obtiene todos los elementos de la página HTML cuya etiqueta sea igual que el parámetro que se le pasa a la función. Página HTML Acceso DOM Javascript DOM: Document Object Model • getElementsByName(): obtiene todos los elementos de la página HTML cuyo atributo name sea igual que el parámetro que se le pasa a la función. Javascript DOM: Document Object Model • getElementsByName(): obtiene todos los elementos de la página HTML cuyo atributo name sea igual que el parámetro que se le pasa a la función. Página HTML Acceso DOM Javascript DOM: Document Object Model • getElementById(): Accede directamente a un único nodo. Javascript DOM: Document Object Model • getElementById(): Accede directamente a un único nodo. Página HTML Acceso DOM Javascript DOM: Ejercicio A partir de la página web proporcionada por la cátedra, mostrar por pantalla la siguiente información: 1. Número de enlaces de la página. 2. Dirección a la que enlaza el penúltimo enlace. 3. Número de enlaces que apuntan a: http://prueba 4. Cantidad de enlaces del tercer párrafo. Javascript DOM: Ejercicio<html> <head> <title>Ejercicio DOM básico</title> </head> <body> <p> JavaScript (abreviado comúnmente <a href="http://prueba"> JS </a>) es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, 3 basado en prototipos, imperativo, débilmente tipado y dinámico.Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas aunque existe una forma de JavaScript del lado del servidor (Server-side JavaScript o <a href="http://prueba2">F SSJS </a>). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo. </p> <p> JavaScript se diseñó con una sintaxis similar a <a href="http://prueba"> C </a>, aunque adopta nombres y convenciones del lenguaje de programación Java. Sin embargo, Java y JavaScript tienen semánticas y propósitos diferentes. Todos los navegadores modernos interpretan el código JavaScript integrado en las páginas web. Para interactuar con una página web se provee al lenguaje JavaScript de una implementación del Document Object Model (<a href="http://prueba3"> DOM </a>). </p> <p> Tradicionalmente se venía utilizando en páginas web <a href="http://prueba"> HTML</a> para realizar operaciones y únicamente en el marco de la aplicación cliente, sin acceso a funciones del servidor. Actualmente es ampliamente utilizado para enviar y recibir información del servidor junto con ayuda de otras tecnologías como <a href="http://prueba4"> AJAX </a>. JavaScript se interpreta en el agente de usuario al mismo <a href="http://prueba5">tiempo </a> que las sentencias van descargandose junto con el código HTML. </p> </body> </html> http://prueba http://prueba2 http://prueba http://prueba3 http://prueba http://prueba4 http://prueba5 Bibliografía –MDN - Mozilla Developer Network - JavaScript developer guide [en línea] Disponible en: <https://developer.mozilla.org/en-US/docs/Learn/Javascript> –W3Schools Online Web Tutorials [en línea] Disponible en: <https://www.w3schools.com/js/js_htmldom.asp> –FLANAGAN, David. JavaScript: The Definitive Guide. Séptima Edición. Estados Unidos, O’Reilly Media, Inc., 687p. https://developer.mozilla.org/en-US/docs/Learn/Javascript https://www.w3schools.com/js/js_htmldom.asp
Compartir