converting JS array with objects to HTML collection

Question

I got to the point with my project where I decided to simplify some of the js functions where I am looking for a parent in a DOM tree, then drill down to the elements many many times in one function. instead I though I will make instances of a function which will keep some data so then I can refer and operate on objects in easy way. I got it working but as I was going along, I decided to extend functionality and add some extra functions like getElementsByClassNameThenTagName. I loop through the arrays and if add matching elements to the array. I have noticed (sadly only now) that I am creating an array with elements rather than HTML collection. As a results, I cannot refer to the objects in my findings by typing buttons['reset'].disabled = false;. I can access my reset button by buttons[3].disabled = false; but this would cause a lot of inconvenience.

I am therefore looking for a way to convert my array with object into a HTML collection.

Please see below my current function:

this.getElementsByClassNameThenTagName = function (elementClass, elementTag) {
    if (parentNode == null) {
        this.init();
    }
    var results = [];
    var regexStr = elementClass;
    var regex = new RegExp(regexStr);
    var x = moduleNode.getElementsByClassName(elementClass);
    // console.log(x);
    var y;
    for ( var i = 0; i < x.length; i++ ) {
        // console.log(i);
        y = x[i].getElementsByTagName(elementTag);
        // console.log(y);
        for (var k=0; k<y.length; k++){
            // console.log(y[k]);
            results.push(y[k]);
        }
        // console.log(results);
    }
    return results;
};

Any suggestions please?

Thanks.

you have to post the code for getElementsByClassNameThenTagName there has to be a point in there where you have an HTML collection and you are turning it into a conventional array , fix that instead of converting it back — Scott Selby
– Scott Selby, Commented Feb 25, 2017 at 23:14
I didn't notice that a nodelist is readonly, you might just have to actually rethink your design a little bit. There isn't going to be any solution that is exactly what you're looking for — Scott Selby
– Scott Selby, Commented Feb 25, 2017 at 23:20
I know it doesn't really answer the question, but for this particular case you could just use document.querySelectorAll('.classname tagname'). — pawel
– pawel, Commented Feb 25, 2017 at 23:20
you could look into how jquery does it when you type #('.classname > tagname') — Scott Selby
– Scott Selby, Commented Feb 25, 2017 at 23:22

ibrahim mahrir · Accepted Answer · 2017-02-25 23:39:28Z

1

this.getElementsByClassNameThenTagName = function (elementClass, elementTag) {
    if (parentNode == null) {
        this.init();
    }

    var results = {};  // thid should be an object (collection)
    var x = moduleNode.querySelectorAll("." + elementClass + " " + elementTag);
    x.forEach(function(y) {
        var name = y.getAttribute("name"); // if you really sure that all the matched elements have names
        results[name] = y;
    });
    return results;
};

Now you can use the results array like this:

var someElement = results['some name'];

NOTE: All the matched elements x should have a name attribute, and all the name attributes of the matched elements should be unique.

answered Feb 25, 2017 at 23:39

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

azgooon Over a year ago

It works perfectly! Thank you Ibrahim, I really appreciate it. By all means, Scott and Pawel, thank you as well for your input.

Collectives™ on Stack Overflow

converting JS array with objects to HTML collection

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related