Diferencia entre revisiones de «Usuario:ManuelRomero/JavaScript/dom/domJS»
De WikiEducator
< Usuario:ManuelRomero | JavaScript | dom
(→Qué se puede hacer en JavaScript) |
|||
Línea 52: | Línea 52: | ||
</div> | </div> | ||
<div class="slide"> | <div class="slide"> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<div class="slide"> | <div class="slide"> | ||
Línea 76: | Línea 58: | ||
elementos | elementos | ||
atributos | atributos | ||
− | + | estilos css | |
;Pemite añadir y eliminar elementos y atributos dentro de la página | ;Pemite añadir y eliminar elementos y atributos dentro de la página | ||
;Permite reaccionar ante cualquier evento | ;Permite reaccionar ante cualquier evento | ||
Línea 93: | Línea 75: | ||
*Cuál es el URI del documento | *Cuál es el URI del documento | ||
}} | }} | ||
+ | |||
+ | ====Acceso a los nodos==== | ||
+ | Entendemos por nodo cada uno de los elementos que puedo tener en una página html | ||
+ | *Así por ejemplo un image es un nodo, un párrafo un formulario etc. | ||
+ | *Lo primero qu tenemos que hacer para poder obtener información o realizar acciones sobre un nodo es acceder a él | ||
+ | *A continuación vamos a ver diferentes formas de acceder a un nodo o elemento | ||
+ | {{Puntos clave | ||
+ | |Title=Accedieno a nodo por document| | ||
+ | #document.getElementById(id) encuentra el elemento a través del valor del atributo '''''id''''' | ||
+ | #document.getElementsByTagName(name) encuentra el elemento a través del tag (p, form, imge, ...) | ||
+ | #document.getElementsByClassName(name) encuentra el elemento a través del valor del atributo '''''name''''' | ||
+ | }} | ||
+ | *En caso de haber muchos elementos vamos a obtener un array con todos ellos | ||
+ | |||
+ | {{Actividad| | ||
+ | Title=buscar elementos "p" de una página }} | ||
+ | <source lang="javascript"> | ||
+ | //buscaremos todos los parrafos a partir del elemento document | ||
+ | var parrafos = document.getElementsByTagName("p"); | ||
+ | |||
+ | var primerParrafo = parrafos[0]; | ||
+ | |||
+ | for(var i=0; i<parrafos.length; i++) { | ||
+ | var parrafo = parrafos[i]; | ||
+ | } | ||
+ | {{Actividad| | ||
+ | *Vamos a hacer un programa que me muestre todos los elemntos que tiene mi págna | ||
+ | *Lo vamos a hacer creando una funcion}} | ||
+ | ===Accediendo y modificando sus atributos | ||
+ | *Una vez hemos localizado un elemento, tendremos que poder modificar desde el programa valores para que se puedan ver las acciones a realizar | ||
+ | element= document.getElementsById("x"); | ||
+ | *element.innerHTML = Pone un nuevo contendio en el interior del elemento html | ||
+ | *element.attribute = Pone un valor del atributo especificado de un elemento concreto | ||
+ | *element.setAttribute(attribute, value) Igual que el caso anterior | ||
+ | *element.style.property = new style Cambia el estilo del elementos html especificado | ||
+ | |||
====Creación de nodos==== | ====Creación de nodos==== |
Revisión de 02:43 10 mar 2016
Contenido
DOM
</div>