Los métodos más habituales del objeto document y que están relacionados con el manejo del DOM son los siguientes:
- write (texto), writeln (texto) : se utiliza para escribir texto HTML en el documento. El método writeln añade un salto de línea al final del texto que se haya pasado como argumento, pero si la ejecución se realiza entre las etiquetas <pre></pre> de HTML.
- getElementById (identificador): Va a devolver el elemento del documento cuyo atributo ID coincida con el parámetro identificador. Si no existe el identificador devuelve nulo.
- getElementsByName (nombre): Retorna una colección de elementos cuyo atributo NAME coincida con el indicado.
- getElementsByTagName (Etiqueta): Devuelve la lista de elementos cuya etiqueta sea la misma que la especificada por el parámetro. Si lo que se quiere es obtener la lista de todos los elementos hay que usar el valor especial asterisco, «*».
- getElementsByClassName (clase): Localiza todos los elementos que tengan la clase indicada (atributo CLASS). Es posible indicar más de una clase, sepradas por un espacion y sin importar el orden, para encontrar los elemenoso que contengas todas ellas.
- querySelector (Selector): Nos permite encontrar el primer elemento que cumpla el selector CSS. por ejemplo, las clases CSS deben indicarse con un punto delante del nombre (.nombreClase) y los identificadores con una almohadilla (#nombreId). Si no hay coincidencias, devuelve nulo.
- querySelectorAll (selector): Es idéntico al anterior, pero nos devuelve todos los elementos que coinciden con el selector.
- createElement (etiqueta): Va a permitir crear nuevos elementos dinámicamente por código. Tendremos que indicar el nombre de la etiqueta que corresponde al elemento que queremos crear: párrafo (p), capa (div), etc.
- removeElement (etiqueta):
Ejemplo método write (texto), writeln (texto)
<html>
<body>
<script>
//Escritura de texto plano
document.writeln ("<pre> Una línea con 'writeln', hay salto de línea si el texto está entre las etiquetas 'pre' de HTML </pre>");
document.write ("texto con write (sin salto de línea");
document.write ("Otro texto con write (sin salto de línea");
//si queremos escribir líneas de HTML bastará usar document.write
document.write("<hr>");
document.write('<div id="contenedor" style="width:200px;height:400px;margin:auto;padding:4px;background:#fafafa;border:2px solid black">');
document.write("<h2 style='border-bottom: 2px solid black'>Este es el título</h2>");
document.write("<h3>Un subtítulo</h3>");
document.write("<p>Y comenzamos con nuestro contenido.<br>Añadimos un párrafo. Con el texto que queramos añadir en el mismo.<br><b>Esto solo es un ejemplo</b></p>");
document.write("</div>");
</script>
</body>
</html>
En definitiva, podríamos construir la página html completa con javaScript. Ejecutar ejemplo
Ejemplo getElementById (identificador)
<html>
<body>
<p id="texto1">Soy el primer párrafo</p>
<p id="texto2">Soy el segundo párrafo</p>
<script>
//se busca por identificador
var elemento = document.getElementById("texto2");
//comprobamos si existe el elemento
if (elemento){
document.write ('El párrafo "texto2" existe<br>');
console.log ('El párrafo "texto2" existe'); //herramienta de desarrollo
}else{
document.write ('El párrafo "texto2" no existe<br>');
console.log ('El párrafo "texto2" no existe'); //herramienta de desarrollo
}
</script>
</body>
</html>
Ejemplo getElementsByName (nombre)
<html>
<body>
<p name="coche">Toyota</p>
<p name="animal">Caballo</p>
<p name="coche">Seat</p>
<script>
//se busca por nombre
var elementos = document.getElementsByName("coche");
//mostramos resultado
document.write ("Hay " + elementos.length + " elementos 'coche'");
</script>
</body>
</html>
Ejemplo getElementsByTagName (etiqueta)
<html>
<body>
<div id="capa1">Esto es una capa HTML</div>
<p id="texto1">Esto es un párrafo</p>
<div id="capa2">una nueva capa</div>
<script>
//buscamos por etiqueta
var elementos = document.getElementsByTagName ("div");
//mostramos resultado
document.write ("Hay " + elementos.length + " elementos 'div'");
</script>
</body>
</html>
Ejemplo getElementsByClassName (clase)
<html>
<head>
<style>
.rojo {
color: red;
}
.azul {
color: blue;
}
.verde {
color: green;
}
</style>
</head>
<body>
<p class="color rojo">Párrafo rojo</p>
<p class="color azul">Párrafo color</p>
<p class="color verde">Párrafo verde</p>
<script>
//buscamos por una clase
var elementos = document.getElementsByClassName("color");
//mostramos valores
document.write("Hay " + elementos.length + " elementos con clase 'color'<br>");
//buscamos por varias clases
elementos = document.getElementsByClassName("azul color");
//mostramos valores
document.write("Hay " + elementos.length + " elementos con clase 'color' y 'azul'");
</script>
</body>
</html>
Ejemplo querySelector (selector)
<html>
<head>
<style>
.rojo { color: red; }
.azul { color: blue; }
.verde { color: green; }
</style>
</head>
<body>
<p id="texto1" class="color rojo"> Párrafo rojo </p>
<div id="texto2" class="color azul"> Párrafo azul </div>
<p id="texto3" class="color verde"> Párrafo verde </p>
<script>
//Buscamos por clase
var elemento = document.querySelector(".color");
//Mostramos resultado
if (elemento) {
document.write('Existe un elemento con clase "color"<br>');
console.log('Existe un elemento con clase "%s"', "color"); //herramienta de desarrollo
} else {
document.write('No hay elementos con la clase "color"<br>');
console.warn('No hay elementos con la clase "color"'); //herramienta de desarrollo
}
//Buscamos por identificador
var elemento = document.querySelector("#texto4");
//Mostramos resultado
if (elemento) {
document.write('Existe un elemento con id "texto4"<br>');
console.log('Existe un elemento con id "texto4"'); //herramienta de desarrollo
} else {
document.write('No existe un elemento con id "texto4"<br>');
console.warn('No existe un elemento con id "%s"', "texto4"); //herramienta de desarrollo
}
//Buscamos por etiqueta y clase
var elemento = document.querySelector("p.verde");
//Mostramos resultado
if (elemento) {
document.write('Existe un parrafo con clase "verde"<br>');
} else {
document.write('No existe un parrafo con clase "verde"<br>');
console.warn('No existe un parrafo con clase "%s"', "verde"); //herramienta de desarrollo
}
</script>
</body>
</html>
Ejemplo querySelectorAll (selector)
<html>
<head>
<style>
.rojo { color: red; }
.azul { color: blue; }
.verde { color: green; }
</style>
</head>
<body>
<p id="texto1" class="color rojo"> Párrafo rojo </p>
<div id="texto2" class="color azul"> Párrafo azul </div>
<p id="texto3" class="color verde"> Párrafo verde </p>
<script>
//Buscamos por clase
var elementos = document.querySelectorAll("p.color");
//Mostramos resultado
document.write("Hay " + elementos.length + " párrafos con clase 'color'<br>");
console.log("Hay " + elementos.length + " párrafos con clase 'color'"); //2 - herramienta de desarrollos
//Buscamos por identificador
elementos = document.querySelectorAll("#texto4");
//Mostramos resultado
document.write("Hay " + elementos.length + " párrafos con id 'texto4'<br>");
console.log("Hay " + elementos.length + " párrafos con id 'texto4'"); //0 - herramienta de desarrollos
</script>
</body>
</html>
