You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 2-ui/1-document/06-dom-attributes-and-properties/article.md
+8-8
Original file line number
Diff line number
Diff line change
@@ -110,10 +110,10 @@ Here's a demo of reading a non-standard property:
110
110
</body>
111
111
```
112
112
113
-
HTML attributes have following features:
113
+
HTML attributes have the following features:
114
114
115
-
- Their name is case-insensitive (that's HTML: `id` is same as `ID`).
116
-
-They are always strings.
115
+
- Their name is case-insensitive (`id` is same as `ID`).
116
+
-Their values are always strings.
117
117
118
118
Here's an extended demo of working with attributes:
119
119
@@ -138,7 +138,7 @@ Here's an extended demo of working with attributes:
138
138
Please note:
139
139
140
140
1.`getAttribute('About')` -- the first letter is uppercase here, and in HTML it's all lowercase. But that doesn't matter: attribute names are case-insensitive.
141
-
2. We can assign anything to an attribute, but that becomes a string. So here we have `"123"` as the value.
141
+
2. We can assign anything to an attribute, but it becomes a string. So here we have `"123"` as the value.
142
142
3. All attributes including ones that we set are visible in `outerHTML`.
143
143
4. The `attributes` collection is iterable and has all attributes with `name` and `value`.
144
144
@@ -192,7 +192,7 @@ That "feature" may actually come in handy, because the user may modify `value`,
192
192
193
193
## DOM properties are typed
194
194
195
-
DOM properties are not always strings. For instance, `input.checked` property (for checkboxes) is boolean:
195
+
DOM properties are not always strings. For instance, the `input.checked` property (for checkboxes) is a boolean:
196
196
197
197
```html run
198
198
<inputid="input"type="checkbox"checked> checkbox
@@ -203,7 +203,7 @@ DOM properties are not always strings. For instance, `input.checked` property (f
203
203
</script>
204
204
```
205
205
206
-
There are other examples. The `style` attribute is a string, but `style` property is an object:
206
+
There are other examples. The `style` attribute is a string, but the `style` property is an object:
@@ -313,7 +313,7 @@ But there may be a possible problem with custom attributes. What if we use a non
313
313
314
314
To avoid conflicts, there exist [data-*](https://html.spec.whatwg.org/#embedding-custom-non-visible-data-with-the-data-*-attributes) attributes.
315
315
316
-
**All attributes starting with "data-" are reserved for programmers' use. They are available in `dataset` property.**
316
+
**All attributes starting with "data-" are reserved for programmers' use. They are available in the `dataset` property.**
317
317
318
318
For instance, if an `elem` has an attribute named `"data-about"`, it's available as `elem.dataset.about`.
319
319
@@ -382,7 +382,7 @@ Methods to work with attributes are:
382
382
-`elem.removeAttribute(name)` -- to remove the attribute.
383
383
-`elem.attributes` is a collection of all attributes.
384
384
385
-
For most needs DOM properties can serve us well. We should refer to attributes only when DOM properties do not suit us, when we need exactly attributes, for instance:
385
+
For most needs, DOM properties can serve us well. We should refer to attributes only when DOM properties do not suit us, when we need exactly attributes, for instance:
386
386
387
387
- We need a non-standard attribute. But if it starts with `data-`, then we should use `dataset`.
388
388
- We want to read the value "as written" in HTML. The value of the DOM property may be different, for instance `href` property is always a full URL, and we may want to get the "original" value.
0 commit comments