DOM ? πŸ€”

ν”„λ ˆμ²ΌΒ·2023λ…„ 3μ›” 8일
DOM기초볡슡
0

βš›οΈ Elice Track

λͺ©λ‘ 보기
4/4

DOM ( Document Object Model )

  • λ¬Έμ„œ 객체 λͺ¨λΈ
  • 객체 지ν–₯ λͺ¨λΈλ‘œ κ΅¬μ‘°ν™”λœ λ¬Έμ„œλ₯Ό ν‘œν˜„ν•˜λŠ” ν˜•μ‹ (HTML, XML λ¬Έμ„œ λ“±...)
  • ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄(JS)κ°€ λ¬Έμ„œ ꡬ쑰, μŠ€νƒ€μΌ, λ‚΄μš© 등을 λ³€κ²½ν•  수 μžˆλ„λ‘ 도와쀀닀 !

HTML(λ¬Έμ„œ), XML DOM

  • HTML, XML을 μ‘°μž‘ν•˜κ³  μ ‘κ·Όν•˜λŠ” ν‘œμ€€ν™”λœ 방법
  • λͺ¨λ“  μš”μ†ŒλŠ” HTML, XML DOM을 톡해 μ ‘κ·Ό κ°€λŠ₯

Document

  1. Document 객체
    • μ›Ή νŽ˜μ΄μ§€λ₯Ό 의미
    • HTML μš”μ†Œμ•  μ ‘κ·Όν•  λ•ŒλŠ” κΌ­! Document 객체뢀터 μ‹œμž‘

  2. Document λ©”μ†Œλ“œ
    • μš”μ†Œμ˜ 선택 : .getElementBy__ ( Id, ClassName, Name, ... )
    • μš”μ†Œμ˜ 생성 : .createElement() , .write()
    • 이벀트 ν•Έλ“€λŸ¬ μΆ”κ°€ .onclick = function( .. ) { ... }
    • ++ .querySelectorAll( .. )
      • ν•΄λ‹Ή μ„ νƒμžλ‘œ μ„ νƒλ˜λŠ” μš”μ†Œλ₯Ό λͺ¨λ‘ 선택
    • ++ .querySelector( .. )
      • ... μ„ νƒλ˜λŠ” μš”μ†Œλ₯Ό 1개 선택

DOM 트리(DOM tree)

Node

  • HTML DOMμ—μ„œ 정보λ₯Ό μ €μž₯ν•˜λŠ” 계측적 λ‹¨μœ„

Node Tree

  • Nodeλ“€μ˜ μ§‘ν•©μœΌλ‘œ, Node κ°„μ˜ 관계λ₯Ό λ‚˜νƒ€λƒ„

JavaScriptμ—μ„œλŠ” HTML DOM을 톡해 Node Tree에 ν¬ν•¨λœ λͺ¨λ“  Node에 μ ‘κ·Ό κ°€λŠ₯ !

Node 관계

(루트 λ…Έλ“œ)root Node = HTML
(μžμ‹ λ…Έλ“œ)child Node = head, body
(ν˜•μ œ λ…Έλ“œ)sibling Node = head, body
(λΆ€λͺ¨ λ…Έλ“œ)parent Node = HTML

Node μ’…λ₯˜

  • λ¬Έμ„œ λ…Έλ“œ(document node)
    • HTML λ¬Έμ„œ 전체λ₯Ό λ‚˜νƒ€λ‚΄λŠ” λ…Έλ“œ
  • μš”μ†Œ λ…Έλ“œ(element node)
    • λͺ¨λ“  HTML μš”μ†ŒλŠ” μš”μ†Œ λ…Έλ“œλ‹€. 속성 λ…Έλ“œλ₯Ό κ°€μ§ˆ 수 μžˆλŠ” μœ μΌν•œ λ…Έλ“œ !
  • 주석 λ…Έλ“œ(comment node)
  • 속성 λ…Έλ“œ(attribute node)
    • λͺ¨λ“  μš”μ†Œμ˜ 속성은 속성 λ…Έλ“œλ‹€. ν•˜μ§€λ§Œ ν•΄λ‹Ή μš”μ†Œ λ…Έλ“œμ˜ μžμ‹ λ…Έλ“œ μ—λŠ” ν¬ν•¨ν•˜μ§€ μ•ŠμŒ !
  • ν…μŠ€νŠΈ λ…Έλ“œ(text node)

JavaScript & DOM

  1. DOM의 μš”μ†Œμ˜ 선택

    	// HTML <h1> μš”μ†Œ 선택
	var selectedItme = document.getElementsByTagName("h1");
	// idκ°€ "id"인 μš”μ†Œ 선택
	var selectedItme = document.getElementById("id");
	// ν΄λž˜μŠ€κ°€ "odd"인 μš”μ†Œ 선택
	var selectedItme = document.getElementsByClassName("odd");
	// name 속성값이 "first"인 μš”μ†Œ 선택
	var selectedItme = document.getElementsByName("first");

  2. DOMμš”μ†Œμ˜ μŠ€νƒ€μΌ λ³€κ²½

    		var selected = document.getElementByID("id");
			// μ„ νƒλœ μš”μ†Œμ˜ text 색상 λ³€κ²½
			selected.style.color = "red";

  3. DOMμš”μ†Œμ˜ λ‚΄μš© λ³€κ²½

    		var selected = document.getElementByID("text");
			// μ„ νƒλœ μš”μ†Œμ˜ λ‚΄μš© λ³€κ²½
			selected.innerHTML = "λ³€κ²½ν•  λ‚΄μš©μ„ μž‘μ„±";

Node κ°’ μ ‘κ·Ό

JavaScriptμ—μ„œ HTML DOM을 톡해 λͺ¨λ“  λ…Έλ“œμ— μ ‘κ·Όν•  수 μžˆλ‹€.

//1.
document.childNodes[0].nodeName;  // μžμ‹ λ…Έλ“œ μ€‘μ—μ„œ 첫 번째 λ…Έλ“œμ˜ 이름을 선택
//2.
let apple = document.getElementById('apple');
apple.firstChild.nodeValue;  // 첫 번째 μžμ‹ λ…Έλ“œμ˜ 값을 선택;
//2.
let apple = document.getElementById('apple').childNodes[0]; // μžμ‹ λ…Έλ“œ μ€‘μ—μ„œ 첫 번째 λ…Έλ“œμ˜ νƒ€μž…μ„ 선택

apple.nodeType; 
// λŒ€ν‘œμ μΈ HTML λ…Έλ“œλ³„ nodeType ν”„λ‘œνΌν‹° κ°’
μš”μ†Œ λ…Έλ“œ:1
속성 λ…Έλ“œ: 2
ν…μŠ€νŠΈ λ…Έλ“œ: 3
주석 λ…Έλ“œ: 8
λ¬Έμ„œ λ…Έλ“œ: 9
profile
ν”„λ ˆμ²Ό
흐λ₯΄λŠ” λŒ€λ‘œ μ„€λͺ…ν•˜κΈ° && 틀리면 ν›ˆμˆ˜ 둬 μ£Όμ„Έμš”... 😊
이전 포슀트

λ ˆμ΄μ•„μ›ƒμ— 영ν–₯을 λ―ΈμΉ˜λŠ” 속성

0개의 λŒ“κΈ€