How Best To Determine How Far Through The Dom An Element/node Is?

I'm trying to find out how far through a document a specific element is, ideally as a percentage. Specifically, I have a long XHTML document (it's a component of an ePub file, in f

Solution 1:

You can use this treeWalk function to find out where in the document a given element is:

Working demo: http://jsfiddle.net/jfriend00/LGT6x/

functionfindElementPercentage(target) {
    var cnt = 0;
    var pos;
    treeWalkFast(document.body, function(node) {
        if (node === target) {
            pos = cnt;
        }
        ++cnt;
    });
    // handle situation where target was not foundif (pos === undefined) {
        returnundefined;
    }
    // return percentagereturn (pos / cnt) * 100;
}

var treeWalkFast = (function() {
    // create closure for constantsvar skipTags = {"SCRIPT": true, "IFRAME": true, "OBJECT": true, 
        "EMBED": true, "STYLE": true, "LINK": true, "META": true};
    returnfunction(parent, fn, allNodes) {
        var node = parent.firstChild, nextNode;
        while (node && node != parent) {
            if (allNodes || node.nodeType === 1) {
                if (fn(node) === false) {
                    return(false);
                }
            }
            // if it's an element &&//    has children &&//    has a tagname && is not in the skipTags list//  then, we can enumerate childrenif (node.nodeType === 1 && node.firstChild && !(node.tagName && skipTags[node.tagName])) {
                node = node.firstChild;
            } elseif (node.nextSibling) {
                node = node.nextSibling;
            } else {
                // no child and no nextsibling// find parent that has a nextSiblingwhile ((node = node.parentNode) != parent) {
                    if (node.nextSibling) {
                        node = node.nextSibling;
                        break;
                    }
                }
            }
        }
    }
})();

---

FYI, you could probably also just use document.body.getElementsByTagName("*") and then walk through the nodeList until you find your element and use that index as a measure of how far you are through the whole list.

functionfindElementPercentage(target) {
    var all = document.body.getElementsByTagName("*");
    for (var i = 0; i < all.length; i++) {
        if (all[i] === target) {
            return (i/all.length) * 100;
        }
    }
}

Working demo: http://jsfiddle.net/jfriend00/AUjq7/

Solution 2:

If you have your document as a string, you can get a very rough estimate by using the indexOf javascript function

var html = $('body').html(); // or provided stringvar percentage = html.indexOf('where_am_i') / html.length; 
var found = percentage >= 0;

Solution 3:

Jquery solution:

<div>
    <divid="test"></div><div></div>
</div>
<divid="result"></div>var all=$("*").not("script, IFRAME, STYLE, EMBED, OBJECT, head, html,body, meta, title, link");
functiongetPercentage(el){
    return all.index($(el))/all.length*100;
}
console.log(getPercentage("#test"))//25