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 13:43 9 mar 2016
Contenido
DOM
</div>
