Search

Β JSμŠ€ν„°λ””

λ‚ μ§œ
2023/04/06
μ‹œκ°„
νƒœκ·Έ
μŠ€ν„°λ””

DOM

1. λ‹€μŒμ€ DOM의 μ •μ˜μ— κ΄€ν•œ λ‚΄μš©μž…λ‹ˆλ‹€. λΉˆμΉΈμ„ μ±„μ›Œ μ£Όμ„Έμš”.

λ¬Έμ„œ 객체 λͺ¨λΈ(DOM, Document Object Model)은 (β‘ )μ΄λ‚˜ (β‘‘ )λ¬Έμ„œμ— μ ‘κ·Όν•˜κΈ° μœ„ν•œ μΌμ’…μ˜ μΈν„°νŽ˜μ΄μŠ€μž…λ‹ˆλ‹€.
이 객체 λͺ¨λΈμ€ λ¬Έμ„œ λ‚΄μ˜ (β‘’)λ₯Ό μ •μ˜ν•˜κ³ , 각각의 μš”μ†Œμ— μ ‘κ·Όν•˜λŠ” 방법을 μ œκ³΅ν•©λ‹ˆλ‹€.

2. HTML μš”μ†Œ μ„ νƒν•˜λŠ” μ½”λ“œλ₯Ό μ¨μ£Όμ„Έμš”.

β‘  ν•΄λ‹Ή μ•„μ΄λ””μ˜ μš”μ†Œλ₯Ό μ„ νƒν•˜μ„Έμš”.
-
β‘‘ ν•΄λ‹Ήν•˜λŠ” 클래슀λ₯Ό 가진 λͺ¨λ“  μš”μ†Œλ₯Ό μ„ νƒν•˜μ„Έμš”.
-
β‘’ ν•΄λ‹Ή νƒœκ·Έ μ΄λ¦„μ˜ μš”μ†Œλ₯Ό μ„ νƒν•˜μ„Έμš”.
-

3. λ‹€μŒ μ½”λ“œλ₯Ό 보고 결과둜 μ˜³μ§€ μ•Šμ€ 것은 λ¬΄μ—‡μΈκ°€μš”?

<보기>
<h1>아이디λ₯Ό μ΄μš©ν•œ 선택</h1> <ul> <li>첫 번째 μ•„μ΄ν…œμ΄μ—μš”!</li> <li id="even">두 번째 μ•„μ΄ν…œμ΄μ—μš”!</li> <li>μ„Έ 번째 μ•„μ΄ν…œμ΄μ—μš”!</li> <li id="even">λ„€ 번째 μ•„μ΄ν…œμ΄μ—μš”!</li> <li>λ‹€μ„― 번째 μ•„μ΄ν…œμ΄μ—μš”!</li> </ul> <script> var selectedItem = document.getElementById("even"); // 아이디가 "even"인 μš”μ†Œλ₯Ό 선택함. selectedItem.style.color = "red"; // μ„ νƒλœ μš”μ†Œμ˜ ν…μŠ€νŠΈ 색상을 변경함. </script>
JavaScript
볡사
β‘  li 전체 색이 바뀐닀.
β‘‘ λ‘λ²ˆμ§Έ li만 색이 바뀐닀.
β‘’ λ‘λ²ˆμ§Έμ™€ λ„€λ²ˆμ§Έ 색이 바뀐닀.
β‘£ λ„€λ²ˆμ§Έ li만 색이 바뀐닀.

4. (o,x) 문제 μž…λ‹ˆλ‹€.

β‘  μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” HTML λ¬Έμ„œμ˜ λͺ¨λ“  HTML μš”μ†Œλ₯Ό λ³€κ²½ν•  수 μžˆμŠ΅λ‹ˆλ‹€. (o,x)
β‘‘ μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” HTML λ¬Έμ„œμ˜ λͺ¨λ“  HTML 속성을 λ³€κ²½ν•  수 μžˆμŠ΅λ‹ˆλ‹€. (o,x)
β‘’ μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” HTML λ¬Έμ„œμ— μƒˆλ‘œμš΄ HTML 이벀트λ₯Ό μΆ”κ°€ν•  수 μ—†μŠ΅λ‹ˆλ‹€. (o,x)
β‘£ μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” μƒˆλ‘œμš΄ HTML μš”μ†Œλ‚˜ 속성을 μΆ”κ°€ν•  수 μ—†μŠ΅λ‹ˆλ‹€ (o,x)

5. λ‹€μŒ κ²°κ³Όκ°€ λ‚˜μ˜€λ„λ‘ <script>μ•ˆμ— λ‚΄μš©μ„ μž‘μ„±ν•΄ λ³΄μ„Έμš”.

( β€» λ³€μˆ˜λͺ…은 λ§˜λŒ€λ‘œ ν•˜μ‹œλ©΄ λ©λ‹ˆλ‹€.)

<보기>
<h1>innerHTML을 μ΄μš©ν•œ μš”μ†Œμ˜ λ‚΄μš© λ³€κ²½</h1> <p id="text">이 λ¬Έμž₯을 λ°”κΏ€ κ²ƒμž…λ‹ˆλ‹€!</p> <script> </script>
Plain Text
볡사
<κ²°κ³Ό>
innerHTML을 μ΄μš©ν•œ μš”μ†Œμ˜ λ‚΄μš© λ³€κ²½ 이 λ¬Έμž₯으둜 λ°”λ€Œμ—ˆμŠ΅λ‹ˆλ‹€!
JavaScript
볡사

λ…Έλ“œ

1.
HTML λ¬Έμ„œμ—μ„œ HTML DOM λ…Έλ“œμ— μ ‘κ·Όν•˜λŠ” λ°©λ²•μœΌλ‘œ μ˜³μ€ 것을 λͺ¨λ‘ κ³ λ₯΄μ‹œμ˜€.
a.
getElementsByTagName() λ©”μ†Œλ“œ 이용
b.
nodeName ν”„λ‘œνΌν‹° 이용
c.
parentNode ν”„λ‘œνΌν‹° 이용
d.
nextSibling ν”„λ‘œνΌν‹° 이용
2.
λ‹€μŒ 쀑 λ…Έλ“œμ˜ 값을 λ³€κ²½ν•  수 μžˆλŠ” ν”„λ‘œνΌν‹°λŠ”?
a.
nodeName
b.
nodeValue
c.
nodeType
3.
λ…Έλ“œλ¦¬μŠ€νŠΈ(node list)λŠ” ( a ) λ©”μ†Œλ“œλ‚˜ ( b ) ν”„λ‘œνΌν‹°μ˜ κ°’μœΌλ‘œ λ°˜ν™˜λ˜λŠ” 객체이닀. 이 κ°μ²΄λŠ” HTML λ¬Έμ„œμ™€ 같은 μˆœμ„œλ‘œ λ¬Έμ„œ λ‚΄μ˜ λͺ¨λ“  λ…Έλ“œλ₯Ό 리슀트 ν˜•νƒœλ‘œ μ €μž₯ν•˜κ³  μžˆλ‹€. 리슀트의 각 λ…Έλ“œλŠ” ( c ) λΆ€ν„° μ‹œμž‘ν•˜λŠ” 인덱슀λ₯Ό μ΄μš©ν•˜μ—¬ μ ‘κ·Όν•  수 μžˆλ‹€.
4.
λͺ¨λ“  <div> μš”μ†Œλ“€μ„ μ„ νƒν•˜λŠ” μ½”λ“œλ₯Ό μž‘μ„±ν•˜μ‹œμ˜€.
5.
λ‹€μŒ 보기λ₯Ό 보고 λ…Έλ“œμ˜ 좔가에 μ‚¬μš©λ˜λŠ” λ©”μ†Œλ“œλ₯Ό κ³ λ₯΄μ‹œμ˜€.
(1) appendChild() (2) removeChild() (3) insertData() (4) cloneNode() (5) createAttribute() (6) insertBefore() (7) createTextNode() (8) removeAttribute() (9) createElement()
Plain Text
볡사
6.
( λ‹΅ ) ν”„λ‘œνΌν‹°λ₯Ό μ‚¬μš©ν•˜λ©΄ νŠΉμ • λ…Έλ“œμ˜ κ°’ 변경이 κ°€λŠ₯ν•˜λ‹€.
Made with