221130 JS 문서 객체 모델

문서 객체 생성하기

document.createElement() 메소드는 JavaScript를 통해 동적으로 특정한 이름의 문서 객체를 생성하는데 사용된다.

document.createElement(문서 객체 이름)

하지만 문서 객체를 만들었다고 자동적으로 배치까지 되는 것은 아니다. 위의 그림을 프로그래밍에서는 tree라고 부르는데, 상위에 있는 객체를 부모, 그 밑에 있는 객체를 자식이라고 부른다.

문서 객체 추가하기

객체를 만들고 나면 그 객체를 화면에 출력할 수 있는 메소드가 필요한데, 그 때 appendChild()메소드를 사용해서 객체를 추가할 수 있다.

문서 객체 제거하기

반대로 문서 객체를 제거 할 때는 removeChild() 메소드를 이용한다.

부모 객체.removeChild(자식 객체)
or
문서 객체.parentNode.removeChild(문서 객체)

대개 appendChild() 메소드 등으로 부모 객체와 이미 연결이 완료된 문서 객체의 경우 parentNode 속성을 사용하여 접근한다.

문서 객체 이동하기

appendChild() 메소드는 문서 객체를 이동할 때도 사용할 수 있는데, 문서 객체의 부모는 반드시 하나여야 하기 때문에 문서 객체를 다른 문서 객체에 추가하면 문서 객체가 이동한다.

문서 객체 이동 시, appendChild() 메소드에 이동 대상으로 삼은 객체를 붙여준다.

이벤트 설정하기

모든 문서 객체는 생성/클릭/마우스를 올릴 때 등 이벤트가 발생하는데, 이 때 실행할 함수는 addEventListner() 메소드를 사용하고, 그 함수는 이벤트 리스너 혹은 이벤트 핸들러라고 부른다.

문서 객체.addEventListener(이벤트 이름, 콜백 함수)

이벤트 제거하기

이벤트를 제거할 때는 removeEventListener() 메소드를 사용한다.

문서 객체.removeEventListener (이벤트 이름, 이벤트 리스너)

변수 또는 상수로 이벤트 리스너를 미리 만들고, 이를 제거하고자 하는 이벤트 리스너의 연결과 연결 제거에 활용한다.