Skip to content

Commit 3f967b4

Browse files
ss-wonguyeolbumkeyydvlprsh
authored
translate: Dom Manipulation(~ end) (#183)
* translate: Dom Manipulation(~ end) * first translation(9/7) * 2μ°¨ κ²€ν† , λ§žμΆ€λ²•κ²€μ‚¬, lint 검사(9/8) * μ˜€νƒ€ μž¬κ²€ν†  * Update pages/tutorials/dom-manipulation.md * μ œμ•ˆ 반영 Co-authored-by: GuyeolJeong <[email protected]> * Update pages/tutorials/dom-manipulation.md * μ œμ•ˆ 반영 Co-authored-by: GuyeolJeong <[email protected]> * Update pages/tutorials/dom-manipulation.md * μ½”λ“œ 리뷰 μ œμ•ˆ 반영 Co-authored-by: Kibeom Kwon <[email protected]> * Update pages/tutorials/dom-manipulation.md * μ œμ•ˆλ°˜μ˜ Co-authored-by: Kibeom Kwon <[email protected]> * Update pages/tutorials/dom-manipulation.md * μ œμ•ˆλ°˜μ˜ Co-authored-by: Kibeom Kwon <[email protected]> * Update pages/tutorials/dom-manipulation.md * line 197 λ²ˆμ—­ λˆ„λ½ μˆ˜μ • * Update pages/tutorials/dom-manipulation.md Co-authored-by: GuyeolJeong <[email protected]> Co-authored-by: Kibeom Kwon <[email protected]> Co-authored-by: Seohee Park <[email protected]>
1 parent ef7441f commit 3f967b4

File tree

1 file changed

+17
-17
lines changed

1 file changed

+17
-17
lines changed

β€Žpages/tutorials/dom-manipulation.md

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -115,9 +115,9 @@ appendChild<T extends Node>(newChild: T): T;
115115
116116
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`.
117117
118-
## Difference between `children` and `childNodes`
118+
## `children`과 `childNodes`의 차이점 (Difference between `children` and `childNodes`)
119119
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
120+
이전에 이 λ¬Έμ„œλŠ” `HTMLElement` μΈν„°νŽ˜μ΄μŠ€κ°€ `Node`λ‘œλΆ€ν„° ν™•μž₯된 `Element`μ—μ„œ ν™•μž₯된 κ°œλ…μ΄λΌκ³  μ„€λͺ…ν–ˆμŠ΅λ‹ˆλ‹€. DOM APIμ—λŠ” _μžμ‹(children)_ μš”μ†Œ κ°œλ…μ΄ μžˆμŠ΅λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄ HTMLμ—μ„œ `p` νƒœκ·ΈλŠ” `div` μš”μ†Œμ˜ μžμ‹μž…λ‹ˆλ‹€.
121121
122122
```tsx
123123
<div>
@@ -134,9 +134,9 @@ div.childNodes;
134134
// NodeList(2) [p, p]
135135
```
136136

137-
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.
137+
`div` μš”μ†Œλ₯Ό μ°Ύμ•„λ‚Έ ν›„ `children` ν”„λ‘œνΌν‹°λŠ” `HTMLParagraphElements`λ₯Ό ν¬ν•¨ν•˜λŠ” `HTMLCollection` 리슀트λ₯Ό λ°˜ν™˜ν•©λ‹ˆλ‹€. `childNodes` ν”„λ‘œνΌν‹°λŠ” μœ„μ™€ μœ μ‚¬ν•˜κ²Œ λ…Έλ“œ 리슀트인 `NodeList`λ₯Ό λ°˜ν™˜ν•©λ‹ˆλ‹€. 각 `p` νƒœκ·ΈλŠ” μ—¬μ „νžˆ `HTMLParagraphElements` νƒ€μž…μ΄μ§€λ§Œ, `NodeList`λŠ” μΆ”κ°€μ μœΌλ‘œ `HTMLCollection` λ¦¬μŠ€νŠΈμ—λŠ” μ—†λŠ” _HTML λ…Έλ“œ_ λ₯Ό 포함할 수 μžˆμŠ΅λ‹ˆλ‹€.
138138

139-
Modify the html by removing one of the `p` tags, but keep the text.
139+
`p` νƒœκ·Έ 쀑 ν•˜λ‚˜λ₯Ό μ œκ±°ν•˜μ—¬ html을 μˆ˜μ •ν•˜λ˜ ν…μŠ€νŠΈλŠ” κ·ΈλŒ€λ‘œ μœ μ§€ν•˜μ‹­μ‹œμ˜€.
140140

141141
```tsx
142142
<div>
@@ -153,31 +153,31 @@ div.childNodes;
153153
// NodeList(2) [p, text]
154154
```
155155

156-
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`.
156+
μ–΄λ–»κ²Œ 두 개의 λ¦¬μŠ€νŠΈκ°€ λ³€ν–ˆλŠ”μ§€ λ³΄κ² μŠ΅λ‹ˆλ‹€. `children`은 ν˜„μž¬ `<p>Hello, World</p>` μš”μ†Œλ§Œμ„ ν¬ν•¨ν•˜κ³  있고, `childNodes`λŠ” 두 개의 `p` λ…Έλ“œκ°€ μ•„λ‹Œ `text` λ…Έλ“œλ₯Ό ν¬ν•¨ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€. `NodeList`μ—μ„œ `text` 뢀뢄은 `TypeScript!` ν…μŠ€νŠΈλ₯Ό ν¬ν•¨ν•˜λŠ” 문자 κ·ΈλŒ€λ‘œμ˜ `Node`μž…λ‹ˆλ‹€. `children` λ¦¬μŠ€νŠΈλŠ” 이 `Node`λ₯Ό ν¬ν•¨ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. μ™œλƒν•˜λ©΄ `HTMLElement`둜 κ°„μ£Όν•˜μ§€ μ•ŠκΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€.
157157

158-
## The `querySelector` and `querySelectorAll` methods
158+
## `querySelector`와 `querySelectorAll` λ©”μ„œλ“œ (The `querySelector` and `querySelectorAll` methods)
159159

160-
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:
160+
두 개의 λ©”μ„œλ“œ λͺ¨λ‘ κ³ μœ ν•œ μ œμ•½ 쑰건 집합에 μ ν•©ν•œ 돔 μš”μ†Œ 리슀트λ₯Ό κ°€μ Έμ˜€λŠ” 데 쒋은 λ„κ΅¬μž…λ‹ˆλ‹€. λ©”μ„œλ“œλ“€μ€ _lib.dom.d.ts_ 에 λ‹€μŒκ³Ό 같이 μ •μ˜λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€:
161161

162162
```ts
163163
/**
164-
* Returns the first element that is a descendant of node that matches selectors.
164+
* μ„ νƒμžμ™€ μΌμΉ˜ν•˜λŠ” λ…Έλ“œμ˜ μžμ‹ 쀑 첫 번째 μš”μ†Œλ₯Ό λ°˜ν™˜ν•©λ‹ˆλ‹€.
165165
*/
166166
querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
167167
querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
168168
querySelector<E extends Element = Element>(selectors: string): E | null;
169169

170170
/**
171-
* Returns all element descendants of node that match selectors.
171+
* μ„ νƒμžμ™€ μΌμΉ˜ν•˜λŠ” λͺ¨λ“  λ…Έλ“œ μžμ‹ μš”μ†Œλ₯Ό λ°˜ν™˜ν•©λ‹ˆλ‹€.
172172
*/
173173
querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
174174
querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
175175
querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
176176
```
177177
178-
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`.
178+
`querySelectorAll` μ •μ˜λŠ” `NodeListOf`λΌλŠ” μƒˆλ‘œμš΄ νƒ€μž…μ„ λ°˜ν™˜ν•œλ‹€λŠ” 점을 μ œμ™Έν•˜λ©΄ `getElementByTagName`κ³Ό μœ μ‚¬ν•©λ‹ˆλ‹€. 이 λ°˜ν™˜ νƒ€μž…μ€ 기본적으둜 ν‘œμ€€ JavaScript 리슀트 μš”μ†Œμ˜ λ§žμΆ€ν˜•μœΌλ‘œ κ΅¬ν˜„λ˜μ—ˆμŠ΅λ‹ˆλ‹€. `NodeListOf<E>`λ₯Ό `E[]`둜 바꿔보면 틀림없이 맀우 μœ μ‚¬ν•œ μ‚¬μš©μž κ²½ν—˜μ„ μ œκ³΅ν•  κ²ƒμž…λ‹ˆλ‹€. `NodeListOf`λŠ” `length` , `item(index)`, `forEach((value, key, parent) => void)` , 그리고 숫자 인덱슀 생성과 같은 ν”„λ‘œνΌν‹° 및 λ©”μ„œλ“œλ§Œμ„ κ΅¬ν˜„ν•©λ‹ˆλ‹€. λ˜ν•œ, λ©”μ„œλ“œλŠ” _λ…Έλ“œ_ κ°€ μ•„λ‹Œ _μš”μ†Œ_ 리슀트λ₯Ό λ°˜ν™˜ν•˜λ©° μ΄λŠ” `.childNodes` λ©”μ„œλ“œμ—μ„œ `NodeList`κ°€ λ°˜ν™˜ν•œ κ²ƒμž…λ‹ˆλ‹€. λͺ¨μˆœμ²˜λŸΌ 보일 수 μžˆμ§€λ§Œ, `Element` μΈν„°νŽ˜μ΄μŠ€λŠ” `Node`μ—μ„œ ν™•μž₯된 점에 μœ μ˜ν•΄μ•Ό ν•©λ‹ˆλ‹€.
179179
180-
To see these methods in action modify the existing code to:
180+
두 개의 λ©”μ„œλ“œκ°€ λ™μž‘ν•˜λŠ” 것을 보렀면 κΈ°μ‘΄ μ½”λ“œλ₯Ό λ‹€μŒκ³Ό 같이 μˆ˜μ •ν•˜μ‹­μ‹œμ˜€:
181181
182182
```tsx
183183
<ul>
@@ -186,15 +186,15 @@ To see these methods in action modify the existing code to:
186186
<li>Third times a charm.</li>
187187
</ul>;
188188

189-
const first = document.querySelector("li"); // returns the first li element
190-
const all = document.querySelectorAll("li"); // returns the list of all li elements
189+
const first = document.querySelector("li"); // 첫 번째 li μš”μ†Œλ₯Ό λ°˜ν™˜ν•©λ‹ˆλ‹€.
190+
const all = document.querySelectorAll("li"); // λͺ¨λ“  li μš”μ†Œλ₯Ό ν¬ν•¨ν•˜λŠ” 리슀트λ₯Ό λ°˜ν™˜ν•©λ‹ˆλ‹€.
191191
```
192192
193-
## Interested in learning more?
193+
## 더 μžμ„Ένžˆ μ•Œκ³  μ‹ΆμœΌμ‹­λ‹ˆκΉŒ? (Interested in learning more?)
194194
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).
195+
_lib.dom.d.ts_ νƒ€μž… μ •μ˜μ—μ„œ κ°€μž₯ 쒋은 뢀뢄은 Mozilla Developer Network (MDN) λ¬Έμ„œ μ‚¬μ΄νŠΈμ— ν‘œκΈ°λœ νƒ€μž…λ“€μ„ λ°˜μ˜ν–ˆλ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄, `HTMLElement` μΈν„°νŽ˜μ΄μŠ€λŠ” MDNμ—μ„œ [HTMLElement νŽ˜μ΄μ§€](https://developer.mozilla.org/docs/Web/API/HTMLElement)에 λ¬Έμ„œν™” λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€. 이 νŽ˜μ΄μ§€μ—λŠ” μ‚¬μš© κ°€λŠ₯ν•œ λͺ¨λ“  ν”„λ‘œνΌν‹°, λ©”μ„œλ“œ, λ•Œλ‘œλŠ” μ˜ˆμ‹œκΉŒμ§€ μ œκ³΅ν•©λ‹ˆλ‹€. ν•΄λ‹Ή νŽ˜μ΄μ§€κ°€ ν›Œλ₯­ν•œ λ‹€λ₯Έ 면은 ν‘œμ€€ λ¬Έμ„œμ— λ§žλŠ” 링크λ₯Ό μ œκ³΅ν•œλ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€. λ‹€μŒμ€ [HTMLElement의 W3C ꢌμž₯사항](https://www.w3.org/TR/html52/dom.html#htmlelement)에 λŒ€ν•œ λ§ν¬μž…λ‹ˆλ‹€.
196196
197-
Sources:
197+
μ†ŒμŠ€μ½”λ“œ μ°Έμ‘°:
198198
199199
* [ECMA-262 Standard](http://www.ecma-international.org/ecma-262/10.0/index.html)
200-
* [Introduction to the DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)
200+
* [Introduction to the DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)

0 commit comments

Comments
Β (0)