Properties and Attributes in HTML

 ̄綄美尐妖づ 提交于 2019-12-02 09:14:00

When writing HTML source code, you can define attributes on your HTML elements. Then, once the browser parses your code, a corresponding DOM node will be created. This node is an object, and therefore it has properties.

For instance, this HTML element:

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

has 2 attributes.

Once the browser parses this code, a HTMLInputElement object will be created, and this object will contain dozens of properties like: accept, accessKey, align, alt, attributes, autofocus, baseURI, checked, childElementCount, childNodes, children, classList, className, clientHeight, etc.

For a given DOM node object, properties are the properties of that object, and attributes are the elements of the attributes property of that object.


Update: When a DOM node is created for a given HTML element, a corresponding property is created for each attribute in the HTML source code. For instance, for this HTML element:

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

the corresponding DOM node will have a type and a value property (among others). However, when the user manually changes the value of the input box, the value property will reflect this change. So if the user inputs "John" into the input box, then:

input.value // returns "John"

whereas:

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

The value property reflects the current text-content inside the input box, whereas the valueattribute contains the initial text-content of the value attribute from the HTML source code.

So if you want to know what's currently inside the text-box, read the property. If you, however, want to know what the initial value of the text-box was, read the attribute.


简单翻译,property是可变的,attribute是初始值。

但还是有很多问题:

.style 与 getAttribute('style')完全不一样

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!