JavaScript [Chapter 5 문서 객체 모델(DOM)]

Chapter 5. 문서 객체 모델(DOM)

문서 객체 모델(document object model)의 줄임말을 DOM이라고 한다.

즉, 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법이다.

 

 

- DOM에 접근하기

 

id 선택자로 접근하는 getElementById() 메서드

요소명.getElementById("id명")

ex)

document.getElementById("heading")

 

 

- class 선택자로 접근하는 getElementsByClassName() 메서드

요소명.getElementsByClassName("class명")

(class 선택자를 사용하기 때문에 웹 문서 안의 여러 요소에서 사용할 수 있으므로 Elements (복수형)을 사용함)

 

ex)

document.getElementsByClassName("bright")

 

 

- 태그 이름으로 접근하는 getElementsByTagName() 메서드

 

ex)

document.getElementsByTagName("p")

 

 

getElementById(), getElementsByClassName(), getElementsByTagName() 메서드의 반환값은 HTMLCollection 객체이다.

여기에는 HTML요소('p'나 'a'같은 형태)만 저장된다.

 

DOM의 텍스트, 속성 노드까지 자유롭게 제어하려면 querySelector(), querySelectorAll() 메서드를 사용해야 한다.

노드.querySelector(선택자)
노드.querySelectorAll(선택자 또는 태그)

ex)

document.querySelector("#heading")
document.querySelectorAll(".bright")

 

querySelector(), querySelectorAll() 메서드의 반환값은 노드이거나 노드 리스트 이다. 

 

 

- 웹 요소의 내용을 수정하는 innerText, innerHTML 프로퍼티

 

자바스크립트로 웹 요소의 내용을 수정할 수 있다.

innerText 프로퍼티는 텍스트 내용을 표시하고 innerHTML 프로퍼티는 HTML 태그까지 반영하여 표시할 수 있다.

요소명,innerText = 내용
요소명.innerHTML = 내용

ex)

document.getElementById("current").innerText = now;
document.getElementById("current").innerHTML = "<em>" + now + "</em>";

 

- 속성을 가져오거나 수정하는 getAttribute(), setAttribute() 메서드

getAttribute("속성명")
setAttribute("속성명", "값")

ex)

var cup = document.querySelector("#cup");
alert("이미지 소스 : " + cup.getAttribute("src"));

 

 

 

 

DOM에서 이벤트 처리하기

 

- DOM 요소에 함수 연결하기

var cup = document.querySelector("#cup");
cup.onclick = function() {
	alert("이미지를 클릭했습니다");
}

변수에 요소를 저장하고 onclick을 사용해 변수에 이벤트 처리기(함수)를 직접 연결했다.

 

var cup = document.querySelector("#cup");  // id = cup인 요소를 가져옴
cup.onclick = changePic;  // cup을 클릭하면 changePic 함수 실행

function changePic() {
	cup.src = "images/cup-2.png";
}

또는 다음과 같이 함수 이름을 사용해서 연결할 수도 있다.

 

 

- DOM의 event 객체

DOM에는 이벤트 정보를 저장하는 event 객체가 있다.

event 객체에는 웹 문서에서 이벤트가 발생한 요소가 무엇인지, 어떤 이벤트가 발생했는지 등의 정보가 들어있다.

 

ex)

var cup = document.querySelector("#cup");  // id = cup인 요소를 가져옴
cup.onclick = function(event) {
    alert("이벤트 유형: " + event.type + ", 이벤트 발생 위치 : " + event.pageX + "," + event.pageY);	
}

event 객체를 함수의 인수로 하여, 클릭했을 때 이벤트가 발생한 좌표를 나타내는 함수이다.

 

 

- addEventListener() 메서드 사용하기

앞에서 살펴본 이벤트 처리는 한 요소에 하나의 이벤트 처리기만 연결할 수 있었다.

하지만 addEventListener() 메서드와 event 객체를 사용하면 한 요소에 여러 이벤트 처리기를 연결해 실행할 수 있다.

요소.addEventListener(이벤트, 함수, 캡처 여부);

이벤트 : 이벤트 유형을 지정. 단 click과 keypress처럼 on을 붙이지 않고 쓴다.

함수 : 이벤트가 발생하면 실행할 명령이나 함수를 지정한다. 여기에서 함수를 정의할 때는 event객체를 인수로 받는다.

캡처 여부 : 이벤트를 캡처하는지 여부를 지정. 기본값은 false이다. true이면 캡처링, false이면 버블링한다는 의미.

이벤트 캡처링은 DOM의 부모노드에서 자식 노드로 전달되는 것이고, 이벤트 버블링은 DOM의 자식 노드에서 부모 노드로 전달되는 것이다.

 

ex)

var cover = document.getElementById("cover");
		cover.addEventListener("mouseover",changePic, false);
    cover.addEventListener("mouseout",originPic, false);
    
    function changePic() {
      cover.src = "images/easys-2.jpg";
    }
    function originPic() {
      cover.src = "images/easys-1.jpg";
    }

 

- CSS 속성에 접근하기

자바스크립트를 이용하면 스타일 속성값을 가져와서 그 값을 원하는대로 수정할 수 있다.

document.요소명.style.속성명

ex)

document.getElementById("desc").style.color = "blue";

var myRect = document.querySelector("#rect");
myRect.addEventListener("mouseover", function() {  // mouseover 이벤트 처리
    myRect.style.backgroundColor = "green";  // myRect 요소의 배경색 
    myRect.style.borderRadius = "50%";  // myRect 요소의 테두리 둥글게 처리
});
myRect.addEventListener("mouseout", function() {  // mouseout 이벤트 처리
    myRect.style.backgroundColor = "";  // myRect 요소의 배경색 지우기 
    myRect.style.borderRadius = "";  // myRect 요소의 테두리 둥글게 처리 안 함
});

 

- DOM에서 노드 추가하기

 

순서

1. 새로운 요소 노드를 생성한다.  => document.createElement(노드명)

2. 요소 노드의 속성 노드 또는 텍스트 노드를 생성한다.
속성 노드 생성하기 : document.createAttribute(속성명);

텍스트 노드 생성하기 : document.createTextNode(텍스트);

3. 부모와 자식 노드를 연결하기

=> 부모노드.appendChild(자식노드)

4. 기존에 존재했던 요소 노드에 자식 노드로 연결하기

=> 기존에 존재하던 요소 노드.appendChild(새로 완성한 노드)

 

ex)

let newP = document.createElement("p");
let txtNode = document.createTextNode("새로운 텍스트 노드 생성");
newP.appendChild(txtNode);

document.getElementById("info").appendChild(newP);

이 때, 추가하는 자식 노드는 부모 노드의 맨 끝에 추가 된다.

 

만약 부모 노드의 맨 앞에 추가하고 싶으면 다음과 같이 작성하면 된다.

document.getElementById("info").insertBefore(newP, document.getElementById("info").childNode[0]);

 

- DOM에서 노드 삭제하기

=> 부모노드.removeChild(자식노드)

 

즉, 부모노드를 찾아서 removeChild로 자식 노드를 삭제하는 것이다.

 

ex)

function newRegister() {
    var newItem = document.createElement("li");  // 요소 노드 추가
    var subject = document.querySelector("#subject");  // 폼의 텍스트 필드
    var newText = document.createTextNode(subject.value);  // 텍스트 필드의 값을 텍스트 노드로 만들기
    newItem.appendChild(newText);  // 텍스트 노드를 요소 노드의 자식 노드로 추가

    var itemList = document.querySelector("#itemList");  // 웹 문서에서 부모 노드 가져오기 
    itemList.insertBefore(newItem, itemList.childNodes[0]);  // 자식 노드중 첫번째 노드 앞에 추가

    subject.value="";

    var items = document.querySelectorAll("li");
      for(i=0; i < items.length; i++) {
        items[i].addEventListener("click", function() {
          this.parentNode.removeChild(this);
        });
      }
}

노드 리스트에 들어있는 li 들을 하나씩 꺼내서 클릭 이벤트를 걸었다.

클릭하면 자기 자신의 부모 노드에서 removeChild 메서드를 통해 자식 노드를 삭제하도록 하였다.

 

 

---

출처 : Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석