*si, el título es en inglés pero la charla es en castellano...
La verdad... Nada...
El DOM no es un lenguaje, es un objeto del documento.
Entonces voy a valerme de Javascript para manipular el DOM
Javascript tiene varias formas de acceder a objetos:
Ej: obj.attribute ó obj.method()
El DOM es un objeto, por ende puedo acceder a él:
Ej: document.attribute ó document.method()
document.getElementById/Class(Selector)
document.querySelectorAll(Selector)
element.setAttribute('attribute', value)
element.onSomething(function(){})
element.addEventListener('onSomething', function(){})
document.getElementsByTagName(Selector)
<body>
<div class="contain">
<label for="example1">Escriba algo:</label>
<br>
<input type="text" name="example1" id="example" value="Modifique este texto" maxlength="40">
<br>
<h2 id="newText"></h2>
</div>
<script src="DOM1.js"></script>
</body>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
font-weight: bold;
}
body {
background-color: #3E363F;
}
.contain {
text-align: center;
border-radius: 1%;
margin-top: 10%;
margin-bottom: 15%;
margin-left: 30%;
margin-right: 30%;
background-color: #fff;
height: 20em;
padding: 2%;
}
input {
margin-top: 2%;
width: 300px;
height: 2em;
}
button {
padding: 1%;
}
h2 {
margin: 3%;
font-size: 1.7em;
}
.mePic {
margin-top: 5%;
width: 80px;
height: 80px;
border-radius: 35%;
}
a {
text-decoration: none;
}
button a {
display: block;
}
@media screen and (max-Width: 1500px) {
.contain {
margin-top: 9%;
margin-bottom: 15%;
margin-left: 29%;
margin-right: 29%;
font-size: 0.9em;
}
h2 {
font-size: 1.3em;
}
}
@media screen and (max-Width: 1150px) {
input {
width: 200px;
}
}
@media screen and (max-Width: 750px) {
* {
font-size: 0.9em;
}
.contain {
margin-top: 9%;
margin-bottom: 10%;
margin-left: 19%;
margin-right: 19%;
}
h2 {
font-size: 1.2em;
}
input {
width: 180px;
}
.mePic {
width: 65px;
height: 65px;
}
}
@media screen and (max-Width: 600px) {
* {
font-size: 0.8em;
}
h2 {
font-size: 1.15em;
}
input {
width: 100px;
}
}
const elIn = document.getElementById('example');
const elOut = document.getElementById('newText');
window.addEventListener('DOMContentLoaded', changeText, false);
elIn.addEventListener('keyup', changeText, false);
function changeText(){
if(elIn.value !== "")
return elOut.textContent = "Ha ingresado: " + elIn.value;
else
return elOut.textContent = "Por favor ingrese algo en el cuadro de arriba...";
}
*Hace click acá o en la imagen para probar este código.
<input type="text" name="example1" id="example" value="Modifique este texto" maxlength="40">
<h2 id="newText"></h2>
const elIn = document.getElementById('example');
const elOut = document.getElementById('newText');
Creamos variables que van a almacenar la posición del objeto en el DOM.
Dentro del html tenemos estos elementos:
*Estas constantes almacenan objetos de elementos, por ende antecedo en sus nombres la palabra el refiriéndome a elemento .
En este caso utilizo constantes ya que sé que el Id de estos elementos no van a cambiar en ningún aspecto.
Buscamos los elementos del html por su Id (con el método getElementById( 'id')).
Luego accedemos al objeto del documento ( document .).
const elIn = document.getElementById('example');
const elOut = document.getElementById('newText');
window.addEventListener('DOMContentLoaded', changeText, false);
elIn.addEventListener('keyup', changeText, false);
function changeText(){
if(elIn.value !== "")
return elOut.textContent = "Ha ingresado: " + elIn.value;
else
return elOut.textContent = "Por favor ingrese algo en el cuadro de arriba...";
}
window.addEventListener('DOMContentLoaded', changeText, false);
document.getElementById('example').addEventListener('keyup', changeText, false);
function changeText(){
if(document.getElementById('example').value !== "")
return document.getElementById('newText').textContent = "Ha ingresado: " + document.getElementById('example').value;
else
return document.getElementById('newText').textContent = "Por favor ingrese algo en el cuadro de arriba...";
}
=
Para agregar JQuery a tu sitio, podes descargarlo y utilizarlo localmente o agregar:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
a tu código html arriba de tu <script> con js.
$('Selector')
$(element).attr('attribute', value)
$(element).on('something', function())
*Que no tienen que ver con la manipulación del DOM y por ende no están cubiertas en esta charla.
<body>
<div class="contain">
<label for="example1">Escriba algo:</label>
<br>
<input type="text" name="example1" id="example" value="Modifique este texto" maxlength="40">
<br>
<h2 id="newText"></h2>
</div>
<script src="DOM1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
font-weight: bold;
}
body {
background-color: #3E363F;
}
.contain {
text-align: center;
border-radius: 1%;
margin-top: 10%;
margin-bottom: 15%;
margin-left: 30%;
margin-right: 30%;
background-color: #fff;
height: 20em;
padding: 2%;
}
input {
margin-top: 2%;
width: 300px;
height: 2em;
}
button {
padding: 1%;
}
h2 {
margin: 3%;
font-size: 1.7em;
}
.mePic {
margin-top: 5%;
width: 80px;
height: 80px;
border-radius: 35%;
}
a {
text-decoration: none;
}
button a {
display: block;
}
@media screen and (max-Width: 1500px) {
.contain {
margin-top: 9%;
margin-bottom: 15%;
margin-left: 29%;
margin-right: 29%;
font-size: 0.9em;
}
h2 {
font-size: 1.3em;
}
}
@media screen and (max-Width: 1150px) {
input {
width: 200px;
}
}
@media screen and (max-Width: 750px) {
* {
font-size: 0.9em;
}
.contain {
margin-top: 9%;
margin-bottom: 10%;
margin-left: 19%;
margin-right: 19%;
}
h2 {
font-size: 1.2em;
}
input {
width: 180px;
}
.mePic {
width: 65px;
height: 65px;
}
}
@media screen and (max-Width: 600px) {
* {
font-size: 0.8em;
}
h2 {
font-size: 1.15em;
}
input {
width: 100px;
}
}
const $elIn = $('#example');
const $elOut = $('#newText');
$(changeText);
$elIn.on('keyup', changeText);
function changeText(){
if($elIn.val() !== "")
return $elOut.text("Ha ingresado: " + $elIn.val());
else
return $elOut.text("Por favor ingrese algo en el cuadro de arriba...");
}
*Hace click acá o en la imagen para probar este código.
<input type="text" name="example1" id="example" value="Modifique este texto" maxlength="40">
<h2 id="newText"></h2>
const $elIn = $('#example');
const $elOut = $('#newText');
$(changeText);
$elIn.on('keyup', changeText);
function changeText(){
if($elIn.val() !== "")
return $elOut.text("Ha ingresado: " + $elIn.val());
else
return $elOut.text("Por favor ingrese algo en el cuadro de arriba...");
}
const el = $('a, .b, #c')
/*Selecciona todos los elementos <a>,
todos los elementos con la clase b (class="b")
y el elemento con id c (id="c")*/
const el = $('.b a')
/*Selecciona todos los elementos <a>
dentro de la clase b (class="b")*/
const el = $('#c a')
/*Selecciona todos los elementos <a>
dentro del elemento con id c (id="c")*/
Links útiles: