Get all the objects (DOM or otherwise) using JavaScript

问题

The short version:

How can I get a list of all the objects (including their descendant objects) on the page (not just the first-depth objects)?

Anticipated subproblem: How can I track the visited objects as I walk the objects?

Thanks in advance.

The long version (with background!!):

Using the in keyword we can get all the properties of an object. (And using the hasOwnProperty method allows us to filter out only the properties that belong to that object and not the inherited ones.)

for (var prop in obj) {
   if (typeof(obj[prop]) == 'object'  && obj.hasOwnProperty(prop)) {
            showObjectsOfInternal(obj[prop], visitedObjects); // recursion.
   }
}

That is a good starting point, but I would like to get all the objects. One could imagine iterating through all the properties and accumulating the objects, then recursively iterating through those. However, if there was an object reference loop, like an object referred to itself, such as in window.window, it would be good not to get trapped by that. So one needs a way to track all the 'visited objects' during the recursion.

To track the visited object, one really needs a hashset of objects, based on their internal object key. I tried that by making a visitedObjects object and setting it's keys as the object to be added, and the value didn't matter.

if(visitedObjects[obj] == 1){return;}
visitedObjects[obj] = 1;

But that didn't work for me. (It seems to turn the objects into strings for keys, instead of using their internal reference keys)

So instead I decided to use an array and add an indexOf method.

Array.prototype.indexOf = function(obj){
   for(var i = 0; i < this.length; i++)
   {
      if(this[i] == obj) // reference comparison for non-primitive objects.
      {
         return i;
      }  
   }
   return -1; 
}

But that didn't work either (eventually I got that I couldn't do for(var prop in obj) even though the object wasn't null! The debugger said that obj did not support that property.)

In any case, here is my buggy code:

function showObjectsOf(obj) {
    var objHolder = new Array();
    var ancestorNames = new Array();
    ancestorNames.push('obj');
    showObjectsOfInternal(obj, objHolder, ancestorNames);
}
function showObjectsOfInternal(obj, visitedObjects, ancestorNames) {
    if (visitedObjects.indexOf(obj) != -1) {
        return;
    }
    visitedObjects.push(obj);
    alert(getAncestorString(ancestorNames));
    for (var prop in obj) {
        if (typeof (obj[prop]) == 'object') {
            ancestorNames.push(prop);
            showObjectsOfInternal(obj[prop], visitedObjects, ancestorNames);
            ancestorNames.remove(prop);
        }
    }
}
function getAncestorString(ancestorNames) {
    return ancestorNames.join('.');
}

Array.prototype.indexOf = function(obj) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == obj) {
            return i;
        }
    }
    return -1;
}
Array.prototype.remove = function(obj){
    var ind = this.indexOf(obj);
    if(ind != -1)
    {
        this.splice(ind,1);
    }
}
window.onload = function() { showObjectsOf(window); };

Update Actually, the dictionary may be the better way to go. It just wasn't working for me in IE. works fine in chrome though.

回答1:

My quick attempt:

var objs = []; // we'll store the object references in this array

function walkTheObject( obj ) {
    var keys = Object.keys( obj ); // get all own property names of the object

    keys.forEach( function ( key ) {
        var value = obj[ key ]; // get property value

        // if the property value is an object...
        if ( value && typeof value === 'object' ) { 

            // if we don't have this reference...
            if ( objs.indexOf( value ) < 0 ) {
                objs.push( value ); // store the reference
                walkTheObject( value ); // traverse all its own properties
            } 

        }
    });
}

walkTheObject( this ); // start with the global object

来源：https://stackoverflow.com/questions/8409577/get-all-the-objects-dom-or-otherwise-using-javascript

标签

javascript

javascript-objects