JS对象中的JavaScript操作HTMLElements

Question

在我当前的项目中，当我试图改变html元素的属性时，我遇到了一些奇怪的行为(从我的角度来看)。

在我的代码中，定义了一个javascript对象-这个对象有一个'this.element‘属性，包含一个html元素，通过构造函数传递。在这个对象中，我有几个函数。在其中一个函数中，我试图改变该对象的一些样式，方法是：

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

当我尝试这样做时，我没有得到错误，但是样式保持不变。一段时间后，我发现了一个变通方法：

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

这基本上是一样的。这样就行了，我可以设置元素的样式。虽然这个变通方法是可行的，但它要求我的元素有ID。虽然这不是问题，但如果我能绕过这个问题，我的编码可以变得容易得多。

我正在使用Chrome进行测试，一旦项目准备好部署，我们就会使用相同的浏览器，所以使用不同的浏览器对我来说并不是一个真正的选择。

如果有人能帮我理解/解决这种情况，我将不胜感激:) -提前谢谢

编辑:更多代码。我拼凑的这个例子说明了我正在做的事情。然而，当我单独运行它时，我无法实现我所描述的行为。

我不知道这是否重要，但在我的例子中，表示"changeAllStyles“的函数在构造函数之后被调用时工作得很好。该函数的所有后续调用都是由于调用了来自websockets的"onMessage“事件。

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();
    }
}

Answer 1

在代码的其他地方，您似乎是在初始化this.element之后删除DOM元素，然后重新创建它，如下所示：

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

如您所见，我们获取了"foo“元素，获取了"bar”元素，然后用全新的内容替换了"bar“的内容。这意味着删除“”中的所有元素，然后创建新的元素。碰巧有一个新元素的ID为"foo“，因此

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

即使foo.style.visibility = "hidden";不工作，...would也可以工作，因为它是一个完全不同的元素，恰好具有相同的ID。

Answer 2

您显示的代码没有任何问题，可能只是它的复杂性。

我的直觉是邪恶的事情正在幕后发生。我不能调试我看不见的代码，但我可以提出一个便宜的变通办法。

您也可以使用document.querySelectorAll('[data-whatever]')收集元素，使用getAttribute()获取您的单个参数，并直接处理样式，如下所示：

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;
    }
}

我同意T.J.克劳德的观点。

我敢打赌，有人在您背后破坏和重新创建DOM元素。如果它们是通过复制重新创建的，那么您仍然可以通过Id、类或属性来访问它们的克隆，但是对原始DOM元素的引用是死的。

要追踪到这一点，您可以尝试如下所示：

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");
    }
};