반응형

안녕들 하시죠 !

이번시간에는 자바스크립트의 문서 객체 모델(DOM)에 대해 알아보겠습니다.

 

문서 객체 모델(Document Object Model)

HTML 문서에 접근하고 그 안에 내용물을 마음대로 바꾸거나 새로운 객체를 직접 만들어 문서의 원하는 부위에 삽입 삭제를 할 수 있다.

 

참조 https://poiemaweb.com/js-dom

 

DOM 트리의 노드

 

문서 노드(Document Node)

트리의 최상위에 존재하며 각각 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 한다. 즉, DOM tree에 접근하기 위한 시작점(entry point)이다.

 

요소 노드(Element Node)

요소 노드는 HTML 요소를 표현한다. HTML 요소는 중첩에 의해 부자 관계를 가지며 이 부자 관계를 통해 정보를 구조화한다. 따라서 요소 노드는 문서의 구조를 서술한다고 말 할 수 있다. 어트리뷰트, 텍스트 노드에 접근하려면 먼저 요소 노드를 찾아 접근해야 한다. 모든 요소 노드는 요소별 특성을 표현하기 위해 HTML Element 객체를 상속한 객체로 구성된다. (그림: DOM tree의 객체 구성 참고)

 

어트리뷰트 노드(Attribute Node)

어트리뷰트 노드는 HTML 요소의 어트리뷰트를 표현한다. 어트리뷰트 노드는 해당 어트리뷰트가 지정된 요소의 자식이 아니라 해당 요소의 일부로 표현된다. 따라서 해당 요소 노드를 찾아 접근하면 어트리뷰트를 참조, 수정할 수 있다.

 

텍스트 노드(Text Node)

텍스트 노드는 HTML 요소의 텍스트를 표현한다. 텍스트 노드는 요소 노드의 자식이며 자신의 자식 노드를 가질 수 없다. 즉, 텍스트 노드는 DOM tree의 최종단이다.

참조 https://poiemaweb.com/js-dom

 

DOM | PoiemaWeb

브라우저는 웹 문서(HTML, XML, SVG)를 로드한 후, 파싱하여 DOM(문서 객체 모델. Document Object Model)을 생성한다. 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하기 위해서는 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다. 즉, 모든 요소와 요소의

poiemaweb.com

 

document 객체

document 객체는 window 객체에 포함되며 특정한 엘리먼트들을 포함하고 있다.

주로 문서유형, 색깔, 포맷과 같은 문서 정보에 접근하는 방법을 제공하고있다.

ex) document.body 속성으로 <body> 엘리먼트에 접근할 수 있다.

 

document 객체의 메서드

getElementById("엘리먼트 id") : id 속성이 일치하는 하나의 엘리먼트를 반환한다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
 
function selectId(){    
    var getId = document.getElementById("a"); // 변수 getId에 a라는 Id를 가진 엘리먼트를 가져와라.
    getId.style.backgroundColor = "yellow"// getId가 가지고 있는 엘리먼트의 배경색을 yellow로 바꿔라.
}
 
</script>
</head>
<body>
<button onclick = "selectId();">id 'a'인 객체 선택하기</button> <!-- 버튼을 클릭하면 selectId 함수 실행 -->
<div>
<span id="a">1번</span>&nbsp;&nbsp;
<span id="b">2번</span>&nbsp;&nbsp;
<span id="c">3번</span>&nbsp;&nbsp;
</div>
</body>
</html>
cs

 

버튼 클릭 후 

document.createElement("엘리먼트 이름")

새로운 엘리먼트를 생성한다.

 

document.querySelector("CSS 선택자")

특정 엘리먼트 속성등의 정보를 얻기위해 사용하는 document 객체의 메서드.

 

document.ElementsByTagName("엘리먼트 이름")

태그 이름이 일치하는 모든 엘리먼트를 배열의 형태로 반환.

 

document.ElementsByName("name 속성값") 

id 대신 name을 사용하지만 name은 중복 가능하므로 위에있는 ByTagName처럼 배열 형태로 저장됨.

 

document.write()

문서에 내용을 추가한다.

 

document.createTextNode('텍스트')

새로운 텍스트 노드를 생성한다.

 

 

 

+ Recent posts