1. DOM이란
- 사전적 의미: 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법
- 글쓴이 의미: 자바스크립트가!, 객체를 사용해서!, HTML을!, 움직이도록 하는 것! 즉, HTML에서 일일이 수정하기 귀찮으니깐, 자바스크립트를 이용해서 퐉! 끝내버리겠다는 뭐 그런거~ 넓게 보면, HTML도 DOM 인게지...
2. DOM 이해하기
- DOM을 이해하려면, DOM 구조에 대해서 먼져 알아야 합니다. "DOM 트리" 라고 하는데, 가계도 같은 느낌이지요. 부모 아래 여러면의 자식들이 있는... 이 때, 하나하나 요소들을 "노드(Node)" 라고 하고 이들을 연결하는 선을 "가지" 라고 한다.
3. DOM 요소에 접근하는 방법
- 자바스크립트에서 HTML로 접근하기 위해서는 특별한 명령어들이 필요합니다.
1) getElementById() : DOM요소를 id 선택자로 접근하는 함수.
2) getElementByClass() : DOM요소를 class 값으로 찾아내는 함수.
3) getElementByTagName() : DOM요소를 태그이름으로 찾아내는 함수.
4) querySelector() : DOM요소를 다양한 방법으로 찾아주는 함수.
5) querySelectorAll : 선택자의 모든 요소를 가져오는 함수. - 그냥...querySelector만 써도 될 것 같은데...
4. 웹 요소의 태그 속성 가져오기
-
DOM트리를 보면, html > body > h1 > p > 등등...이러한 구조를 띄고 있다. 이 때, 태그의 속성값에 접근을 할 수 있다.
-
getAttribute() 함수는 속성에 접근하는 함수이다.
-
setAttribute() 함수는 접근한 속성의 값을 바꾸는 함수이다.
<html> <body> <div id="proud-img"> <img src="images/coffee-pink.jpg" alt="에디오피아 게뎀"> </div> </body> </html> <JavaScript> document.querySelector("#proud-img > img").getAttribute("src") document.querySelector("#proud-img > img").setAttribute("src", "images/coffee-blue.jpg)위 함수를 보면, HTML 상에 img 객체가 있습니다. querySelector() 함수를 이용해서 img에 접근을 합니다. 그리고 getAttribute () 함수를 이용해서 속성에 접근을 합니다. 그리고, setAttribute () 함수를 이용해서 바꾸면 됩니다.
세상과 소통을 꿈꾸는 개발자