Skip to content

Commit c14f6bb

Browse files
authored
Small language/readability improvements
1 parent 2a3182a commit c14f6bb

File tree

1 file changed

+8
-8
lines changed
  • 2-ui/1-document/06-dom-attributes-and-properties

1 file changed

+8
-8
lines changed

2-ui/1-document/06-dom-attributes-and-properties/article.md

+8-8
Original file line numberDiff line numberDiff line change
@@ -110,10 +110,10 @@ Here's a demo of reading a non-standard property:
110110
</body>
111111
```
112112

113-
HTML attributes have following features:
113+
HTML attributes have the following features:
114114

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.
117117

118118
Here's an extended demo of working with attributes:
119119

@@ -138,7 +138,7 @@ Here's an extended demo of working with attributes:
138138
Please note:
139139

140140
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.
142142
3. All attributes including ones that we set are visible in `outerHTML`.
143143
4. The `attributes` collection is iterable and has all attributes with `name` and `value`.
144144

@@ -192,7 +192,7 @@ That "feature" may actually come in handy, because the user may modify `value`,
192192

193193
## DOM properties are typed
194194

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:
196196

197197
```html run
198198
<input id="input" type="checkbox" checked> checkbox
@@ -203,7 +203,7 @@ DOM properties are not always strings. For instance, `input.checked` property (f
203203
</script>
204204
```
205205

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:
207207

208208
```html run
209209
<div id="div" style="color:red;font-size:120%">Hello</div>
@@ -313,7 +313,7 @@ But there may be a possible problem with custom attributes. What if we use a non
313313

314314
To avoid conflicts, there exist [data-*](https://html.spec.whatwg.org/#embedding-custom-non-visible-data-with-the-data-*-attributes) attributes.
315315

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.**
317317

318318
For instance, if an `elem` has an attribute named `"data-about"`, it's available as `elem.dataset.about`.
319319

@@ -382,7 +382,7 @@ Methods to work with attributes are:
382382
- `elem.removeAttribute(name)` -- to remove the attribute.
383383
- `elem.attributes` is a collection of all attributes.
384384

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:
386386

387387
- We need a non-standard attribute. But if it starts with `data-`, then we should use `dataset`.
388388
- 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

Comments
 (0)