/

Métodos del objeto document en javaScript

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>

Ejecutar ejemplo

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>

Ejecutar ejemplo

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>

Ejecutar ejemplo

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>

 

Deja una respuesta

Your email address will not be published.

JavaScript Radio Altruistas Ocio Las Palmas
Anterior post

Propiedades del objeto document en javaScript

JavaScript Radio Altruistas Ocio Las Palmas
Siguiente post

Propiedades de un elemento dentro del DOM en javaScript

Latest from javaScript