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
This method works similarly to the `createElement` method as the generic parameter `T` is inferred from the `newChild` argument. `T` is _constrained_ to another base interface `Node`.
117
117
118
-
## Difference between `children` and `childNodes`
118
+
## `children`κ³Ό `childNodes`μ μ°¨μ΄μ (Difference between `children` and `childNodes`)
119
119
120
-
Previously, this document details the `HTMLElement`interface extends from`Element` which extends from `Node`. In the DOM API there is a concept of _children_ elements. For example in the following HTML, the `p`tags are children of the `div`element
After capturing the `div`element, the `children`prop will return a `HTMLCollection`list containing the `HTMLParagraphElements`. The `childNodes`property will return a similar`NodeList` list of nodes. Each`p`tag will still be of type `HTMLParagraphElements`, but the `NodeList` can contain additional _HTML nodes_ that the `HTMLCollection` list cannot.
See how both lists change. `children` now only contains the `<p>Hello, World</p>`element, and the`childNodes` contains a `text` node rather than two `p`nodes. The`text`part of the`NodeList` is the literal `Node` containing the text `TypeScript!`. The `children`list does not contain this `Node` because it is not considered an `HTMLElement`.
Both of these methods are great tools for getting lists of dom elements that fit a more unique set of constraints. They are defined in _lib.dom.d.ts_as:
The`querySelectorAll`definition is similar to `getElementByTagName`, except it returns a new type: `NodeListOf`. This return type is essentially a custom implementation of the standard JavaScript list element. Arguably, replacing `NodeListOf<E>` with `E[]` would result in a very similar user experience. `NodeListOf` only implements the following properties and methods: `length` , `item(index)`, `forEach((value, key, parent) =>void)` , and numeric indexing. Additionally, this method returns a list of _elements_ not _nodes_, which is what `NodeList` was returning from the`.childNodes`method. While this may appear as a discrepancy, take note that interface `Element`extends from `Node`.
## λ μμΈν μκ³ μΆμΌμλκΉ? (Interested in learning more?)
194
194
195
-
The best part about the _lib.dom.d.ts_ type definitions is that they are reflective of the types annotated in the Mozilla Developer Network (MDN) documentation site. For example, the `HTMLElement`interface is documented by this [HTMLElement page](https://developer.mozilla.org/docs/Web/API/HTMLElement) on MDN. These pages list all available properties, methods, and sometimes even examples. Another great aspect of the pages is that they provide links to the corresponding standard documents. Here is the link to the [W3C Recommendation for HTMLElement](https://www.w3.org/TR/html52/dom.html#htmlelement).
0 commit comments