Question

var elements = document.body.getElementsByTagName('*');

for(var b = 0; b < elements.length; b++) {
     // Here is DOM elemenets with tags
     // I need to get here DOM elements with HTML tags and DOM elements without HTML tags.
}

我怎么做？提前谢谢。

jsfiddle：http://jsfiddle.net/Y9B4B/

（vanilla.js）

Answer 1

因此，从您的jsFiddle看来，您想要的是<body>中的文本，而不是任何其他标记中的文本。我称之为“顶级文本”。您可以通过遍历body元素的childNodes并仅收集文本节点来收集这样的顶级文本节点。另一个标签中的任何文本都将是该标签的子项，而不是该标签的直接子项。

function getTopTextNodes() {
    var textNodes = [];
    var topNodes = document.body.childNodes;
    for (var i = 0; i < topNodes.length; i++) {
        if (topNodes[i].nodeType == 3) {
            textNodes.push(topNodes[i]);
        }
    }
    return textNodes;
}

或者，如果你想要文本块：

function getTopText() {
    var text = [];
    var topNodes = document.body.childNodes;
    for (var i = 0; i < topNodes.length; i++) {
        if (topNodes[i].nodeType == 3) {
            text.push(topNodes[i].nodeValue);
        }
    }
    return text;
}

请记住，文档中作为单个文本显示的内容可能位于多个相邻的文本节点中。如果要组合来自连续文本节点的文本，可以这样做：

function getTopTextCombined() {
    var text = [];
    var lastNodeType;
    var topNodes = document.body.childNodes;
    for (var i = 0; i < topNodes.length; i++) {
        if (topNodes[i].nodeType == 3) {
            if (lastNodeType === 3) {
                text[text.length - 1] += topNodes[i].nodeValue;
            } else {
                text.push(topNodes[i].nodeValue);
            }
        }
        lastNodeType = topNodes[i].nodeType;
    }
    return text;
}

请注意，不同的浏览器会将文本节点的内容略有不同。在Chrome中，您将获得一些只包含空格的文本节点，如果您只想要可见文本并且文本中可能还有\ n字符，则可能需要忽略这些节点。

Answer 2

根据你的小提琴，我想我明白你的意思。试试这个：http://jsfiddle.net/b5LwP/1/

var elements = document.body.childNodes;

for(var b = 0; b < elements.length; b++) {
    if (elements[b].textContent.length) {
        console.log(elements[b].textContent);
    }
}

从标记

<div class="div-class">I have a tag.</div>
I don't have a tag.
<div class="div-class">I have a tag too.</div>

控制台将记录

I have a tag.
I don't have a tag.
I have a tag too.

Answer 3

我认为带有过滤功能的JQuery .contents()就是您所需要的： http://api.jquery.com/contents/

“给定一个表示一组DOM元素的jQuery对象， .contents（）方法允许我们通过直接的孩子进行搜索 DOM树中的这些元素并构造一个新的jQuery对象来自匹配元素。 .contents（）和.children（）方法是相似的，除了前者包括文本节点以及生成的jQuery对象中的HTML元素。“

您可以使用代码进一步过滤到文本节点，如下所示：

$("parent").contents()
    .filter(function() {
      return this.nodeType === 3;
})

如何在没有标签的情况下获取DOM和文本中的所有元素

3 个答案: