Question

考虑以下标记：

<div>Hello, my <span>name</span> is John</div>

我需要按顺序获取文本节点和包含它们的元素，如：

1："Hello, my "，<div>（HTMLElement）

2："name"，<span>（HTMLElement）

3：" is John"，<div>（HTMLElement）

这需要以允许我稍后获得HTMLElements的CSS样式的方式完成。

我已尝试过的内容：

$(foo).find('*').contents().filter(function() {
    var $this = $(this);
    return this.nodeType === 3 && $.trim($this.text()).length > 0; 
});

这导致非顺序结果集，如：

1："Hello, my "

2：" is John"

3："name"

但是，我可以访问他们的父元素，所以这可以完成一半的工作。

因此，主要问题是：如何以与文档相同的顺序获取文本节点？

Answer 1

如Norguard的评论中所述，这可以通过遍历文档树来解决：

function process(element) { 
  var children = element.childNodes; 
  for(var i = 0; i < children.length; i++) { 
    var child = children[i]; 
    if(child.nodeType === 3) { 
      if(child.data) { 
        processText(child.data, element); 
      } 
    } else { 
      process(child); 
    } 
  } 
}

然后，您可以调用此函数，将所需元素作为参数传递，假设您已将文本节点的特定处理编写为函数processText(text, parent)。

注意：我假设childNodes按照它们在文档来源中出现的顺序包含子项。这听起来很自然，但我无法在规格中找到这方面的要求，奇怪的是 - 也许这是不言而喻的。

按顺序获取文本节点及其父元素（比看起来更难）

1 个答案: