JavaScript - 在 JS 对象内操作 HTMLElements

Question

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

在我的代码中，a 定义了一个 javascript 对象 - 该对象有一个“this.element”属性，其中包含一个 html 元素，该属性通过构造函数传递。在这个对象中，我有几个函数。在这些函数之一中，我尝试通过执行以下操作来更改该对象的某些样式:

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

尝试执行此操作时，我没有收到任何错误，但样式保持不变。一段时间后，我发现了一个解决方法:

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

基本上是一样的。这有效，我可以设置元素的样式。尽管此解决方法有效，但它要求我的元素具有 ID。虽然这不是问题，但如果我能解决这个问题，我的编码可能会变得容易得多。

我正在使用 Chrome 进行测试，项目准备好部署后我们将使用 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”的内容。这意味着“bar”内的所有元素都将被删除，然后创建新元素。恰好其中一个新元素的 ID 为“foo”，所以

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

...即使 foo.style.visibility = "hidden"; 不起作用也能起作用，因为它是一个完全不同的元素，并且恰好具有相同的 ID。