为什么HTML DOM属性也应该反映到HTML DOM属性中呢？ [英] Why should HTML DOM properties be reflected into HTML DOM attributes as well?

问题描述

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

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

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

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

一个元素的属性，最终我们必须将它反映到HTML DOM中，就像这样：

  //我们已经改变了一些属性
 myButton.someAttribute = true; 
 
 //但这不够，我们还需要反映
 myButton.setAttribute（'someAttribute'，''）; 
  

所以我们得到这个：

 < button id =myButtonsomeAttribute>< / button> 
  

不是这个不反映的按钮：

 < button id =myButton>< / button> 
  

解决方案

并非所有DOM属性都映射到属性。那些 do 反映了属性，这样做是为了与文档语言保持一致 - 在这种情况下，HTML只包含属性的概念，正如您正确指出的那样依赖于选择器。

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

$ $ $ $ $ $ $ $ $ $ $ $' offsetLeft]
[offsetTop]
[offsetWidth]
[offsetHeight]

...以及 [someAttribu te] 与您不存在的 someAttribute 匹配的元素作为属性，即使您没有用 setAttribute ）。

事实上，这就是为什么 label [htmlFor] 不正确地匹配尽管HTML中的for属性简单地称为用于，但不包含 c标签[for] code> htmlFor - DOM使用 htmlFor 来弥补 for 是许多语言中的保留字，包括JavaScript，主要的DOM脚本语言，防止它被用作属性标识符。

It's said by this article that one of the important reasons for HTML properties to be reflected back to the DOM is because CSS selectors rely on attributes, but why's that? This could be done without the reflection based on the spec.

For people who don't know what I'm talking about, read below:

In browsers, CSS selectors rely on attributes to work.

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

So in our JavaScript if we change the property of an element, eventually we have to reflect it to the HTML DOM as well like this:

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

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

so we get this:

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

not this non-reflected button:

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

解决方案

Not all DOM properties map to attributes. The ones that do reflect to and from attributes, do so to maintain parity with the document language — in this case, HTML, which only has a concept of attributes, which as you've correctly pointed out is relied on by Selectors.

If attribute selectors mapped directly to DOM properties without the DOM discriminating between attribute properties and other kinds of properties, then attribute selectors such as the following would match, even though none of these exist as attributes in HTML:

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

... as well as [someAttribute] matching elements with your non-existent someAttribute as a property even when you don't reflect it with setAttribute().

In fact, this is exactly why label[htmlFor] incorrectly matches label[for] elements in Internet Explorer 7, even though the for attribute in HTML is simply called for, not htmlFor — the DOM uses htmlFor to make up for the fact that for is a reserved word in many languages including JavaScript, the main DOM scripting language, preventing it from being used as a property ident.

这篇关于为什么HTML DOM属性也应该反映到HTML DOM属性中呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！