Question

据article所说，HTML属性反映回DOM的一个重要原因是CSS选择器依赖于属性，但为什么呢？这可以在没有基于规范的反射的情况下完成。

对于那些不知道我在说什么的人，请阅读以下内容：

在浏览器中，CSS选择器依赖属性来工作。

#myButton[someAttribute] {
  opacity: 0.5; 
  font-weight: bold
}

因此，在我们的JavaScript中，如果我们更改元素的属性，最终我们必须将它反映到HTML DOM中，如下所示：

// we have changed some property
myButton.someAttribute= true; 

// but this is not adequate, we need to reflect as well
myButton.setAttribute('someAttribute', '');

所以我们得到了这个：

<button id="myButton" someAttribute></button>

不是这个非反射按钮：

<button id="myButton"></button>

Answer 1

并非所有DOM属性都映射到属性。 do reflect to and from attributes这样做是为了保持与文档语言的一致性 - 在这种情况下，HTML，它只有一个属性概念，正如你正确指出is relied on by Selectors。

如果属性选择器直接映射到DOM属性而DOM没有区分属性属性和其他类型的属性，那么属性选择器（如下所示）将匹配，即使这些属性在HTML中都不存在：

[classList]
[className]
[dataset]
[offsetLeft]
[offsetTop]
[offsetWidth]
[offsetHeight]

...以及[someAttribute]匹配元素与您不存在的someAttribute作为属性即使您没有用setAttribute()反映它。

事实上，这正是label[htmlFor]错误地匹配Internet Explorer 7中的label[for]元素的原因，即使HTML中的for属性只是简称为for，而不是htmlFor - DOM使用htmlFor来弥补for是许多语言中的保留字这一事实，包括JavaScript（主要的DOM脚本语言），阻止它被用作属性标识。

Answer 2

DOM属性和属性不等同，但它们相关。

属性旨在用于初始化DOM属性。解析HTML时，所有属性都用于初始化相应的DOM属性。如果稍后使用setAttribute或removeAttribute修改属性，则相应的属性也会更新（类似于使用新属性重新加载HTML）。

但它并没有走另一条路。更新属性不会更改相应的属性。这就是为什么您可以分配输入的.value，并在浏览器显示中看到这一点，但是当您查看开发人员工具中的元素时，您仍然可以看到原始的value="whatever"属性。在某些情况下，这会带来特别的好处 - 当您点击表单的Reset按钮时，它会重置其value属性中的所有value属性。

Answer 3

IMHO;某些属性与DOM中的各自属性具有1：1映射。自动对id等常见属性进行反射。您还可以定义自己的属性（您的HTML将被视为无效，但您可以使用doctype来验证它们）。我的猜测是由于流氓属性造成的这种不确定性。他们倾向于仅映射属性：具有可预测行为和用法的属性。您仍然可以在css中使用自定义属性，但是您处于手动模式。你必须保持团结，并亲自反思。这种遥远的西方（自由）心态是使网络技术如此受欢迎和易于使用的东西之一。你可以按照自己的意愿做事。出于可维护性的原因，我不推荐它，但你可以。

Answer 4

您的示例使用了button，但文章使用的是disabled属性，但使用的不是按钮。在button上，浏览器会自动将disabled属性的更改反映到属性上，反之亦然，但所有元素都不会发生这种情况。更改您的示例以使用div，您将看到如果需要，您需要手动协调这两个。

或者对于自定义属性，请改用data-属性。如果您delete来自my_element.dataset，则我非常确定该属性也会被删除。

Answer 5

该文章讨论了自定义元素，并以隐藏或<div>等某些属性为例，说明disabled元素的自然行为。< / p>

所以，首先，不要把你提到的句子作为你神的指示，因为它不是。

简单地说，如果你有一个使用disasbled属性的css的应用程序用于特定样式，请注意，如果你想：

制作一些自定义元素
通过Javascript操纵其属性，包括 disasbled
查看适用于您正在操作的自定义元素的 disasbled 属性的css

然后，是的，您需要反思DOM

Answer 6

嗯，这是我回答的第一个问题，但我会尝试两种方式。

说实话，有点难以说出你的问题，但是你是否希望将HTMLElement属性更改反映在DOM上（通过属性）。然后是代码（使用HTMLElement＆＃39; s）：

// Defines a new property on an Object.
Object.defineProperty(HTMLElement.prototype, "someAttribute", {
    // Configurable
    configurable: true,

    // Enumerable
    enumerable: true,

    /* Getter
        (Allows you get the value like this =>
            element.someAttribute // returns the value of "someAttribute"
        )
    */
    get: function() {
        return this.getAttribute("someAttribute")
    },

    /* Setter
        (Allows you to modify/ update the value like this => 
            element.someAttribute = "lorem ipsum"
        )
    */
    set: function(data) {
        this.setAttribute("someAttribute", data)
    }
})

希望这能回答你的问题。

为什么HTML DOM属性也应该反映到HTML DOM属性中？

6 个答案: