Vanila.js (2)

4. 문서 객체 모델(DOM)

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

DOM은 웹 문서를 하나의 객체로 정의한다

선택자 가져오는 방법

document.getElementsByClassName()

클래스 이름으로 element를 찾아서, 이 클래스 이름을 가지는 모든 element 목록을 리턴합니다.

document.getElementsByTagName()

위 코드는 해당 태그를 가지는 모든 element 목록을 찾아줍니다. 이 함수 역시, 다수의 element를 리턴하기 때문에 함수명에 복수형의 'elements'가 포함되어 있습니다.

document.getElementById()

파라미터로 찾으려는 id를 전달하여, 해당 element를 찾을 수 있습니다. id는 유일한 값이므로, 하나의 element만 리턴합니다.

document.querySelector()

#-id / .-class / 아무것도 없음-tag

파라미터로 입력받은 CSS 선택자로 찾은 여러개의 element 중 첫번째 element를 리턴합니다.

document.querySelectorAll()

CSS선택자(파라미터로 넘겨준)로 찾은 모든 element 목록을 리턴합니다.

querySelector()와 getElementById의 차이

<form id="userForm">
  <input id="username" type="text" value="Guilherme" />
</form>

var username = document.getElementById("username");

var username = document.querySelector("#userForm #username");

더 구체적인 엘리먼트를 찾고싶을때 querySelector()나 querySelectorAll()을 사용하고 일반적으로는 getElementById 류를 쓴다

innerText 프로퍼티

텍스트 내용을 표시한다

innerHTML

HTML 태그까지 반영하여 표시한다

getAttribute() 메서드

속성에 접근할 때 사용한다

setAttribute() 메서드

접근한 속성값을 바꿀 때 사용한다

DOM요소에 이벤트 연결

document.querySelector("#cup").onclick = changepic;

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

addEventListener()메서드

보통 한 요소에 하나의 이벤트만 연결할 수 있었지만 이걸 사용하면 여러 이벤트를 연결할 수 있다

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

document.getElementById("cover").addEventListener("mouseover",changepic,false);
document.getElementById("cover").addEventListener("mouseout",originpic,false);

function changePic() {
      cover.src = "images/easys-2.jpg";
    }
    function originPic() {
      cover.src = "images/easys-1.jpg";
    }

CSS 속성에 접근할때

HTML요소 다음에 style을 쓰고 속성을 쓴다

document.querySeletor("#rect").style.backgroundColor = "green";
document.querySeletor("#rect").style.borderRadius = "50%";