[JavaScript] html요소 다루기 및 이벤트리스너 (5)

[HTML 요소 다루기]

이전에 선택자를 통해서 html 태그에 설정한 속성값을 통해서 자바스크립트에서 해당 요소에 대해서 다루는 작업을 잠깐 해보았다.

해당 게시물에서는 html 요소 및 이벤트리스너를 통한 상호작용에 대해서 설명해보겠다. 

 

일단 HTML은 무조건 태그를 통해서 이루어져있는데 "노드"라는 용어 그리고 "DOM트리" 부터 배워보자.

 

[DOM (Documnet Object Model)]

- 모든 HTML 태그는 DOM에 따르면 객체라고 불리운다. 어떤 태그 내에 자식요소로 태그가 n개 존재하고 또 해당 자식요소로부터

어떤 태그내에 자식요소도 존재한다. 그리고 태그내에 문자까지도 객체로 볼 수 있다.

이런 모든 객체는 자바스크립트를 통해 접근이 가능하며, 페이지를 동적으로 조작하려고 할 때, 해당 객체를 사용한다.

 

[노드]

- HTML DOM트리에서 하나한의 요소를 노드라고 불리우는 계층적 단위에 정보를 저장하게 된다.

 

 

다음 예제는 태그요소를 만들고 요소에 자식요소로 추가해서 html에 출력할 수 있도록하는 코드를 작성해보았다.

html

javascript

 다음과 같은 구조에서 button 태그에 속성으로 onclick에 f01()메서드를 실행할 수 있도록 되어있고, 자바스크립트에서 f01 실행문 내용을 확인해 보면 documnet(객체)로 부터 createElement() 그리고 createTextNode() 두가지 메서드를 이용해서 ce와 ct에 할당하였다.

요소타입의 createElement()메서드의 반환을 받은 ce는 메서드로 appendChild()를 사용해서 자식 요소를 추가 할 수 있다. ct에는 Text타입의 환영합니다가 들어가 있으므로 <h1>태그 내에 환영합니다라는 글자가 담기게 된다.

 

그리고 바디태그에 대해서 요소를 가져와서 바디태그 내에 자식으로 방금 만든 <h1>환영합니다</h1>을 추가해준다.

 

다음과 같이 body에 아직 환영합니다 태그가 존재하지 않고 있다가 위에 메서드를 실행하기 위해서 노드 생성 버튼을 눌러주게 되면 onclick 이벤트가 실행되어서

 

다음과 같이 환영합니다 태그가 추가된 것을 확인할 수 있다.

 

 

[요소 제거 함수]

해당 함수에서는 document.querySelector(선택자) 메서드를 통해서 반환된 요소에 대해서 제거하는 메서드 remove()에 대한 예제이다.

 

 

08_DOM (Document Object Model)

환영합니다

 

해당 출력은 h1태그로 이루어진 요소로 onclick속성으로 f03() 메서드를 가지고 있는 노드 삭제 버튼에 대해서 이벤트가 발생하게 되면, 맨 위에있던 h1태그가 먼저 지워지고 다음 환영합니다 요소에 대해서 순차적으로 지워진다.