TIL/웹+앱

[웹] DOM 개념과 접근 방식(1)

윤개발새발 2022. 10. 23. 20:37
728x90

 

DOM

문서 객체 모델, HTML 문서 객체 구조

문서(웹 페이지)의 구조화된 표현을 제공.

nodes(elements)와 objects(prpoerty, method, event)로 표현하며 tree 구조를 가짐

HTML DOM 트리

자바스크립트와 같은 스크립팅 언어를 이용해 DOM 구조에 접근할 수 있는 방법을 제공하여
그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
⇒ API(web or XML page) = DOM + JS(scripting language)

프로그래밍 언어와 독립적으로 디자인 되었음. → DOM 의 구현은 어떠한 언어에서도 가능.

표준

  • W3C(World Wide Web Consortium) DOM
    • Core DOM - 모든 문서 유형에 대한 표준 모델
    • XML DOM - XML 문서의 표준 모델
    • HTML DOM - HTML 문서의 표준 모델
      : HTML 요소를 가져오고, 변경하고, 추가하거나, 삭제하는 방법에 대한 표준
  • WHATWG DOM

자바스크립트와의 관계

DOM은 프로그래밍 언어는 아니지만 DOM 이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 됨.

DOM 접근 방식

데이터 타입

  • document[문서] : root document object 자체
  • element(node)[요소] : DOM API 에 의해 리턴 된 element 또는 element 타입의 node
  • nodeList(node’s array) : 메소드에 의해 리턴된 것과 같은 elements 의 배열
  • attribute[속성] : object reference, DOM에서 element와 같은 nodes
  • namedNodeMap : 배열과 유사하지만, item 은 name 또는 index에 의해 접근 가능

DOM Programming Interface

HTML DOM은 JavaScript(및 프로그래밍 언어)로 접근 할 수 있음.
DOM 에서 모든 HTML 요소는 객체로 정의 프로그래밍 인터페이스는 각 개체의 속성과 메서드.

  • 속성 : 가져오거나 설정 할 수 있는 값 ex) HTML 요소의 내용 변경
  • 메소드 : HTML 요소를 추가하거나 삭제하는 것과 같이 수행할 수 있는 작업.
  • 예시
<html>
	<body>
	
		<p id="demo"></p>
		
		<script>
			document.getElementById("demo").innerHTML = "Hello World!";
		</script>
	
	</body>
</html>
  • innerHTML : 요소의 내용을 변경 ⇒ 속성
  • getElementById : HTML 요소에 대한 작업 ⇒ 메소드
  • 핵심 Interfaces
    • Document : root document 자체
      • document.getElementById(id)
      • document.getElementsByTagName(name)
      • document.createElement(name)
      • parentNode.appendChild(node)
      • element.innerHTML
      • element.style.left
      • element.setAttribute
      • element.getAttribute
      • element.addEventListene
    • window : 브라우저
      • window.content
      • window.onload
      • window.dump
      • window.scrollTo

속성과 메소드

  • 속성
    • .innerHTML = new html content : element의 HTML 내용을 변경
    • .attribute = new value : HTML element의 속성값 변경
    • .style.property = new style : HTML element의 css 변경
  • 메소드
    • .getElementById(id) : ID 값으로 요소 찾기
    • .getElementsByTagName(name) : 태그 명으로 요소들 찾기 (list 리턴)
    • .getElementsByClassName(name) : class 명으로 요소들 찾기 (list 리턴)
    • .setAttribute(attribute, value) : HTML element의 속성값 변경
    • .createElement(element) : 새로운 HTML element 생성
    • .remsoveChild(element) : HTML element 제거
    • .appendChild(element) : HTML element 추가
    • .replaceChile(new, old) : old HTML element 를 new element로 교체
    • .write(text) : 출력 스트림에 직접 씀
      ex) document.write(Date()); 현재 날짜를 출력
      단, 해당 메소드는 문서를 로드한 후에 사용하게 되면 문서를 덮어쓰게 됨.
    • .querySelectorAll(element) : css 선택자와 일치하는 모든 HTML elements 목록 반환

이벤트 리스너

addEventListener() 메소드는 지정된 요소에 이벤트 핸들러를 연결한다.
기존 이벤트 핸들러를 덮어쓰지 않고 요소에 연결. → 하나의 요소에 여러 이벤트 핸들러를 추가할 수 있음.

HTML element 뿐 아니라 창 개체에도 이벤트 리스너를 추가할 수 있다.

  • element.addEventLisetner(event, function, useCapture)
    • event : 이벤트 유형(ex. click, mousedown 등)
    • function : 이벤트가 발생할 때 호출하려는 함수
    • useCapture : 이벤트 버블링 또는 이벤트 캡처를 사용할지 여부(true, false), 선택사항
    • 예시 1. 동일한 요소에 많은 이벤트 핸들러 추가
element.addEventListener("click", myFunction);
element.addEventListener("mouseover", mySecondFunction);

function myFunction() {
	alert("Hello World!");
}

function mySecondFunction() {
	alert("This is second Func!");
}
  • 예시 2. 익명함수를 사용한 매개변수 전달
element.addEventListener("click", function() { myFunction(p1, p2); });
  • 예시 3. 창 개체에 이벤트 처리기 추가
// 창 크기를 조정할 때 발생
window.addEventListener("resize", function() {
	document.getElementById("demo").innerHTML = "blah blah";
});
  • 예시 4. 이벤트 버블링과 이벤트 캡처
<script>
// 이벤트 버블링
document.getElementById("myP").addEventListener("click", myFunction, false);
document.getElementById("myDiv").addEventListener("click", mySecondFunction, false);

// 이벤트 캡처
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", mySecondFunction, true);

function myFunctoin() {
	alert("You clicked the P element");
}
function mySecondFunctoin() {
	alert("You clicked the Div element");
}
</script>

<div id="myDiv">
	<h1>OUTTER</h1>
	<p id="myP">INNER</p>
</div>
  • 이벤트 버블링 : 가장 안쪽 요소의 이벤트가 먼저 처리된 다음 바깥쪽 이벤트가 처리 됨.
    <p> 요소 클릭 이벤트 처리 후 <div> 요소 클릭 이벤트 처리
    • “You clicked the P element” → “You clicked the Div element”
  • 이벤트 캡처 : 가장 바깥쪽 요소의 이벤트가 먼저 처리된 다음 내부 요소 이벤트 처리.
    <div> 요소 클릭 이벤트 처리 후 <p> 요소 클릭 이벤트 처리
    • “You clicked the Div element” → “You clicked the P element”

 

 

 

728x90
반응형
저작자표시 비영리 변경금지

'TIL > 웹+앱' 카테고리의 다른 글

[웹/API] View Transition API  (0) 2023.03.25
[웹/Vue.js/WebRTC] OpenVidu 설치부터 테스트까지  (1) 2023.03.15

'TIL/웹+앱'의 다른글

  • 현재글[웹] DOM 개념과 접근 방식(1)

관련글

댓글
chat

▲

티스토리툴바