181 lines
6.9 KiB
HTML
181 lines
6.9 KiB
HTML
<!Doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>ELEMENTOS DOM</title>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="page" onclick="azul()"><p>Este es un div con la ID:page</p></div>
|
|
<button onclick="azul()">Pon en azul</button>
|
|
<div class="item">Un div con clase "item"</div>
|
|
<div class="item" name="nombre">Un div con clase "item"</div>
|
|
<div class="item" name="nombre">Un div con clase "item"</div>
|
|
<button onclick="crea();crea1()">Crea div</button><br>
|
|
<button onclick="creaAd()">Crea div adyacente</button><br>
|
|
<button onclick="creaCUA()">Crea cuadrado</button><br>
|
|
<button onclick="creaAd2()">Crea otro adyacente</button><br>
|
|
<div class="info"><strong>Importante</strong></div>
|
|
<div class="data"><h1>Tema 1</h1></div>
|
|
<script>
|
|
|
|
//En JavaScript, el DOM es crucial para interactuar dinámicamente con el contenido de una página web.
|
|
|
|
//** Seleccionar elementos del - DOM Búsqueda de elementos HTML desde Javascript
|
|
|
|
// .getElementById(id) Nos devuelve un elemento HTML - null si no encuentra
|
|
function azul() {
|
|
var page=document.getElementById("page");// <div id="page"></div>
|
|
page.style.color="blue";
|
|
}
|
|
|
|
// .getElementsByClassName(class) Nos devuelve un (HTMLCollection)(similar a un array) - devuelve [] si no encuentra
|
|
var items = document.getElementsByClassName("item"); // [div, div, div]
|
|
console.log(items[0]); // Primer item encontrado: <div class="item"></div>
|
|
console.log(items.length); // 3
|
|
|
|
// .getElementsByName(name) Nos devuelve un (HTMLCollection)(similar a un array) - devuelve [] si no encuentra
|
|
var nombrado = document.getElementsByName("nombre"); // [div, div]
|
|
console.log(nombrado[0]); // Primer div encontrado: <div class="item" name="nombre"></div>
|
|
console.log(nombrado.length); // 2
|
|
|
|
// .getElementsByTagName(tag) Nos devuelve un (HTMLCollection)(similar a un array) - devuelve [] si no encuentra
|
|
var divs= document.getElementsByTagName("div"); // [div, div, div, div,div,div]
|
|
console.log(divs.length); // 6
|
|
|
|
// .querySelector(sel) Primer elemento que coincide con el selector CSS sel. Si no,null.
|
|
|
|
// .querySelectorAll(sel) Busca todos los elementos que coinciden con el selector CSS sel. Si no, [].
|
|
|
|
|
|
/*
|
|
//// Crear elementos en el DOM
|
|
|
|
div = document.createElement("div"); // Creamos un <div></div>
|
|
span = document.createElement("span");// Creamos un <span></span>
|
|
img = document.createElement("img"); // Creamos un <img>
|
|
|
|
// Con propiedades
|
|
div = document.createElement("div"); // <div></div>
|
|
div.id = "page"; // <div id="page"></div>
|
|
div.className = "data"; // <div id="page" class="data"></div>
|
|
div.style = "color: red"; // <div id="page" class="data" style="color: red"></div>
|
|
|
|
// setAttribute(attr, value)
|
|
div.setAttribute("id", "page");
|
|
|
|
//// Modificar elementos en el DOM
|
|
|
|
/// Remplazar
|
|
// .textContent Devuelve el contenido de texto del elemento. Se puede asignar para modificar.
|
|
var div = document.querySelector("div"); // <div></div>
|
|
div.textContent = "Hola a todos"; // <div>Hola a todos</div>
|
|
div.textContent; // "Hola a todos"
|
|
|
|
// .innerHTML Devuelve el contenido HTML del elemento. Se puede usar asignar para modificar.
|
|
var div = document.querySelector(".info"); // <div class="info"></div>
|
|
div.innerHTML = "<strong>Importante</strong>"; // Interpreta el HTML
|
|
div.innerHTML; // "<strong>Importante</strong>"
|
|
div.textContent; // "Importante"
|
|
div.textContent = "<strong>Importante</strong>"; // No interpreta el HTML
|
|
|
|
// .outerHTML Devuelve el contenido HTML del elemento incluyendo el propio elemento. Se puede usar asignar para modificar.
|
|
// "<div class="data"><h1>Tema 1</h1></div>"
|
|
var data = document.querySelector(".data");
|
|
data.innerHTML = "<h1>Tema 1</h1>";
|
|
data.textContent; // "Tema 1"
|
|
data.innerHTML; // "<h1>Tema 1</h1>"
|
|
data.outerHTML; // "<div class="data"><h1>Tema 1</h1></div>"
|
|
|
|
/// Insertar
|
|
// .appendChild(node) Añade como hijo. Devuelve el nodo insertado.
|
|
var img = document.createElement("img");
|
|
img.src = "imagenes/rectangulo.jpg";
|
|
img.alt = "Imagen de un rectangulo";
|
|
|
|
document.body.appendChild(img); // Lo insertaría como hijo en el body al final de los que haya.
|
|
|
|
// .insertAdjacentElement(pos, elem) Inserta el elemento elem en la posición pos. Si falla,null.
|
|
// .insertAdjacentHTML(pos, str) Inserta el código HTML str en la posición pos.
|
|
// .insertAdjacentText(pos, text) Inserta el texto text en la posición pos.
|
|
|
|
var div = document.createElement("div"); // <div></div>
|
|
div.textContent = "Ejemplo"; // <div>Ejemplo</div>
|
|
|
|
var app = document.querySelector("#app"); // <div id="app">App</div>
|
|
// pos
|
|
app.insertAdjacentElement("beforebegin", div);
|
|
// Opción 1: <div>Ejemplo</div> <div id="app">App</div>
|
|
|
|
app.insertAdjacentElement("afterbegin", div);
|
|
// Opción 2: <div id="app"> <div>Ejemplo</div> App</div>
|
|
|
|
app.insertAdjacentElement("beforeend", div);
|
|
// Opción 3: <div id="app">App <div>Ejemplo</div> </div>
|
|
|
|
app.insertAdjacentElement("afterend", div);
|
|
// Opción 4: <div id="app">App</div> <div>Ejemplo</div>
|
|
|
|
// Element HTML Text
|
|
app.insertAdjacentElement("beforebegin", div);
|
|
// Opción 1: <div>Ejemplo</div> <div id="app">App</div>
|
|
|
|
app.insertAdjacentHTML("beforebegin", '<p>Hola</p>');
|
|
// Opción 2: <p>Hola</p> <div id="app">App</div>
|
|
|
|
app.insertAdjacentText("beforebegin", "Hola a todos");
|
|
// Opción 3: Hola a todos <div id="app">App</div>
|
|
*/
|
|
|
|
// Pasos para crear e insertar
|
|
function crea1() {
|
|
var div = document.createElement("div"); // <div></div>
|
|
div.id = "page2"; // <div id="page"></div>
|
|
div.className = "data"; // <div id="page" class="data"></div>
|
|
div.style = "color: red"; // <div id="page" class="data" style="color: red"></div>
|
|
div.textContent = "Hola a todos";
|
|
// Inserto
|
|
document.body.appendChild(div);
|
|
}
|
|
|
|
function crea() {
|
|
var img = document.createElement("img");
|
|
img.src = "./imagenes/triangulo.png";
|
|
img.alt = "Imagen triangulo";
|
|
|
|
document.body.appendChild(img);
|
|
}
|
|
|
|
function creaCUA() {
|
|
var img = document.createElement("img");
|
|
img.src = "./imagenes/rectangulo.jpg";
|
|
img.alt = "Imagen cuadrado";
|
|
|
|
document.body.appendChild(img);
|
|
}
|
|
|
|
function creaAd() {
|
|
var div = document.createElement("div"); // <div></div>
|
|
var page=document.getElementById("page");
|
|
div.id = "adyacente"; // <div id="page"></div>
|
|
div.className = "data"; // <div id="page" class="data"></div>
|
|
div.style = "color: green"; // <div id="page" class="data" style="color: green"></div>
|
|
div.textContent = "Hola a todos soy adyacente";
|
|
// Inserto
|
|
page.insertAdjacentElement("afterend", div);
|
|
}
|
|
|
|
function creaAd2() {
|
|
var div = document.createElement("div"); // <div></div>
|
|
var page=document.getElementsByClassName("item");
|
|
sitio=page[1];
|
|
div.id = "adyacente"; // <div id="page"></div>
|
|
div.className = "data"; // <div id="page" class="data"></div>
|
|
div.style = "color: green"; // <div id="page" class="data" style="color: red"></div>
|
|
div.textContent = "Hola a todos soy adyacente";
|
|
// Inserto
|
|
sitio.insertAdjacentElement("afterend", div);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |