How to get all elements in DOM and text without tags

dom, html, javascript

Solution

So, it appears from your jsFiddle that what you want is the text that is in the `<body>`, but not in any other tag. I call that "top level text". You can collect the top level text nodes like this by iterating through the childNodes of the body element and collecting just the text nodes. Any text in another tag will be a child of that tag, not a direct child of the body.

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;
}

Or, if you want the blocks of text:

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;
}

Keep in mind that what appears in the document as a single piece of text could be in multiple neighboring text nodes. If you want to combine text from consecutive text nodes, that can be done like this:

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;
}

Note that different browsers will put things into text nodes slightly differently. In Chrome, you will get some text nodes with only whitespace in them which you may need to ignore if you just want visible text and there may be \n characters in the text too.

Problem

``` 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. } ``` How I can do it? Thanks in advance. jsfiddle: http://jsfiddle.net/Y9B4B/ (vanilla.js)

Original source