在新窗口中打印HTML代碼的DOM樹

我試圖打印出用戶在textarea中編寫的HTML代碼的DOM樹，但我無法打印出在textarea中鍵入的代碼。在新窗口中打印HTML代碼的DOM樹

<html> 
    <head> 
    <title> HTML Tree Structure </title> 
    </head> 
    <body> 
    <SCRIPT LANGUAGE="JavaScript"> 
     function traverseDOMTree(targetDocument, currentElement, depth) { 
     if (currentElement) { 
      var j; 
      var tagName = currentElement.tagName; 
      // Prints the node tagName, such as <A>, <IMG>, etc 
      if (tagName) 
      targetDocument.writeln("&lt;"+currentElement.tagName+"&gt;"); 
      else 
      targetDocument.writeln("[unknown tag]"); 

      // Traverse the tree 
      var i = 0; 
      var currentElementChild = currentElement.childNodes[i]; 
      while (currentElementChild) { 
      // Formatting code (indent the tree so it looks nice on the screen) 
      targetDocument.write("<BR>\n"); 
      for (j = 0; j < depth; j++) { 
       // &#166 is just a vertical line 
       targetDocument.write("&nbsp;&nbsp;&#166"); 
      }    
      targetDocument.writeln("<BR>"); 
      for (j = 0; j < depth; j++) { 
       targetDocument.write("&nbsp;&nbsp;&#166"); 
      }   
      if (tagName) 
       targetDocument.write("--"); 

      // Recursively traverse the tree structure of the child node 
      traverseDOMTree(targetDocument, currentElementChild, depth+1); 
      i++; 
      currentElementChild=currentElement.childNodes[i]; 
      } 
      // The remaining code is mostly for formatting the tree 
      targetDocument.writeln("<BR>"); 
      for (j = 0; j < depth - 1; j++) { 
      targetDocument.write("&nbsp;&nbsp;&#166"); 
      }  
      targetDocument.writeln("&nbsp;&nbsp;"); 
      if (tagName) 
      targetDocument.writeln("&lt;/"+tagName+"&gt;"); 
     } 
     } 

     function printDOMTree(domElement, destinationWindow) { 
     var outputWindow = destinationWindow; 
     if (!outputWindow) 
      outputWindow = window.open(); 

     outputWindow.document.open("text/html", "replace"); 
     outputWindow.document.write("<HTML><HEAD><TITLE>DOM</TITLE></HEAD><BODY>\n"); 
     outputWindow.document.write("<CODE>\n"); 
     traverseDOMTree(outputWindow.document, domElement, 1); 
     outputWindow.document.write("</CODE>\n"); 
     outputWindow.document.write("</BODY></HTML>\n"); 

     outputWindow.document.close(); 
     } 
    </SCRIPT> 
    <DIV ID="myDiv"> 
     <form> 
     <textarea name="htmlcode" id="htmlCode" 
      style="width: 400px; height: 100px"> 
     </textarea> 
     <br/> 
     <input type="button" value="Show me the DOM Tree" 
      onClick="javascript=printDOMTree(document.getElementById('htmlCode')); return true;" /> 
     <br/> 
     </form> 
    </DIV> 
    </body> 
</html>

我不能讓輸入按鈕和printDOMTree函數讀什麼用戶進入textarea類型的工作。我的代碼的HTML部分有什麼問題？我該如何改進並使其工作？

來源

2014-01-14 Dariush M

的printDOMTree功能正在接收textarea元件，其value屬性是包含HTML文本的字符串。在將此元素髮送到您的traverseDOMTree函數之前，您需要將其轉換爲DOM元素。

// inside printDOMTree 
var node = document.createElement('div'); 
node.innerHTML = domElement.value; 
traverseDOMTree(outputWindow.document, node.firstChild, 1);

來源

2014-01-14 14:58:51

我測試過你編輯過的代碼，看起來有些問題已經修復了，但是仍然沒有打印任何寫在textarea中的html代碼的DOM樹，它只是說未知的標籤。它沒有讀取用戶輸入的textarea的值。 –

看看[這個]（http://jsfiddle.net/wimplash/5Ev6F/）。您可能仍然需要處理文本節點等事情，您可能需要再次調整格式。 –

你做了我的一天，我將在格式上工作。 –

一些與你的代碼的主要問題：

您不要在onclick屬性需要javascript=。不知道這是否會破壞你的代碼，但你應該刪除它。

您正在將文本區域的值傳遞給它，但您需要先將其解析爲HTML，然後才能將其用作DOM。請試試看：

<!DOCTYPE html> 
<html> 
<head> 
    <title>HTML Tree Structure </title> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
</head> 
<body> 
    <script> 
    // <![CDATA[ 
     function traverseDOMTree(targetDocument, currentElement, depth) { 
      if (currentElement) { 
       var j; 
       var tagName = currentElement.nodeName; 
       // Prints the node tagName, such as <A>, <IMG>, etc 
       if (tagName) 
        targetDocument.writeln("&lt;" + tagName + "&gt;"); 
       else 
        targetDocument.writeln("[unknown tag]"); 

       // Traverse the tree 
       var i = 0; 
       var currentElementChild = currentElement.childNodes[i]; 
       while (currentElementChild) { 
        // Formatting code (indent the tree so it looks nice on the screen) 
        targetDocument.write("<BR>\n"); 
        for (j = 0; j < depth; j++) { 
         // &#166 is just a vertical line 
         targetDocument.write("&nbsp;&nbsp;&#166"); 
        } 
        targetDocument.writeln("<BR>"); 
        for (j = 0; j < depth; j++) { 
         targetDocument.write("&nbsp;&nbsp;&#166"); 
        } 
        if (tagName) 
         targetDocument.write("--"); 

        // Recursively traverse the tree structure of the child node 
        traverseDOMTree(targetDocument, currentElementChild, depth + 1); 
        i++; 
        currentElementChild = currentElement.childNodes[i]; 
       } 
       // The remaining code is mostly for formatting the tree 
       targetDocument.writeln("<BR>"); 
       for (j = 0; j < depth - 1; j++) { 
        targetDocument.write("&nbsp;&nbsp;&#166"); 
       } 
       targetDocument.writeln("&nbsp;&nbsp;"); 
       if (tagName) 
        targetDocument.writeln("&lt;/" + tagName + "&gt;"); 
      } 
     } 

     function printDOMTree(domElement, destinationWindow) { 
      var outputWindow = destinationWindow, content, e, i; 

      if (!outputWindow) { 
       outputWindow = window.open(); 
      } 

      try { 
       content = $.parseHTML(domElement.value); 
      } catch (e) { 
       alert("The value could not be parsed as HTML."); 
       return; 
      } 

      outputWindow.document.open("text/html", "replace"); 
      outputWindow.document.write("<HTML><HEAD><TITLE>DOM</TITLE></HEAD><BODY>\n"); 
      outputWindow.document.write("<CODE>\n"); 
      for (i = 0; i < content.length; i += 1) { 
       traverseDOMTree(outputWindow.document, content[i], 1); 
      } 
      outputWindow.document.write("</CODE>\n"); 
      outputWindow.document.write("</BODY></HTML>\n"); 

      outputWindow.document.close(); 
     } 
     // ]]> 
    </script> 
    <div id="myDiv"> 
     <form> 
     <textarea name="htmlcode" id="htmlCode" style="width: 400px; height: 100px"></textarea><br /> 
     <input type="button" value="Show me the DOM Tree" onclick="printDOMTree(document.getElementById('htmlCode')); return true;" /> 
     <br /> 
     </form> 
    </div> 
</body> 
</html>

來源

2014-01-14 15:18:49 JLRishe

在新窗口中打印HTML代碼的DOM樹

回答

相關問題