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

Question

这篇文章说,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属性都映射到属性.那些确实反映出属性和来自属性的方法,这样做是为了保持与文档语言的一致性 - 在这种情况下,HTML只有一个属性概念,正如你正确指出的那样,选择器依赖它.

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

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

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

实际上,这正是为什么label[htmlFor]错误地匹配label[for]Internet Explorer 7 中的元素的原因,即使HTML中的for属性被简单地调用for,而不是htmlFor- DOM用于htmlFor弥补for包括JavaScript在内的许多语言中的保留字这一事实DOM脚本语言,防止它被用作属性ident.

Answer 2

DOM属性和属性不等同,但它们是相关的.

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

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

Answer 3

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

Answer 4

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

或者对于自定义属性,请改用data-属性.如果你delete是属性my_element.dataset,我很确定该属性也会被删除.