Question

我正在尝试打印出用户在textarea中编写的HTML代码的DOM树，但我无法打印出textarea中输入的代码。

<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部分有什么问题？如何改进并使其有效？

Answer 1

printDOMTree函数正在接收textarea元素，其value属性是包含HTML文本的字符串。在将此元素发送到traverseDOMTree函数之前，您需要将其转换为DOM元素。

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

Answer 2

您的代码存在一些主要问题：

javascript=属性中不需要onclick。不确定是否会破坏您的代码，但您应将其删除。

您正在将文本区域的值传递给它，但您需要先将其解析为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>

在新窗口中打印HTML代码的DOM树

2 个答案: