Skip to content

Commit

Permalink
Merge pull request #1223 from ccconac/ccconac3
Browse files Browse the repository at this point in the history 
39-2μž₯ DOM - λ¬Έμ†Œν¬
  • Loading branch information
@Ryan-Dia
Ryan-Dia authored Jan 17, 2024
2 parents 0fdff91 + 7fd37d7 commit 63ded9e
Showing 1 changed file with 137 additions and 0 deletions.
137 changes: 137 additions & 0 deletions docs/39_DOM/λ¬Έμ†Œν¬.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,143 @@ input μš”μ†Œ λ…Έλ“œ κ°μ²΄λŠ” μ•„λž˜ 그림처럼 ν”„λ‘œν† νƒ€μž… 체인에 있
| μ›Ή λ¬Έμ„œμ˜ μš”μ†Œ μ€‘μ—μ„œ HTML μš”μ†Œλ₯Ό ν‘œν˜„ν•˜λŠ” 객체 | HTMLElement |
| HTML μš”μ†Œ μ€‘μ—μ„œ input μš”μ†Œλ₯Ό ν‘œν˜„ν•˜λŠ” 객체 | HTMLInputElement |

## πŸ”Ž 2. μš”μ†Œ λ…Έλ“œ 취득

> μš”μ†Œ λ…Έλ“œμ˜ 취득은 HTML μš”μ†Œλ₯Ό μ‘°μž‘ν•˜λŠ” μ‹œμž‘μ μœΌλ‘œ, DOM은 이λ₯Ό μœ„ν•΄ μš”μ†Œ λ…Έλ“œλ₯Ό 취득할 수 μžˆλŠ” λ‹€μ–‘ν•œ λ©”μ„œλ“œλ₯Ό μ œκ³΅ν•œλ‹€.
### πŸ’¬ 1. idλ₯Ό μ΄μš©ν•œ μš”μ†Œ λ…Έλ“œ 취득

> `Document.prototype.getElementById` λ©”μ„œλ“œλŠ” 인수둜 μ „λ‹¬ν•œ id μ–΄νŠΈλ¦¬λ·°νŠΈ 값을 κ°–λŠ” ν•˜λ‚˜μ˜ μš”μ†Œ λ…Έλ“œλ₯Ό νƒμƒ‰ν•˜μ—¬ λ°˜ν™˜ν•œλ‹€. `getElementById` λ©”μ„œλ“œλŠ” μ–Έμ œλ‚˜ 단 ν•˜λ‚˜μ˜ μš”μ†Œ λ…Έλ“œλ₯Ό λ°˜ν™˜ν•œλ‹€.
id 값은 HTML λ¬Έμ„œ λ‚΄μ—μ„œ μœ μΌν•œ 값이어야 ν•˜κ³  곡백으둜 κ΅¬λΆ„ν•œ μ—¬λŸ¬ 개의 κ°’ λ˜ν•œ κ°€μ§ˆ 수 μ—†λ‹€. 단, μ—λŸ¬λŠ” λ°œμƒν•˜μ§€ μ•ŠμœΌλ―€λ‘œ μ€‘λ³΅λœ id 값을 가진 μš”μ†Œκ°€ μ‘΄μž¬ν•  κ°€λŠ₯성이 μ—†λŠ” 것은 μ•„λ‹ˆλ©°, 만일 μ€‘λ³΅λ˜λŠ” κ²½μš°μ—λŠ” 첫 번째 μš”μ†Œ λ…Έλ“œλ§Œ λ°˜ν™˜ν•œλ‹€.

```html
<!doctype html>
<html>
<body>
<ul>
<li id="banana">Apple</li>
<li id="banana">Banana</li>
<li id="banana">Orange</li>
</ul>
<script>
// 첫 번째 li μš”μ†Œκ°€ νŒŒμ‹±λ˜μ–΄ μƒμ„±λœ μš”μ†Œ λ…Έλ“œ λ°˜ν™˜
const $elem = document.getElementById('banana');
// 인수둜 μ „λ‹¬λœ id 값을 κ°–λŠ” HTML μš”μ†Œκ°€ μ‘΄μž¬ν•˜μ§€ μ•ŠλŠ” 경우 getElementById λ©”μ„œλ“œ null λ°˜ν™˜
const $elem2 = document.getElementById('grape');
$elem.style.color = 'red';
$elem2.style.color = 'red';
// β†’ TypeError: Cannot read property 'style' of null
</script>
</body>
</html>
```

HTML μš”μ†Œμ— id μ–΄νŠΈλ¦¬λ·°νŠΈλ₯Ό λΆ€μ—¬ν•˜λ©΄ id κ°’κ³Ό λ™μΌν•œ μ΄λ¦„μ˜ μ „μ—­ λ³€μˆ˜κ°€ μ•”λ¬΅μ μœΌλ‘œ μ„ μ–Έλ˜κ³  ν•΄λ‹Ή λ…Έλ“œ 객체가 ν• λ‹Ήλ˜λŠ” λΆ€μˆ˜ νš¨κ³Όκ°€ μžˆλ‹€. 단, id κ°’κ³Ό λ™μΌν•œ μ΄λ¦„μ˜ μ „μ—­ λ³€μˆ˜κ°€ 이미 μ„ μ–Έλ˜μ–΄ 있으면 이 μ „μ—­ λ³€μˆ˜μ— λ…Έλ“œ 객체가 μž¬ν• λ‹Ήλ˜μ§€ μ•ŠλŠ”λ‹€.

```html
<!doctype html>
<html>
<body>
<div id="foo"></div>
<script>
// id κ°’κ³Ό λ™μΌν•œ μ΄λ¦„μ˜ μ „μ—­ λ³€μˆ˜κ°€ μ•”λ¬΅μ μœΌλ‘œ μ„ μ–Έλ˜κ³  ν•΄λ‹Ή λ…Έλ“œ 객체가 할당됨
console.log(foo === document.getElementById('foo')); // true
// 암묡적 μ „μ—­μœΌλ‘œ μƒμ„±λœ μ „μ—­ ν”„λ‘œνΌν‹°λŠ” μ‚­μ œλ˜μ§€λ§Œ μ „μ—­ λ³€μˆ˜λŠ” μ‚­μ œλ˜μ§€ μ•ŠμŒ
delete foo;
console.log(foo); // <div id="foo"></div>
let foo = 1;
console.log(foo); // 1
</script>
</body>
</html>
```

### πŸ’¬ 2. νƒœκ·Έ 이름을 μ΄μš©ν•œ μš”μ†Œ λ…Έλ“œ 취득

> `Document.prototype/Element.prototype.getElementsByTagName` λ©”μ„œλ“œλŠ” 인수둜 μ „λ‹¬ν•œ νƒœκ·Έ 이름을 κ°–λŠ” λͺ¨λ“  μš”μ†Œ λ…Έλ“œλ“€μ„ νƒμƒ‰ν•˜μ—¬ λ°˜ν™˜ν•œλ‹€.
`getElementsByTagName` λ©”μ„œλ“œλŠ” μ—¬λŸ¬ 개의 μš”μ†Œ λ…Έλ“œ 객체λ₯Ό κ°–λŠ” DOM μ»¬λ ‰μ…˜ 객체인 `HTMLCollection` 객체λ₯Ό λ°˜ν™˜ν•œλ‹€. μ΄λ•Œ `HTMLCollection` κ°μ²΄λŠ” μœ μ‚¬ λ°°μ—΄ κ°μ²΄μ΄λ©΄μ„œ μ΄ν„°λŸ¬λΈ”μ΄λ‹€.

- `Document.prototype.getElementsByTagName`: DOM의 루트 λ…Έλ“œμΈ λ¬Έμ„œ λ…Έλ“œ, 즉 documentλ₯Ό 톡해 ν˜ΈμΆœν•˜λ©° DOM μ „μ²΄μ—μ„œ μš”μ†Œ λ…Έλ“œλ₯Ό 탐색헀 λ°˜ν™˜ν•œλ‹€.
- `Element.prototype.getElementsByTagName`: νŠΉμ • μš”μ†Œ λ…Έλ“œλ₯Ό 톡해 ν˜ΈμΆœν•˜λ©°, νŠΉμ • μš”μ†Œ λ…Έλ“œμ˜ μžμ† λ…Έλ“œ μ€‘μ—μ„œ μš”μ†Œ λ…Έλ“œλ₯Ό νƒμƒ‰ν•˜μ—¬ λ°˜ν™˜ν•œλ‹€.

만일 인수둜 μ „λ‹¬λœ νƒœκ·Έ 이름을 κ°–λŠ” μš”μ†Œκ°€ μ‘΄μž¬ν•˜μ§€ μ•ŠλŠ”λ‹€λ©΄ `getElementsByTagName` λ©”μ„œλ“œλŠ” 빈 `HTMLCollection` 객체λ₯Ό λ°˜ν™˜ν•œλ‹€.

```html
<!doctype html>
<html>
<body>
<ul id="fruits">
<li id="banana">Apple</li>
<li id="banana">Banana</li>
<li id="banana">Orange</li>
</ul>
<ul>
<li>HTML</li>
</ul>
<script>
// DOM μ „μ²΄μ—μ„œ νƒœκ·Έ 이름이 li인 μš”μ†Œ λ…Έλ“œ λͺ¨λ‘ 탐색해 λ°˜ν™˜
const $lisFromDocument = document.getElementsByTagName('li'); // HTMLCollection(4) [li, li, li, li]
// ul#fruits μš”μ†Œμ˜ μžμ† λ…Έλ“œ 쀑 νƒœκ·Έ 이름이 li인 λͺ¨λ“  μš”μ†Œ λ…Έλ“œ λͺ¨λ‘ 탐색해 λ°˜ν™˜
const $fruits = document.getElementById('fruits');
const $lisFromFruits = $fruits.getElementsByTagName('li');
console.log($lisFromFruits); // HTMLCollection(3) [li, li, li]
</script>
</body>
</html>
```

### πŸ’¬ 3. classλ₯Ό μ΄μš©ν•œ μš”μ†Œ λ…Έλ“œ 취득

> `Document.prototype/Element.prototype.getElementsByClassName` λ©”μ„œλ“œλŠ” 인수둜 μ „λ‹¬ν•œ class μ–΄νŠΈλ¦¬λ·°νŠΈ 값을 κ°–λŠ” λͺ¨λ“  μš”μ†Œλ“€μ„ 탐색해 λ°˜ν™˜ν•˜λ©°, class 값은 곡백으둜 ꡬ뢄해 μ—¬λŸ¬ 개λ₯Ό 지정할 수 μžˆλ‹€.
`getElementsByClassName` λ©”μ„œλ“œλŠ” μ—¬λŸ¬ 개의 μš”μ†Œ λ…Έλ“œ 객체λ₯Ό κ°–λŠ” DOM μ»¬λ ‰μ…˜ 객체인 `HTMLCollection` 객체λ₯Ό λ°˜ν™˜ν•œλ‹€. `Document.prototype`κ³Ό `Element.prototype`의 μ°¨μ΄λŠ” `getElementsByTagName` λ©”μ„œλ“œμ™€ κ°™λ‹€.

```html
<!doctype html>
<html>
<body>
<ul id="fruits">
<li class="fruit apple">Apple</li>
<li class="fruit banana">Banana</li>
<li class="fruit orange">Orange</li>
</ul>
<div class="banana">Banana</div>
<script>
// class 값이 'fruit'인 μš”μ†Œ λ…Έλ“œ λͺ¨λ‘ 탐색해 HTMLCollection 객체에 λ‹΄μ•„ λ°˜ν™˜
const $elems = document.getElementByClassName('fruit');
[...$elems].forEach((elem) => {
elem.style.color = 'red';
});
// class 값이 'fruit apple'인 μš”μ†Œ λ…Έλ“œ λͺ¨λ‘ 탐색해 HTMLCollection 객체에 λ‹΄μ•„ λ°˜ν™˜
const $apples = document.getElementByClassName('fruit apple');
[...$apples].forEach((elem) => {
elem.style.color = 'blue';
});
// DOM μ „μ²΄μ—μ„œ class 값이 'banana'인 μš”μ†Œ λ…Έλ“œ λͺ¨λ‘ 탐색해 λ°˜ν™˜
const $bananasFromDocument = document.getElementByClassName('banana');
console.log($bananasFromDocument); // HTMLCollection(2) [li.banana, div.banana]
// #fruits μš”μ†Œμ˜ μžμ† λ…Έλ“œ 쀑 class 값이 'banana'인 μš”μ†Œ λ…Έλ“œ λͺ¨λ‘ 탐삭해 λ°˜ν™˜
const $fruits = document.getElementById('fruits');
const $bananasFromFruits = $fruits.getElementByClassName('banana');
console.log($bananasFromFruits); // HTMLCollection [li.banana]
</script>
</body>
</html>
```

## πŸ‘€ REFERENCE

λͺ¨λ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ Deep Dive 39μž₯ DOM

0 comments on commit 63ded9e

Please sign in to comment.