프로그래밍 언어/JavaScript

DOM 기초 정리

tteokbokki-master 2023. 9. 28. 20:46

문서 객체 모델을 DOM으로 표현한다. ‘돔’이라 읽음

 

DOM : 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법

 

document는 웹 문서 자체를 가리키는 DOM 요소 중 하나이다.

 

 

 

 

 

[DOM 트리]

 

<body>

<h1> 제목 </h1>
<p> 본문 </p>

</body>

DOM은 body를 h1,p의 부모요소로, h1,p를 body의 자식요소로 이해하고 구조화 한다.

그러면 나무를 거꾸로 뒤집어 놓은 모양이되고, 이것을 DOM 트리 라고 부른다.

 

 

 

 

 

			[h1]	 — 		[‘제목’]

[body] 	—	

			[p]		 —		[‘본문’]

 

각 [] 상자를 노드라고 한다.

DOM 트리는 웹 문서의 HTML 요소만 표현하지 않는다

 

 

 

 

 

- 웹 문서의 태그는 요소(Element) 노드로 표현한다.

- 태그가 품고 있는 텍스트는 해당 요소 노드(태그)의 자식 노드인 텍스트(Text) 노드로 표현한다.

- 태그의 속성은 모두 해당 요소 노드(태그)의 자식 노드인 속성(Attribute) 노드로 표현한다.

- 주석은 주석 노드로 표현함

 

 

 

 

 

[DOM 요소에 접근]

 

- CSS에는 선택자 개념이 있다. 

- DOM 요소에 접근할 때도 주로 선택자를 사용한다.

 

getElementById() 

DOM요소를 id 선택자로 접근

 

getElementsByClassName()

DOM요소를 class 값으로 찾아낸다.

 

CSS에서 class 선택자는 id 선택자와 다르게 웹 문서 안에서 여러 번 사용할 수 있다.

그래서 getElementsByClassName() 함수는 2개 이상의 웹 요소에 접근한다.

 

만약 getElememtsByClassName()로 접근한 DOM 요소 중 1개의 요소에만 접근하고 싶으면

배열의 인덱스를 사용하면 된다.

 

ex)

document.getElementsByClassName(“example”)[0];

 

getElementsByTagName()

DOM 요소를 태그 이름으로 찾아낸다.

마찬가지로 인덱스를 사용해서 특정 요소에 접근 할 수 있다.

 

querySelector(), querySelectorAll()

DOM요소를 다양한 방법으로 찾아주는 함수

 

id,class 값을 사용해도 되고, 태그 이름을 사용해도 된다.

두 함수는 DOM 요소 개수에만 차이가 있을 뿐 사용 방법은 같다

 

class값 앞에는 마침표(.)를, id 값 앞에서는 샵(#)을 붙인다.

document.querySelector(“#example”);

document.querySelector(“.example”);

 

 

 

 

 

[getElementById() 함수와 querySelector() 함수의 차이]

 

getElementById() 함수는 단순히 id 선택자를 사용해서 요소에 접근

querySelector() 함수는 id 선택자 뿐만 아니라, querySelector(#container > ul)처럼 둘 이상의 선택자를 사용해서 요소에 접근할 수 있다.

 

 

 

 

 

[접근한 DOM 요소의 속성 노드에 접근]

 

getAttribute(), setAttribute()

HTML 태그 속성을 가져오거나 수정하는 함수

 

document.querySelector(“#example”).getAttribute(“src”);

id가 example인 요소에 접근해서 그 요소의 src 속성을 가져온다.

 

 

 

addEventListener(“(1번)”, (2번), (3번));

1번 : 처리할 이벤트 유형이다. on을 붙이지 않고, click, mouseover 처럼 이벤트 이름만 사용한다.

2번 : 함수이다. 이벤트가 발생했을 때 실행할 명령을 나열하거나 따로 함수를 만들었다면 함수 이름을 지정한다.

3번 : 이벤트를 캡쳐링하는지 여부를 지정. 단 생략할 수 있음. 기본 값은 false

 

 

웹 문서에 있는 요소는 단순히 태그만 있는 게 아니라 태그 속성과 내용을 함께 사용한다. 그래서 <h1> 또는 <p> 태그를 추가하고 싶다면 단순한 태그 뿐만 아니라, 그에 해당하는 텍스트 내용 및 속성도 추가해야함

 

 

 

 

 

[<요소노드 속성노드> 텍스트노드 </요소노드>] 만드는 순서

 

1)

createElement() : 새 요소 노드를 만든다

 

2)

createTextNode() : 텍스트 내용이 있을 경우 텍스트 노드를 만든다

appendChild() : 텍스트 노드를 요소 노드에 자식 노드로 추가한다.

 

3)

creatAttribute() : 요소에 속성이 있을 경우 속성 노드를 만든다.

setAttributeNode() : 속성 노드를 요소 노드에 연결

 

4)

appendChild() : 새로 만든 요소노드를 부모 노드에 추가함

 

 

 

 

 

hasChildNodes()

특정 노드에 자식 노드가 있는지를 확인하는 함수

자식 노드가 있다면 true, 없다면 false 반납

 

removeChild()

DOM 트리에 있는 노드를 삭제할 때 removeChild() 함수를 사용한다.

부모노드에서 자식 노드를 삭제하는 함수이고, 괄호 안에는 삭제하려는 자식 노드가 들어감

 

parentNode()

현재 노드의 부모 요소 노드를 반환함