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/05-basic-dom-node-properties/article.md
+12-12
Original file line number
Diff line number
Diff line change
@@ -78,7 +78,7 @@ Try it on `document.body`.
78
78
```
79
79
80
80
````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.
82
82
83
83
In IDL all properties are prepended with their types. For instance, `DOMString`, `boolean` and so on.
84
84
@@ -165,19 +165,19 @@ Sure, the difference is reflected in their names, but is indeed a bit subtle.
165
165
- The `tagName` property exists only for `Element` nodes.
166
166
- The `nodeName` is defined for any `Node`:
167
167
- 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.
169
169
170
170
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.
171
171
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:
@@ -220,7 +220,7 @@ The example shows the contents of `document.body` and then replaces it completel
220
220
</body>
221
221
```
222
222
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:
224
224
225
225
```html run
226
226
<body>
@@ -463,35 +463,35 @@ Most standard HTML attributes have the corresponding DOM property, and we can ac
463
463
464
464
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>.
465
465
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.
467
467
468
468
## Summary
469
469
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.
471
471
472
472
Main DOM node properties are:
473
473
474
474
`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.
476
476
477
477
`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.
479
479
480
480
`innerHTML`
481
-
: The HTML content of the element. Can modify.
481
+
: The HTML content of the element. Can be modified.
482
482
483
483
`outerHTML`
484
484
: 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.
485
485
486
486
`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.
488
488
489
489
`textContent`
490
490
: 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.
491
491
492
492
`hidden`
493
493
: When set to `true`, does the same as CSS `display:none`.
494
494
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.
496
496
497
497
But HTML attributes and DOM properties are not always the same, as we'll see in the next chapter.
0 commit comments