Skip to content

Commit 1f3b7cd

Browse files
authored
Small readability and language improvements
1 parent 2a3182a commit 1f3b7cd

File tree

1 file changed

+12
-12
lines changed
  • 2-ui/1-document/05-basic-dom-node-properties

1 file changed

+12
-12
lines changed

2-ui/1-document/05-basic-dom-node-properties/article.md

+12-12
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ Try it on `document.body`.
7878
```
7979
8080
````smart header="IDL in the spec"
81-
In the specification classes are described using not JavaScript, but a special [Interface description language](https://en.wikipedia.org/wiki/Interface_description_language) (IDL), that is usually easy to understand.
81+
In the specification, classes are described not using JavaScript, but a special [Interface description language](https://en.wikipedia.org/wiki/Interface_description_language) (IDL), that is usually easy to understand.
8282
8383
In IDL all properties are prepended with their types. For instance, `DOMString`, `boolean` and so on.
8484
@@ -165,19 +165,19 @@ Sure, the difference is reflected in their names, but is indeed a bit subtle.
165165
- The `tagName` property exists only for `Element` nodes.
166166
- The `nodeName` is defined for any `Node`:
167167
- for elements it means the same as `tagName`.
168-
- for other node types (text, comment etc) it has a string with the node type.
168+
- for other node types (text, comment, etc.) it has a string with the node type.
169169
170170
In other words, `tagName` is only supported by element nodes (as it originates from `Element` class), while `nodeName` can say something about other node types.
171171
172-
For instance let's compare `tagName` and `nodeName` for the `document` and a comment node:
172+
For instance, let's compare `tagName` and `nodeName` for the `document` and a comment node:
173173
174174
175175
```html run
176176
<body><!-- comment -->
177177
178178
<script>
179179
// for comment
180-
alert( document.body.firstChild.tagName ); // undefined (not element)
180+
alert( document.body.firstChild.tagName ); // undefined (no element)
181181
alert( document.body.firstChild.nodeName ); // #comment
182182
183183
// for document
@@ -220,7 +220,7 @@ The example shows the contents of `document.body` and then replaces it completel
220220
</body>
221221
```
222222
223-
We can try to insert an invalid HTML, the browser will fix our errors:
223+
We can try to insert invalid HTML, the browser will fix our errors:
224224
225225
```html run
226226
<body>
@@ -463,35 +463,35 @@ Most standard HTML attributes have the corresponding DOM property, and we can ac
463463
464464
If we want to know the full list of supported properties for a given class, we can find them in the specification. For instance, HTMLInputElement is documented at <https://html.spec.whatwg.org/#htmlinputelement>.
465465
466-
Or if we'd like to get them fast or interested in the concrete browser -- we can always output the element using `console.dir(elem)` and read the properties. Or explore "DOM properties" in Elements tab of the browser developer tools.
466+
Or if we'd like to get them fast or are interested in a concrete browser specification -- we can always output the element using `console.dir(elem)` and read the properties. Or explore "DOM properties" in the Elements tab of the browser developer tools.
467467
468468
## Summary
469469
470-
Each DOM node belongs to a certain class. The classes form a hierarchy. The full set of properties and methods comes as the result of inheritance.
470+
Each DOM node belongs to a certain class. The classes form a hierarchy. The full set of properties and methods come as the result of inheritance.
471471
472472
Main DOM node properties are:
473473
474474
`nodeType`
475-
: Node type. We can get it from the DOM object class, but often we need just to see if it is a text or element node. The `nodeType` property is good for that. It has numeric values, most important are: `1` -- for elements,`3` -- for text nodes. Read-only.
475+
: We can get `nodeType` from the DOM object class, but often we need just to see if it is a text or element node. The `nodeType` property is good for that. It has numeric values, most important are: `1` -- for elements,`3` -- for text nodes. Read-only.
476476
477477
`nodeName/tagName`
478-
: For elements, tag name (uppercased unless XML-mode). For non-element nodes `nodeName` describes what is it. Read-only.
478+
: For elements, tag name (uppercased unless XML-mode). For non-element nodes `nodeName` describes what it is. Read-only.
479479
480480
`innerHTML`
481-
: The HTML content of the element. Can modify.
481+
: The HTML content of the element. Can be modified.
482482
483483
`outerHTML`
484484
: The full HTML of the element. A write operation into `elem.outerHTML` does not touch `elem` itself. Instead it gets replaced with the new HTML in the outer context.
485485
486486
`nodeValue/data`
487-
: The content of a non-element node (text, comment). These two are almost the same, usually we use `data`. Can modify.
487+
: The content of a non-element node (text, comment). These two are almost the same, usually we use `data`. Can be modified.
488488
489489
`textContent`
490490
: The text inside the element, basically HTML minus all `<tags>`. Writing into it puts the text inside the element, with all special characters and tags treated exactly as text. Can safely insert user-generated text and protect from unwanted HTML insertions.
491491
492492
`hidden`
493493
: When set to `true`, does the same as CSS `display:none`.
494494
495-
DOM nodes also have other properties depending on their class. For instance, `<input>` elements (`HTMLInputElement`) support `value`, `type`, while `<a>` elements (`HTMLAnchorElement`) support `href` etc. Most standard HTML attributes have the corresponding DOM property.
495+
DOM nodes also have other properties depending on their class. For instance, `<input>` elements (`HTMLInputElement`) support `value`, `type`, while `<a>` elements (`HTMLAnchorElement`) support `href` etc. Most standard HTML attributes have a corresponding DOM property.
496496
497497
But HTML attributes and DOM properties are not always the same, as we'll see in the next chapter.

0 commit comments

Comments
 (0)