JavaScript - Manipulation HTMLElements inside JS object

In my current project, I've encountered a somewhat strange behavior (from my point of view) when I'm trying to alter the properties af a html element.

In my code, a have defined a javascript object - This object has a 'this.element' property, containing a html element, that gets passed through the constructor. Within this object, I have a couple of functions. In one of theese functions I'm trying to alter some styling of that object, by doing:

this.element.style.visibility = "hidden";

I get no errors when trying to do this, but the style remains unchanged. After some time, I discovered a workaround:

document.getElementById(this.element.id).style.visibility = "hidden";

Which is basically the same. This works, and I can set the style of my element. Though this workaround works, it requires my elements to have ID. While this is not a problem, my coding could get a whole lot easier, if I could get around this.

I'm testing this with Chrome, which is the same browser we'll use once the project开发者_JAVA百科 is ready for deployment, so using a different browser is not really an option for me.

I would greatly appreciate if anybody can help me understand/solve this situation :) - Thanks in advance

EDIT: Some more code. This example I threw together illustrates what I'm doing. However when I run this on it's own, I can't achieve the behavior I was describing.

I don't know if this is of importance, but in my case the function representing "changeAllStyles" works fine when getting called just after the constructor. All subsequence calls of this function, is due to an invocation of the "onMessage" event, coming from websockets.

var myObjArray = [];

function init(){
    //Using jQuery to select all elements containing the "data-whatever" attribute:
    var elements = $('*[data-whatever]');

    //Create a myObj object for each of theese elements:
    for (var i = 0; i < elements.length; i++) {
        var params = elements[i].getAttribute("data-whatever");
        myObjArray.push(new myObj(elements[i], params));
        myObjArray[i].changeStyle();
    }
}

function myObj(element, params){
    this.element = element;
    this.params = params;

    this.changeStyle = function(){
        this.element.style.visibility = "hidden";
    };
}

function changeAllStyles(){
    for (var i = 0; i < myObjArray.length; i++) {
        myObjArray[i].changeStyle();
    }
}

It sounds as though elsewhere in the code you're removing the DOM element after having initialized this.element and then recreating it, like this:

HTML:

<div id='bar'><span id='foo'>This is foo</span> inside 'bar'</div>

JavaScript:

var foo = document.getElementById('foo');
var bar = document.getElementById('bar');
bar.innerHTML = "<span id='foo'>This is a new foo</span> inside 'bar'";
foo.style.visibility = "hidden"; // <== No effect, wrong element

As you can see, we're getting the "foo" element, and getting the "bar" element, and then replacing the contents of "bar" with brand-new stuff. That means all of the elements inside "bar" are removed, and then new elements are created. It happens that one of the new elements has the ID "foo" and so

document.getElementById(foo.id).style.visibility = "hidden";

...would work even though foo.style.visibility = "hidden"; doesn't work, because it's a completely different element that happens to have the same ID.

There is nothing wrong with the code you show, except its complexity maybe.

My gut feeling is that unholy things are occuring behind the scene. I cannot debug the code I can't see, but I can propose a cheap workaround.

You could as well collect the elements with document.querySelectorAll('[data-whatever]'), get back your individual parameters with getAttribute() and fiddle with style directly, like so :

function changeAllStyles()
{
    var elements = document.querySelectorAll ('[data-whatever]');
    for (var i = 0; i < elements.length; i++) 
    {
        var elt = elements[i];
        my_parameters = elt.getAttribute ('data-whatever');
        play_with (my_parameters);
        elt.style.color = a_nice_shade_of_pinkish_brown;
    }
}

I concur with T.J. Crowder.

My bet is, someone is destroying and recreating the DOM elements behind your back. If they are recreated by copy, you can still access their clones by Id or class or attributes, but the references to the original DOM elements are dead.

To track this down, you could try something like:

this.changeStyle = function()
{
    this.element.__check = "booh!";
    var possible_clone = document.getElementById (this.element.id);
    if (possible_clone.__check != "booh!")
    {
        report_to_boss ("something fishy there");
    }
};