Question

我正在撰写Chrome扩展程序，将HTML网页转换为其他格式。

如果我使用document.getElementsByTagName("*")并迭代该集合，我可以看到所有标签。但是，它是一个平面的代表。我需要检测打开和关闭“事件”，如SAX解析器，以便我的翻译输出保持适当的包含/嵌套。

在JavaScript中执行此操作的正确方法是什么？手动执行此操作似乎有点尴尬。还有其他办法吗？

说明我的意思......

   <html>
       <body>
           <h1>Header</h1>
           <div>
               <p>some text and a missing closing tag
               <p>some more text</p>
           </div>
           <p>some more dirty HTML
        </body>
    <html>

我需要按此顺序获取事件：

    html open
    body open
    h1 open
    text
    h1 close
    div open
    p open
    text
    p close
    p open
    text
    p close
    div close
    p open
    text
    p close
    body close
    html close

我感觉由我来跟踪类似SAX解析器的事件是我迭代的一部分。我还有其他选择吗？如果没有，你能指出我的任何示例代码吗？

谢谢！

Answer 1

只遍历每个节点和每个节点的所有子节点。当一个孩子的水平用尽时，标签就会关闭。

function parseChildren(node) {

    // if this a text node, it has no children or open/close tags
    if(node.nodeType == 3) {
        console.log("text");
        return;
    }

    console.log(node.tagName.toLowerCase() + " open");

    // parse the child nodes of this node
    for(var i = 0; i < node.childNodes.length; ++i) {
        parseChildren(node.childNodes[i]);
    }

    // all the children are used up, so this tag is done
    console.log(node.tagName.toLowerCase() + " close");
}

要遍历整个页面，只需parseChildren(document.documentFragment)即可。您可以用您喜欢的任何行为替换console.log语句。

请注意，此代码会报告大量text个节点，因为标记之间的空格会计为文本节点。要避免这种情况，只需展开文本处理代码：

    if(node.nodeType == 3) {
        // if this node is all whitespace, don't report it
        if(node.data.replace(/\s/g,'') == '') { return; }

        // otherwise, report it
        console.log("text");
        return;
    }

Answer 2

我认为没有适合它的工具，所以你应该只编写一些递归函数，以某种方式get first child，get next node，get parent，等等上。

在JavaScript中迭代DOM时关闭标记事件

2 个答案: