<head>
<title>Document Object Model - Creación y modificación de elementos</title>
<meta charset="UTF-8">
<style>
.miClase{
color:red;
}
</style>
<script>
//window.load = inicio; // se puede cargar de las 2 formas
window.addEventListener("load",inicio);
function inicio(){
document.getElementById("cambiarTextos").addEventListener("click",cambiarTextos);
document.getElementById("cambiarClases").addEventListener("click",cambiarClases);
document.getElementById("quitarClases").addEventListener("click",quitarClases);
}
function cambiarTextos(){
//Selecciónar UN UNICO elemento según su id
document.getElementById("parrafo1").innerHTML = "Primer párrafo cambiado";
//Selecionar TODOS los elementos según su etiqueta
document.getElementsByTagName("p")[1].innerHTML = "Segundo párrafo cambiado";
//Seleccionar TODOS los elementos según su clase
document.getElementsByClassName("miClase")[0].innerHTML = "Tercer párrafo cambiado";
//Para seleccionar varios elemntos con el mismo nombre (Ej radio butom) se usa getElementsByName
//Seleccionar un elemento dentro de otro
var principal = document.getElementById("main");
var parrafo1 = principal.getElementById("parrafo1");
//Sleecionar el PRIMER elemento con un selector CSS
/*document.querySelector("p.miClase");
document.querySelector("p.miClase")[0];*/
}
function cambiarClases(){
document.getElementById("parrafo1").setAttribute("class","miClase");
document.getElementById("parrafo2").className = "miClase";
}
function quitarClases(){
//document.getElementById("parrafo1").setAttribute("class","");
//document.getElementById("parrafo1").className = "");
for(var i = 0; i<document.getElementsByTagName("p").length; i++){
document.getElementsByTagName("p")[i].className="";
}
}
</script>
</head>
<body>
<div id="main">
<p id="parrafo1">Este es el primer párrafo</p>
<p id="parrafo2">Este es el segundo párrafo</p>
<p id="parrafo3" class="miClase">Este es el tercer párrafo</p>
</div>
<br/>
<button id="cambiarTextos">Cambiar texto de párrafos</button>
<button id="cambiarClases">Cambiar clases de párrafos</button>
<button id="quitarClases">Quitar clases de todos los párrafos</button>
</body>
5.02. DOM. Creación, sustitución y borrado de elementos.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Document Object Model</title>
<style>
.miClase {
color: red;
}
</style>
<script>
window.addEventListener("load", inicio);
function inicio() {
document.getElementById("crearParrafo").addEventListener("click", crearParrafo);
document.getElementById("crearImagen").addEventListener("click", crearImagen);
document.getElementById("borrarUltimo").addEventListener("click", borrarUltimo);
document.getElementById("borrarPrimero").addEventListener("click", borrarPrimero);
document.getElementById("sustituirPrimeroVacio").addEventListener("click", sustituirPrimero);
}
function crearParrafo() {
//Crear elemento
var parrafo = document.createElement("p");
//Crear texto
var texto = document.createTextNode(document.getElementById("texto").value);
parrafo.appendChild(texto);
//Añadir atributos
parrafo.setAttribute("class", "miClase");
//parrafo.className = "miClase";
var cont = document.getElementById("div1");
cont.appendChild(parrafo);
}
function crearImagen() {
//Crear elemento
var imagen = document.createElement("img");
//Añadir atributos
var ruta = prompt("Introduce la ruta");
imagen.setAttribute("alt", prompt("Introduce el texto alternativo"));
imagen.src = ruta;
var cont = document.getElementById("div1");
cont.appendChild(imagen);
}
function borrarUltimo() {
var cont = document.getElementById("div1");
var hijo = cont.lastChild; //Seleccionar el último hijo
//Elimina un elemento hijo
cont.removeChild(hijo);
}
function borrarPrimero() {
var cont = document.getElementById("div1");
var hijo = cont.firstChild; //Seleccionar el primer hijo
//Elimina un elemento hijo
cont.removeChild(hijo);
}
function sustituirPrimero() {
var cont = document.getElementById("div1");
var parrafo = document.createElement("p").appendChild(document.createTextNode("Vacio"));
//Sustituir un elemento
cont.replaceChild(parrafo, cont.firstChild); //Nuevo, viejo
}
</script>
</head>
<body>
<div id="div1"></div>
<br/>
<textarea id="texto"></textarea>
<br/>
<button id="crearParrafo">Crear parrafo</button>
<button id="crearImagen">Crear imagen</button>
<button id="borrarUltimo">Borrar ultimo</button>
<button id="borrarPrimero">Borrar primero</button>
<button id="sustituirPrimeroVacio">Sustituir primer párrafo por vacío</button>
</body>
</html>
|
Property / Method
|
Descripción
|
|
accessKey
|
Establece o devuelve el atributo
accesskey de un elemento
|
|
addEventListener()
|
Adjunta un controlador de eventos al
elemento especificado
|
|
appendChild()
|
Agrega un nuevo nodo secundario, a un
elemento, como el último nodo secundario
|
|
attributes
|
Devuelve un NamedNodeMap de los
atributos de un elemento
|
|
blur()
|
Elimina el foco de un elemento
|
|
childElementCount
|
Devuelve la cantidad de elementos
secundarios que tiene un elemento
|
|
childNodes
|
Devuelve una colección de nodos
secundarios de un elemento (incluidos los nodos de texto y comentario)
|
|
children
|
Devuelve una colección del elemento
secundario de un elemento (sin incluir los nodos de texto y comentario)
|
|
classList
|
Devuelve el nombre (s) de clase de un
elemento
|
|
className
|
Establece o devuelve el valor del
atributo de clase de un elemento
|
|
click()
|
Simula un clic de mouse en un
elemento
|
|
clientHeight
|
Devuelve la altura de un elemento,
incluido el relleno
|
|
clientLeft
|
Devuelve el ancho del borde izquierdo
de un elemento
|
|
clientTop
|
Devuelve el ancho del borde superior
de un elemento
|
|
clientWidth
|
Devuelve el ancho de un elemento,
incluido el relleno
|
|
cloneNode()
|
Clona un elemento
|
|
compareDocumentPosition()
|
Compara la posición del documento de
dos elementos
|
|
contains()
|
Devuelve true si un nodo es un
descendiente de un nodo, de lo contrario es falso
|
|
contentEditable
|
Establece o devuelve si el contenido
de un elemento es editable o no
|
|
dir
|
Establece o devuelve el valor del
atributo dir de un elemento
|
|
firstChild
|
Devuelve el primer nodo hijo de un
elemento
|
|
firstElementChild
|
Devuelve el primer elemento
secundario de un elemento
|
|
focus()
|
Da enfoque a un elemento
|
|
getAttribute()
|
Devuelve el valor de atributo
especificado de un nodo de elemento
|
|
getAttributeNode()
|
Devuelve el nodo de atributo
especificado
|
|
getElementsByClassName()
|
Devuelve una colección de todos los
elementos secundarios con el nombre de clase especificado
|
|
getElementsByTagName()
|
Devuelve una colección de todos los
elementos secundarios con el nombre de etiqueta especificado
|
|
hasAttribute()
|
Devuelve true si un elemento tiene el
atributo especificado, de lo contrario es falso
|
|
hasAttributes()
|
Devuelve verdadero si un elemento
tiene algún atributo, de lo contrario es falso
|
|
hasChildNodes()
|
Devuelve verdadero si un elemento
tiene nodos secundarios, de lo contrario falso
|
|
id
|
Establece o devuelve el valor del
atributo id de un elemento
|
|
innerHTML
|
Establece o devuelve el contenido de
un elemento
|
|
innerText
|
Establece o devuelve el contenido de
texto de un nodo y sus descendientes
|
|
insertAdjacentElement()
|
Inserta un elemento HTML en la
posición especificada relativa al elemento actual
|
|
insertAdjacentHTML()
|
Inserta un texto con formato HTML en
la posición especificada relativa al elemento actual
|
|
insertAdjacentText()
|
Inserta texto en la posición
especificada relativa al elemento actual
|
|
insertBefore()
|
Inserta un nuevo nodo hijo antes de
un nodo hijo especificado, existente
|
|
isContentEditable
|
Devuelve verdadero si el contenido de
un elemento es editable, de lo contrario es falso
|
|
isDefaultNamespace()
|
Devuelve verdadero si un namespaceURI
especificado es el predeterminado, de lo contrario falso
|
|
isEqualNode()
|
Comprueba si dos elementos son
iguales
|
|
isSameNode()
|
Comprueba si dos elementos son el
mismo nodo
|
|
isSupported()
|
Devuelve verdadero si una
característica especificada es compatible con el elemento
|
|
lang
|
Establece o devuelve el valor del
atributo lang de un elemento
|
|
lastChild
|
Devuelve el último nodo hijo de un
elemento
|
|
lastElementChild
|
Devuelve el último elemento hijo de
un elemento
|
|
namespaceURI
|
Devuelve el URI de espacio de nombre
de un elemento
|
|
nextSibling
|
Devuelve el siguiente nodo en el
mismo nivel de árbol de nodos
|
|
nextElementSibling
|
Devuelve el siguiente elemento en el
mismo nivel de árbol de nodos
|
|
nodeName
|
Devuelve el nombre de un nodo
|
|
nodeType
|
Devuelve el tipo de nodo de un nodo
|
|
nodeValue
|
Establece o devuelve el valor de un
nodo
|
|
normalize()
|
Se une a los nodos de texto
adyacentes y elimina los nodos de texto vacíos en un elemento
|
|
offsetHeight
|
Devuelve la altura de un elemento,
incluido el relleno, el borde y la barra de desplazamiento
|
|
offsetWidth
|
Devuelve el ancho de un elemento,
incluido el relleno, el borde y la barra de desplazamiento
|
|
offsetLeft
|
Devuelve la posición de
desplazamiento horizontal de un elemento
|
|
offsetParent
|
Devuelve el contenedor de
desplazamiento de un elemento
|
|
offsetTop
|
Devuelve la posición de
desplazamiento vertical de un elemento
|
|
ownerDocument
|
Devuelve el elemento raíz (objeto del
documento) para un elemento
|
|
parentNode
|
Devuelve el nodo padre de un elemento
|
|
parentElement
|
Devuelve el nodo elemento principal
de un elemento
|
|
previousSibling
|
Devuelve el nodo anterior en el mismo
nivel de árbol de nodos
|
|
previousElementSibling
|
Devuelve el elemento anterior en el
mismo nivel de árbol de nodos
|
|
querySelector()
|
Devuelve el primer elemento
secundario que coincide con un selector de CSS especificado de un elemento
|
|
querySelectorAll()
|
Devuelve todos los elementos
secundarios que coinciden con un selector de CSS específico de un elemento
|
|
removeAttribute()
|
Elimina un atributo especificado de
un elemento
|
|
removeAttributeNode()
|
Elimina un nodo de atributo
especificado y devuelve el nodo eliminado
|
|
removeChild()
|
Elimina un nodo hijo de un elemento
|
|
removeEventListener()
|
Elimina un controlador de eventos que
se ha adjuntado con el método addEventListener ()
|
|
replaceChild()
|
Reemplaza un nodo hijo en un elemento
|
|
scrollHeight
|
Devuelve la altura completa de un
elemento, incluido el relleno
|
|
scrollIntoView()
|
Desplaza el elemento especificado en
el área visible de la ventana del navegador
|
|
scrollLeft
|
Establece o devuelve la cantidad de
píxeles que el contenido de un elemento se desplaza horizontalmente
|
|
scrollTop
|
Establece o devuelve el número de
píxeles que el contenido de un elemento se desplaza verticalmente
|
|
scrollWidth
|
Devuelve el ancho completo de un
elemento, incluido el relleno
|
|
setAttribute()
|
Establece o cambia el atributo
especificado, al valor especificado
|
|
setAttributeNode()
|
Establece o cambia el nodo de
atributo especificado
|
|
style
|
Establece o devuelve el valor del
atributo de estilo de un elemento
|
|
tabIndex
|
Establece o devuelve el valor del
atributo tabindex de un elemento
|
|
tagName
|
Devuelve el nombre de la etiqueta de
un elemento
|
|
textContent
|
Establece o devuelve el contenido
textual de un nodo y sus descendientes
|
|
title
|
Establece o devuelve el valor del
atributo de título de un elemento
|
|
toString()
|
Convierte un elemento en una cadena
|
<head>
<meta charset="utf-8" />
<title>Document Object Model</title>
<script>
window.addEventListener("load", inicio);
function inicio() {
for (var i = 0; i < document.getElementsByTagName("h2").length; i++) {
document.getElementsByTagName("h2")[i].addEventListener("click", recorrerAdelante);
}
}
function recorrerAdelante(e) {
var texto = "";
var h2 = e.target;
texto += "Has elegido " + h2.textContent;
//Seleccionamos el padre
var padre = h2.parentElement;
texto += " que está situada en el " + padre.id + "<br/>";
//Seleccionamos el hermano
//var ul = h2.nextSibling; //No lo utilizamos porque incluye nodos de tipo texto
var ul = h2.nextElementSibling;
//Mostrar el número de hijos
//¡OJO! .childNodes incluye texto y comentarios; children no.
texto += "El número de provincias es " + ul.children.length + ": ";
var hijo = ul.firstChild;
//Si quisiéramos seleccionar el último hijo, pondríamos .lastChild.
while (hijo != null) {
texto += " " + hijo.textContent;
hijo = hijo.nextElementSibling;
//Si quisiéramos seleccionar el hermano anterior, pondríamos .previousElementSibling
}
//Mostramos el texto
document.getElementById("texto").innerHTML = texto;
//Si ponemos .textContent mostraríamos texto plano, y no coge etiquetas html.
}
</script>
</head>
<body>
<div id="norte">
<h2>Galicia</h2>
<ul id="lista">
<li>A Coruña</li>
<li>Lugo</li>
<li>Ourense</li>
<li>Pontevedra</li>
</ul>
</div>
<div id="sur">
<h2>Canarias</h2>
<ul id="lista">
<li>Santa Cruz de Tenerife</li>
<li>Las Palmas</li>
</ul>
</div>
<div id="texto"></div>
</body>
No hay comentarios.:
Publicar un comentario