¿Cómo obtener el documento HTML completo como una string en JavaScript?

Dado un documento HTML, la tarea es obtener el documento completo como una string usando JavaScript. Aquí se discuten algunos métodos: 
 

  • Método getElementsByTagName() 
    Este método devuelve un conjunto de todos los elementos del documento con el nombre de etiqueta definido, como un objeto NodeList. 
    Este objeto representa una colección de Nodes, a los que se accede mediante números de índice. El índice comienza en 0. 
    Sintaxis: 
     
document.getElementsByTagName(tagname)
  • Parámetros: 
    • nombre de la etiqueta: este parámetro es obligatorio. Especifica el nombre de la etiqueta de los elementos a obtener. 
       
  • Propiedad HTML DOM innerHTML 
    Esta propiedad establece/devuelve el contenido HTML (HTML interno) de un elemento. 
    Sintaxis: 
    • Devuelve la propiedad innerHTML: 
       
HTMLElementObject.innerHTML
  • Establezca la propiedad innerHTML: 
     
HTMLElementObject.innerHTML = text
  • texto: Especifica el contenido HTML de un elemento. 
     

Ejemplo 1: este ejemplo obtiene el documento completo como una string usando document.documentElement.innerHTML
 

html

<!DOCTYPE html> 
<html>
 
<head>
    <title>
        JavaScript | Get the entire document HTML as a string.
    </title>
</head>
 
<body style="text-align:center;" id="body">
    <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1>
    <p id="GFG_UP" style="font-size: 15px; font-weight: bold;">
    </p>
 
    <button onclick="GFG_Fun(); ">
        click here
    </button>
    <script>
        var up = document.getElementById('GFG_UP');
        up.innerHTML = 'Click on the button to convert whole document to string';
 
        function GFG_Fun() {
            var string = document.documentElement.innerHTML;
            alert(string);
        }
    </script>
</body>
 
</html>

Producción: 
 

  • Antes de hacer clic en el botón: 
     

  • Después de hacer clic en el botón: 
     

Ejemplo 2: este ejemplo obtiene el documento completo seleccionando primero los elementos con el nombre de etiqueta ‘HTML’ y seleccionando el primer elemento mediante la indexación mediante document.getElementsByTagName(‘html’)[0].innerHTML .
 

html

<!DOCTYPE html> 
<html>
 
<head>
    <title>
        JavaScript | Get the entire document HTML as a string.
    </title>
</head>
 
<body style="text-align:center;" id="body">
    <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1>
    <p id="GFG_UP" style="font-size: 15px; font-weight: bold;">
    </p>
 
    <button onclick="GFG_Fun(); ">
        click here
    </button>
    <script>
        var up = document.getElementById('GFG_UP');
        up.innerHTML = 'Click on the button to convert whole document to string';
 
        function GFG_Fun() {
            var string = document.getElementsByTagName('html')[0].innerHTML;
            alert(string);
        }
    </script>
</body>
 
</html>

Producción: 
 

  • Antes de hacer clic en el botón: 
     

  • Después de hacer clic en el botón: 
     

Navegadores compatibles:

  • Google Chrome
  • Mozilla Firefox
  • explorador de Internet
  • Safari
  • Ópera

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *