Home/ Questions/Q 7568277
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T14:53:04+00:00

Alright, I’ve got this blank array of objects. I am dynamically finding every node

  • 0

Alright, I’ve got this blank array of objects.
I am dynamically finding every node in a web page and each node is going to have it’s own object and properties.
I need a way to throw the values I need into their respective objects property

So, for example, I find the body node. I now have a special little object for this node. I need to throw pretty much everything about this little guy into his object’s properties.

So I pretty much need it to render like this:

Turning this:

<html>
    <body style="margin:0; padding:0;" title="My Title">
        <p>some text</p>
        <div class="wrapper"></div>
        <footer></footer>
    </body>
</html>

Into this:

this.nodesInfo = [ // All nodes in the page's DOM
    {
        type: 'body', // ex: body, section, aside, div, etc.
        id: 'myID', // the Id of that element
        class: ['myClass1', 'myClass2'], // the class/class' of that element
        depth: '2', // the level in the page's DOM in which that element sits, this will be an integer
        parent: 'html', // that elements direct parent Node 
        children:['div.wrapper', 'p', 'footer'], // any child Nodes that, that element may be a parent to
        text: '', // the text inside that element if any exists
        attributes: ["style=margin:0; padding:0;", "title='My Title'"] // all attributes of this node
    }
];

It would of course cycle through each node it discovered and do this for each node accordingly, until it ran out of nodes.

The class, children, and attributes properties are arrays for the simple possibility of multiples of any of these. Everything else is just a string since a node can’t have more than one ID, title, or direct parent tag.

If a node does not contain some of these properties then that property would remain blank/null/undefined.

My question is simple. Is this possible, if not would I instead have to create each object individually and the push them into my nodesInfo array?

I think the easiest way to go about this would be making an object of each Node and then pushing them all (once they are all created) into an array.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I was building something like this the other night. This should work and you can add more stuff easily. http://jsfiddle.net/elclanrs/UHbMa/

    $.fn.buildTree = function() {
    var tree = {};
    this.find('*').andSelf().each(function(i, v) {
        var parents = $(this).parents().length - 1,
            depth = 0;
        while (depth < parents) {
            depth++;
        }
        tree[v.tagName.toLowerCase() + '(' + i + ')'] = {
            id: (v.id) ? '#' + v.id : '',
            className: (v.className) ? '.' + v.className.replace(' ', '.') : '',
            depth: depth
        };
    });
    return tree;
};


// Then you can do this...

var tree = $('#element').buildTree();
for (var tag in tree) {
    // Get your variables
    var tag.match(/\w+/), // Get rid of `(n)`
        id = tree[tag].id,
        className = tree[tag].className,
        depth = tree[tag].depth;
    html = 'something'; 

    // Bla bla
}
    • 0