From 20d2f5dbf665d38cbc85fa5c48c7af5a7f86b6f9 Mon Sep 17 00:00:00 2001 From: Sowon Jung Date: Mon, 7 Sep 2020 22:43:03 +0900 Subject: [PATCH 1/8] translate: Dom Manipulation(~ end) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * first translation(9/7) * 2차 검토, 맞춤법검사, lint 검사(9/8) * 오타 재검토 --- pages/tutorials/dom-manipulation.md | 30 ++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/pages/tutorials/dom-manipulation.md b/pages/tutorials/dom-manipulation.md index eb5b7e31..446212b9 100644 --- a/pages/tutorials/dom-manipulation.md +++ b/pages/tutorials/dom-manipulation.md @@ -115,9 +115,9 @@ appendChild(newChild: T): T; 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`. -## Difference between `children` and `childNodes` +## `children`과 `childNodes`의 차이점 (Difference between `children` and `childNodes`) -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 +이전에 이 문서는 `HTMLElement` 인터페이스가 `Node`로부터 확장된 `Element`에서 확장된 개념이라는 것을 기술하고 있었습니다. DOM API에는 _자식(children)_ 요소 개념이 있습니다. 예를 들어 HTML에서 `p` 태그는 `div` 요소의 자식입니다. ```tsx
@@ -134,9 +134,9 @@ div.childNodes; // NodeList(2) [p, p] ``` -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. +`div` 요소를 찾아낸 후 `children` 프로퍼티는 `HTMLParagraphElements`를 포함하는 `HTMLCollection` 리스트를 반환합니다. `childNodes` 프로퍼티는 위와 유사하게 노드를 포함하는 `NodeList` 리스트를 반환합니다. 각 `p` 태그는 여전히 `HTMLParagraphElements` 타입이지만, `NodeList`는 추가적으로 `HTMLCollection` 리스트에는 없는 _HTML 노드_ 를 포함할 수 있습니다. -Modify the html by removing one of the `p` tags, but keep the text. +`p` 태그 중 하나를 제거하여 html을 수정하되 텍스트는 그대로 유지하십시오. ```tsx
@@ -153,31 +153,31 @@ div.childNodes; // NodeList(2) [p, text] ``` -See how both lists change. `children` now only contains the `

Hello, World

` 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`. +어떻게 두 개의 리스트가 변했는지 보겠습니다. `children`은 현재 `

Hello, World

` 요소만을 포함하고 있고, `childNodes`는 두 개의 `p` 노드가 아닌 `text` 노드를 포함하고 있습니다. `NodeList`에서 `text` 부분은 `TypeScript!` 텍스트를 포함하는 문자 그대로의 `Node`입니다. `children` 리스트는 이 `Node`를 포함하지 않습니다. 왜냐하면 `HTMLElement`로 간주하지 않기 때문입니다. -## The `querySelector` and `querySelectorAll` methods +## `querySelector`와 `querySelectorAll` 메서드 (The `querySelector` and `querySelectorAll` methods) -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: +두 개의 메서드 모두 고유한 제약 조건 집합에 적합한 돔 요소 리스트를 가져오는 데 좋은 도구입니다. 메서드들은 _lib.dom.d.ts_ 에 다음과 같이 정의되어 있습니다: ```ts /** - * Returns the first element that is a descendant of node that matches selectors. + * 선택자와 일치하는 노드의 자식 중 첫 번째 요소를 반환합니다. */ querySelector(selectors: K): HTMLElementTagNameMap[K] | null; querySelector(selectors: K): SVGElementTagNameMap[K] | null; querySelector(selectors: string): E | null; /** - * Returns all element descendants of node that match selectors. + * 선택자와 일치하는 모든 노드 자식 요소를 반환합니다. */ querySelectorAll(selectors: K): NodeListOf; querySelectorAll(selectors: K): NodeListOf; querySelectorAll(selectors: string): NodeListOf; ``` -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` 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`. + `querySelectorAll` 정의는 `NodeListOf`라는 새로운 타입을 반환한다는 점을 제외하면 `getElementByTagName`과 유사합니다. 이 반환 타입은 기본적으로 표준 JavaScript 리스트 요소의 맞춤형으로 구현되었습니다. `NodeListOf`를 `E[]`로 바꿔보면 틀림없이 매우 유사한 사용자 경험을 제공할 것입니다. `NodeListOf`는 `length` , `item(index)`, `forEach((value, key, parent) => void)` , 그리고 숫자 인덱스 생성과 같은 프로퍼티 및 메서드만을 구현합니다. 또한, 메서드는 _노드_ 가 아닌 _요소_ 리스트를 반환하며 이는 `.childNodes` 메서드에서 `NodeList`가 반환한 것입니다. 모순 같아 보일 수 있지만 `Element` 인터페이스는 `Node`에서 확장된 점에 유의해야 합니다. -To see these methods in action modify the existing code to: +두 개의 메서드가 동작하는 것을 보려면 기존 코드를 다음과 같이 수정하십시오: ```tsx
    @@ -186,13 +186,13 @@ To see these methods in action modify the existing code to:
  • Third times a charm.
; -const first = document.querySelector("li"); // returns the first li element -const all = document.querySelectorAll("li"); // returns the list of all li elements +const first = document.querySelector("li"); // 첫 번째 li 요소를 반환합니다. +const all = document.querySelectorAll("li"); // 모든 li 요소를 포함하는 리스트를 반환합니다. ``` -## Interested in learning more? +## 더 자세히 알고 싶으십니까? (Interested in learning more?) -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). +_lib.dom.d.ts_ 타입 정의에서 가장 좋은 부분은 모질라 개발자 네트워크(MDN) 문서 사이트에 표기된 타입들을 반영했다는 것입니다. 예를 들어, `HTMLElement` 인터페이스는 MDN에서 [HTMLElement page](https://developer.mozilla.org/docs/Web/API/HTMLElement)에 문서화 되어 있습니다. 이 페이지에는 사용 가능한 모든 프로퍼티, 메서드, 때로는 예시까지 제공합니다. 이밖에 해당 페이지에서 탁월한 점은 표준 문서에 맞는 링크를 제공한다는 것입니다. 다음은 [W3C Recommendation for HTMLElement](https://www.w3.org/TR/html52/dom.html#htmlelement)에 대한 링크입니다. Sources: From b9b37d2421f2db5818ab9d9db6d51d3291582302 Mon Sep 17 00:00:00 2001 From: Wish Jung Date: Thu, 10 Sep 2020 23:49:27 +0900 Subject: [PATCH 2/8] Update pages/tutorials/dom-manipulation.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 제안 반영 Co-authored-by: GuyeolJeong --- pages/tutorials/dom-manipulation.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/tutorials/dom-manipulation.md b/pages/tutorials/dom-manipulation.md index 446212b9..3f6b8885 100644 --- a/pages/tutorials/dom-manipulation.md +++ b/pages/tutorials/dom-manipulation.md @@ -175,7 +175,7 @@ querySelectorAll(selectors: K): NodeListOf querySelectorAll(selectors: string): NodeListOf; ``` - `querySelectorAll` 정의는 `NodeListOf`라는 새로운 타입을 반환한다는 점을 제외하면 `getElementByTagName`과 유사합니다. 이 반환 타입은 기본적으로 표준 JavaScript 리스트 요소의 맞춤형으로 구현되었습니다. `NodeListOf`를 `E[]`로 바꿔보면 틀림없이 매우 유사한 사용자 경험을 제공할 것입니다. `NodeListOf`는 `length` , `item(index)`, `forEach((value, key, parent) => void)` , 그리고 숫자 인덱스 생성과 같은 프로퍼티 및 메서드만을 구현합니다. 또한, 메서드는 _노드_ 가 아닌 _요소_ 리스트를 반환하며 이는 `.childNodes` 메서드에서 `NodeList`가 반환한 것입니다. 모순 같아 보일 수 있지만 `Element` 인터페이스는 `Node`에서 확장된 점에 유의해야 합니다. + `querySelectorAll` 정의는 `NodeListOf`라는 새로운 타입을 반환한다는 점을 제외하면 `getElementByTagName`과 유사합니다. 이 반환 타입은 기본적으로 표준 JavaScript 리스트 요소의 맞춤형으로 구현되었습니다. `NodeListOf`를 `E[]`로 바꿔보면 틀림없이 매우 유사한 사용자 경험을 제공할 것입니다. `NodeListOf`는 `length` , `item(index)`, `forEach((value, key, parent) => void)` , 그리고 숫자 인덱스 생성과 같은 프로퍼티 및 메서드만을 구현합니다. 또한, 메서드는 _노드_ 가 아닌 _요소_ 리스트를 반환하며 이는 `.childNodes` 메서드에서 `NodeList`가 반환한 것입니다. 모순처럼 보일 수 있지만, `Element` 인터페이스는 `Node`에서 확장된 점에 유의해야 합니다. 두 개의 메서드가 동작하는 것을 보려면 기존 코드를 다음과 같이 수정하십시오: @@ -197,4 +197,4 @@ _lib.dom.d.ts_ 타입 정의에서 가장 좋은 부분은 모질라 개발자 Sources: * [ECMA-262 Standard](http://www.ecma-international.org/ecma-262/10.0/index.html) -* [Introduction to the DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) \ No newline at end of file +* [Introduction to the DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) From 9c27989cf2cc5a7472be094b21fda0b5356e98df Mon Sep 17 00:00:00 2001 From: Wish Jung Date: Thu, 10 Sep 2020 23:50:24 +0900 Subject: [PATCH 3/8] Update pages/tutorials/dom-manipulation.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 제안 반영 Co-authored-by: GuyeolJeong --- pages/tutorials/dom-manipulation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/tutorials/dom-manipulation.md b/pages/tutorials/dom-manipulation.md index 3f6b8885..8d15091b 100644 --- a/pages/tutorials/dom-manipulation.md +++ b/pages/tutorials/dom-manipulation.md @@ -192,7 +192,7 @@ const all = document.querySelectorAll("li"); // 모든 li 요소를 포함하는 ## 더 자세히 알고 싶으십니까? (Interested in learning more?) -_lib.dom.d.ts_ 타입 정의에서 가장 좋은 부분은 모질라 개발자 네트워크(MDN) 문서 사이트에 표기된 타입들을 반영했다는 것입니다. 예를 들어, `HTMLElement` 인터페이스는 MDN에서 [HTMLElement page](https://developer.mozilla.org/docs/Web/API/HTMLElement)에 문서화 되어 있습니다. 이 페이지에는 사용 가능한 모든 프로퍼티, 메서드, 때로는 예시까지 제공합니다. 이밖에 해당 페이지에서 탁월한 점은 표준 문서에 맞는 링크를 제공한다는 것입니다. 다음은 [W3C Recommendation for HTMLElement](https://www.w3.org/TR/html52/dom.html#htmlelement)에 대한 링크입니다. +_lib.dom.d.ts_ 타입 정의에서 가장 좋은 부분은 모질라 개발자 네트워크(MDN) 문서 사이트에 표기된 타입들을 반영했다는 것입니다. 예를 들어, `HTMLElement` 인터페이스는 MDN에서 [HTMLElement 페이지](https://developer.mozilla.org/docs/Web/API/HTMLElement)에 문서화 되어 있습니다. 이 페이지에는 사용 가능한 모든 프로퍼티, 메서드, 때로는 예시까지 제공합니다. 해당 페이지가 훌륭한 다른 면은 표준 문서에 맞는 링크를 제공한다는 것입니다. 다음은 [HTMLElement의 W3C 권장사항](https://www.w3.org/TR/html52/dom.html#htmlelement)에 대한 링크입니다. Sources: From cebd65b21f3123a9c5478922db6544f0ca549361 Mon Sep 17 00:00:00 2001 From: Wish Jung Date: Fri, 11 Sep 2020 03:48:13 +0900 Subject: [PATCH 4/8] Update pages/tutorials/dom-manipulation.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 코드 리뷰 제안 반영 Co-authored-by: Kibeom Kwon --- pages/tutorials/dom-manipulation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/tutorials/dom-manipulation.md b/pages/tutorials/dom-manipulation.md index 8d15091b..12b80a49 100644 --- a/pages/tutorials/dom-manipulation.md +++ b/pages/tutorials/dom-manipulation.md @@ -192,7 +192,7 @@ const all = document.querySelectorAll("li"); // 모든 li 요소를 포함하는 ## 더 자세히 알고 싶으십니까? (Interested in learning more?) -_lib.dom.d.ts_ 타입 정의에서 가장 좋은 부분은 모질라 개발자 네트워크(MDN) 문서 사이트에 표기된 타입들을 반영했다는 것입니다. 예를 들어, `HTMLElement` 인터페이스는 MDN에서 [HTMLElement 페이지](https://developer.mozilla.org/docs/Web/API/HTMLElement)에 문서화 되어 있습니다. 이 페이지에는 사용 가능한 모든 프로퍼티, 메서드, 때로는 예시까지 제공합니다. 해당 페이지가 훌륭한 다른 면은 표준 문서에 맞는 링크를 제공한다는 것입니다. 다음은 [HTMLElement의 W3C 권장사항](https://www.w3.org/TR/html52/dom.html#htmlelement)에 대한 링크입니다. +_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)에 대한 링크입니다. Sources: From 4befe5e976cad5dcaa923c042672c4c8ed3e70c5 Mon Sep 17 00:00:00 2001 From: Wish Jung Date: Fri, 11 Sep 2020 03:50:20 +0900 Subject: [PATCH 5/8] Update pages/tutorials/dom-manipulation.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 제안반영 Co-authored-by: Kibeom Kwon --- pages/tutorials/dom-manipulation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/tutorials/dom-manipulation.md b/pages/tutorials/dom-manipulation.md index 12b80a49..2e5ba5e1 100644 --- a/pages/tutorials/dom-manipulation.md +++ b/pages/tutorials/dom-manipulation.md @@ -134,7 +134,7 @@ div.childNodes; // NodeList(2) [p, p] ``` -`div` 요소를 찾아낸 후 `children` 프로퍼티는 `HTMLParagraphElements`를 포함하는 `HTMLCollection` 리스트를 반환합니다. `childNodes` 프로퍼티는 위와 유사하게 노드를 포함하는 `NodeList` 리스트를 반환합니다. 각 `p` 태그는 여전히 `HTMLParagraphElements` 타입이지만, `NodeList`는 추가적으로 `HTMLCollection` 리스트에는 없는 _HTML 노드_ 를 포함할 수 있습니다. +`div` 요소를 찾아낸 후 `children` 프로퍼티는 `HTMLParagraphElements`를 포함하는 `HTMLCollection` 리스트를 반환합니다. `childNodes` 프로퍼티는 위와 유사하게 노드 리스트인 `NodeList`를 반환합니다. 각 `p` 태그는 여전히 `HTMLParagraphElements` 타입이지만, `NodeList`는 추가적으로 `HTMLCollection` 리스트에는 없는 _HTML 노드_ 를 포함할 수 있습니다. `p` 태그 중 하나를 제거하여 html을 수정하되 텍스트는 그대로 유지하십시오. From 76aabf40c1ccafa02afc59050bc6d6f3978ed489 Mon Sep 17 00:00:00 2001 From: Wish Jung Date: Fri, 11 Sep 2020 03:50:42 +0900 Subject: [PATCH 6/8] Update pages/tutorials/dom-manipulation.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 제안반영 Co-authored-by: Kibeom Kwon --- pages/tutorials/dom-manipulation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/tutorials/dom-manipulation.md b/pages/tutorials/dom-manipulation.md index 2e5ba5e1..bfb11b35 100644 --- a/pages/tutorials/dom-manipulation.md +++ b/pages/tutorials/dom-manipulation.md @@ -117,7 +117,7 @@ This method works similarly to the `createElement` method as the generic paramet ## `children`과 `childNodes`의 차이점 (Difference between `children` and `childNodes`) -이전에 이 문서는 `HTMLElement` 인터페이스가 `Node`로부터 확장된 `Element`에서 확장된 개념이라는 것을 기술하고 있었습니다. DOM API에는 _자식(children)_ 요소 개념이 있습니다. 예를 들어 HTML에서 `p` 태그는 `div` 요소의 자식입니다. +이전에 이 문서는 `HTMLElement` 인터페이스가 `Node`로부터 확장된 `Element`에서 확장된 개념이라고 설명했습니다. DOM API에는 _자식(children)_ 요소 개념이 있습니다. 예를 들어 HTML에서 `p` 태그는 `div` 요소의 자식입니다. ```tsx
From e216c5961511246506ab522a2714886f5c685021 Mon Sep 17 00:00:00 2001 From: Sowon Jung Date: Fri, 11 Sep 2020 04:30:00 +0900 Subject: [PATCH 7/8] Update pages/tutorials/dom-manipulation.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * line 197 번역 누락 수정 --- pages/tutorials/dom-manipulation.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/tutorials/dom-manipulation.md b/pages/tutorials/dom-manipulation.md index bfb11b35..3250cfee 100644 --- a/pages/tutorials/dom-manipulation.md +++ b/pages/tutorials/dom-manipulation.md @@ -194,7 +194,7 @@ const all = document.querySelectorAll("li"); // 모든 li 요소를 포함하는 _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)에 대한 링크입니다. -Sources: +소스코드 참조: * [ECMA-262 Standard](http://www.ecma-international.org/ecma-262/10.0/index.html) -* [Introduction to the DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) +* [Introduction to the DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) \ No newline at end of file From 9c493130f5fd486eb12f5cacedf6f235c483cf5f Mon Sep 17 00:00:00 2001 From: Seohee Park Date: Fri, 11 Sep 2020 08:56:47 +0900 Subject: [PATCH 8/8] Update pages/tutorials/dom-manipulation.md --- pages/tutorials/dom-manipulation.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/tutorials/dom-manipulation.md b/pages/tutorials/dom-manipulation.md index 3250cfee..402a569f 100644 --- a/pages/tutorials/dom-manipulation.md +++ b/pages/tutorials/dom-manipulation.md @@ -134,7 +134,7 @@ div.childNodes; // NodeList(2) [p, p] ``` -`div` 요소를 찾아낸 후 `children` 프로퍼티는 `HTMLParagraphElements`를 포함하는 `HTMLCollection` 리스트를 반환합니다. `childNodes` 프로퍼티는 위와 유사하게 노드 리스트인 `NodeList`를 반환합니다. 각 `p` 태그는 여전히 `HTMLParagraphElements` 타입이지만, `NodeList`는 추가적으로 `HTMLCollection` 리스트에는 없는 _HTML 노드_ 를 포함할 수 있습니다. +`div` 요소를 찾아낸 후 `children` 프로퍼티는 `HTMLParagraphElements`를 포함하는 `HTMLCollection` 리스트를 반환합니다. `childNodes` 프로퍼티는 위와 유사하게 노드 리스트인 `NodeList`를 반환합니다. 각 `p` 태그는 여전히 `HTMLParagraphElements` 타입이지만, `NodeList`는 추가적으로 `HTMLCollection` 리스트에는 없는 _HTML 노드_ 를 포함할 수 있습니다. `p` 태그 중 하나를 제거하여 html을 수정하되 텍스트는 그대로 유지하십시오. @@ -197,4 +197,4 @@ _lib.dom.d.ts_ 타입 정의에서 가장 좋은 부분은 Mozilla Developer Net 소스코드 참조: * [ECMA-262 Standard](http://www.ecma-international.org/ecma-262/10.0/index.html) -* [Introduction to the DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) \ No newline at end of file +* [Introduction to the DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)