一尘不染

JavaScript HTML中的属性和属性有什么区别?

javascript

在jQuery 1.6.1中进行更改之后,我一直在尝试定义HTML中属性和属性之间的差异。

查看jQuery1.6.1发行说明中的列表(在底部附近),似乎可以对HTML属性和属性进行如下分类:

  • 属性:所有具有布尔值或UA计算得出的值,例如selectedIndex。

  • 属性:可以添加到既不是布尔也不包含UA生成值的HTML元素中的“属性”。

有什么想法吗?


阅读 284

收藏
2020-04-23

共1个答案

一尘不染

在编写HTML源代码时,可以在HTML元素上定义属。然后,一旦浏览器解析了您的代码,就会创建一个相应的DOM节点。该节点是一个对象,因此具有
属性。

例如,此HTML元素:

<input type="text" value="Name:">

有2个属性(typevalue)。

浏览器解析此代码后,将创建一个HTMLInputElement对象,该对象将包含许多属性,例如:accept,accessKey,align,alt,attributes,autofocus,baseURI,checked,childElementCount,childNodes,childNodes,classList,className,
clientHeight等

对于给定的DOM节点对象,属性是该对象的属性,属性是该对象的属性的元素attributes

当为给定的HTML元素创建DOM节点时,其许多属性都与具有相同或相似名称的属性相关,但这不是一对一的关系。例如,对于此HTML元素:

<input id="the-input" type="text" value="Name:">

相应的DOM节点将具有idtypevalue属性(以及其他属性):

  • id属性是一个 反射属性id属性:获取属性读取的属性值,并且设置属性写入的属性值。id是一个 反射属性,它不会修改或限制该值。

  • type属性是一个 反射属性type属性:获取属性读取的属性值,并且设置属性写入的属性值。type不是纯反射属性,因为它仅限于 已知值 (例如,输入的有效类型)。如果你有<input type="foo">,那么theInput.getAttribute("type")给你"foo"theInput.type给你"text"

  • 相反,该value属性不能反映该value属性。相反,它是输入的 当前值 。当用户手动更改输入框的值时,该value属性将反映此更改。因此,如果用户"John"在输入框中输入内容,则:

    theInput.value // returns "John"
    

而:

    theInput.getAttribute('value') // returns "Name:"

value属性反映输入框内的 当前 文本内容,而该value属性包含HTML源代码中属性的 初始 文本内容value

因此,如果您想知道文本框中当前包含的内容,请阅读属性。但是,如果您想知道文本框的初始值是什么,请阅读属性。或者,您可以使用defaultValue属性,它是对value属性的纯粹反映:

    theInput.value                 // returns "John"
theInput.getAttribute('value') // returns "Name:"
theInput.defaultValue          // returns "Name:"

有几个属性,可直接反映他们的属性(relid),有些是用稍微不同的名称直接反射(htmlFor反映for属性,className体现了class属性),许多反映他们的属性,但有限制/修改(srchrefdisabledmultiple)等上。该规范涵盖了各种反射。

2020-04-23