22.12.23 배운 내용 정리2
문서 객체 모델(DOM)
(문서 객체 모델 알아보기, DOM 요소에 접근하고 속성 가져오기,
DOM에서 이벤트 처리하기, DOM에서 노드 추가·삭제하기)
문서 객체 모델 알아보기
① 문서 객체 모델(DOM)이란
문서 객체 모델(DOM)은 자바스크립트를 이용하여
웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법임.
HTML 언어로 작성한 웹 문서의 DOM을 HTML DOM이라고 하며, XML 문서에서 사용하는 XML DOM도 있음.
DOM은 웹 문서를 하나의 객체로 정의함.
그리고 웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소도 각각 객체로 정의함.
ex. 웹 문서 전체는 document 객체이고, 삽입한 이미지는 image 객체임.
이처럼 DOM은 웹 문서와 그 안의 모든 요소를 '객체'로 인식하고 처리함.
② DOM 트리
DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분함.
※ HTML의 요소 관계 알아보기
이 예제에서 html 요소는 head, body의 부모 요소이고, 다시 body 요소는 h1, img의 부모 요소가 됨.
여기서 한 단계 더 발전하여 DOM의 관점에서 부모 자식 관계를 생각해보면,
DOM은 문서안의 요소뿐만 아니라 각 요소에서 사용한 내용과 속성도 자식으로 나타내므로
h1 요소의 내용인 'Do it'은 h1의 자식이 되고 src, alt 속성은 img 요소의 자식이 됨.
이렇게 부모와 자식 구조로 표시하면 마치 나무 형태가 되므로 DOM 트리라고 함.
DOM 트리에서 가지가 갈라져 나간 항목을 노드라고 하며,
DOM 트리의 시작 부분인 html 노드를 나무 뿌리에 해당한다 해서 루트 노드라고 함.
루트 노드를 시작으로 웹 문서에서 사용한 요소는 계층 구조를 이룸.
따라서 각 노드 사이의 관계를 부모와 자식, 형제 간으로 표현할 수 있음.
부모 노드에서는 자식 노드가 있으며, 부모 노드가 같은 형제 노드도 있음.
※ DOM을 구성하는 기본 원칙
- 모든 HTML 태그는 요소(element) 노드임.
- HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드임.
- HTML 태그에 있는 속성은 자식 노드인 속성(attribute) 노드임.
- 주석은 주석(comment) 노드임.
DOM 요소에 접근하고 속성 가져오기
① DOM에 접근하기
CSS에서는 class, id 태그 등의 스타일을 각각 구별해서 정의해야 함.
이때 class, id 태그 등을 선택자라고 함. 이 선택자를 사용해서 DOM에 접근하는 방법은 여러 가지가 있음.
(1) id 선택자로 접근하는 getElementByld( ) 메서드
HTML 태그의 id 속성은 HTML 요소가 문서 안에서 중복되지 않도록 사용하는 CSS 선택자임.
다음과 같이 getElementByld( ) 메서드를 이용하면 특정한 id가 포함된 DOM 요소에 접근할 수 있음.
기본형 : 요소명.getElementByld("id명")
※ id 선택자로 DOM 요소에 접근하기
ex. id 값이 heading인 요소에 접근하려면 다음과 같이 사용함.
document.getElementByld("heading")
(2) class 값으로 접근하는 getElementsByClassName( ) 메서드
getElementsByClassName( ) 메서드는 지정한 class 선택자 이름이 들어 있는 DOM 요소에 접근함.
기본형 : 요소명.getElementsByClassName("class명")
class 선택자는 웹 문서 안의 여러 요소에서 사용할 수 있으므로
getElementsByClassName( ) 메서드를 사용하면 반환하는 요소가 2개 이상일 수 있음.
그래서 이메서드 이름에는 반환요소가 여러 개라는 뜻에서 Element에 s를 붙인 것임.
getElementsByClassName( ) 메서드를 사용하게 되면 클래스 이름이 같은 DOM 요소들이 HTMLCollection 객체로 저장됨.
HTMLCollection 객체는 배열과 비슷하고 배열처럼 사용할 수 있지만 배열은 아님.
※ class 선택자로 DOM 요소에 접근하기
ex. 웹 문서에서 class="bright" 속성이 있는 요소를 모두 찾으려면 다음과 같이 사용함.
document.getElementsByClassName("bright")
(3) 태그 이름으로 접근하는 getElementsByTagName( ) 메서드
class나 id를 지정하지 않은 DOM 요소에 접근하려면 태그를 이용함.
getElementsByTagName( ) 메서드는 다음과 같이 지정한 태그명을 사용한 DOM 요소에 접근할 수 있음.
기본형 : 요소명.getElementsByTagName("태그명")
웹 문서 안에서 같은 태그를 사용하는 요소가 2개 이상일 수 있으므로
getElementsByTagName( ) 메서드가 반환하는 값도 HTMLCollection 형태로 저장됨.
※ 태그로 DOM 요소에 접근하기
ex. 웹 문서에서 <p> 태그를 사용한 모두 요소에 접근하려면 다음과 같이 사용함.
document.getElementsByTagName("P")
(4) 다양한 방법으로 접근하는 querySelector( ), querySelectorAll( ) 메서드
앞부분에서 살펴본 메서드들의 반환값은 HTMLCollection 객체임.
여기에는 HTML 요소('p'나 'a' 같은 형태)만 저장됨.
DOM 트리의 텍스트, 속성 노드까지 자유롭게 제어하려면 querySelector( ), querySelectorAll( ) 메서드를 사용해야 함.
id 선택자처럼 반환값이 하나라면 querySelector( ) 메서드를 사용하고,
class 선택자나 태그 이름을 사용하여 여러 값이 한꺼번에 반환될 경우에는 querySelectorAll( ) 메서드를 사용함.
기본형 : 노드.querySelector(선택자)
노드.querySelectorAll(선택자 또는 태그)
querySelector( ), querySelectorAll( ) 메서드에서 선택자를 표시할 때
id 이름 앞에는 해시기호(#)를 붙이고, class 이름 앞에는 마침표(.)를 붙임. 태그는 기호 없이 태그명만 쓰면됨.
querySelector( ) 메서드에서 class 이름을 접근할 때는 class 이름을 사용한 여러 요소 중에서 첫 번째 요소만 반환함.
querySelector( ), querySelectorAll( ) 메서드의 반환값은 노드이거나 노드 리스트임.
노드 리스트는 노드를 한꺼번에 여러 개 저장한 것으로 배열과 비슷하다고 생각하면 됨.
※ 다양한 방법으로 DOM 요소에 접근하기
querySelector("#heading") // id="heading"인 요소
querySelectorAll(".bright") // class="bright"인 요소
② 웹 요소의 내용을 수정하는 innerText, innerHTML 프로퍼티
innerText 프로퍼티는 텍스트 내용을 표시하고 innerHTML 프로퍼티는 HTML 태그까지 반영하여 표시함.
기본형 : 요소명.innerText = 내용
요소명.innerHTML = 내용
※ innerText, innerHTML 프로퍼티 사용하기
Date 객체를 사용해서 현재 날짜와 시간을 나타내는 예제임.
날짜와 시간을 그대로 innerText 프로퍼티로 표시할 때와
innerHTML 프로퍼티로 <em> 태그와 같이 표시할 때 이러한 차이가 있음.
③ 속성을 가져오거나 수정하는 getAttribute( ), setAttribute( ) 메서드
웹 요소를 문서에 삽입할 때 태그 속성을 함께 사용하면 DOM 트리에 속성 노드가 추가되면서 속성값이 저장됨.
이때 속성에 접근하려면 getAttribute( ) 메서드를 사용하고,
접근한 속성의 값을 바꾸려면 setAttribute( ) 메서드를 사용함.
속성을 가져오려면 다음과 같이 getAttribute( ) 메서드에서 속성명을 지정함.
기본형 : getAttribute("속성명")
setAttribute( ) 메서드를 사용하면 원하는 속성값으로 지정할 수 있음.
속성값이 이미 있다면 새로운 속성값으로 수정하고, 아직 해당 속성이 없다면 속성과 속성값을 새로 추가함.
기본형 : setAttribute("속성명", "값")
※ 이미지 속성 가져오기
id="cup"인 이미지의 src 속성값을 가져오는 예제임.
큰 이미지를 클릭하면 그 이미지의 경로 속성을 가져와 알림 창에 표시함.
※ 작은 이미지를 클릭하면 큰 이미지 자리에 표시하기
setAttribute( ) 메서드를 사용해서 작은 이미지를 클릭했을 때 위의 큰 이미지 자리에 표시되도록 만든 예제임.
DOM에서 이벤트 처리하기
① DOM 요소에 함수 직접 연결하기
이벤트 처리기 함수가 간단하다면 DOM 요소에 직접 연결할 수 있음.
※ 이미지를 클릭하면 알림 창 표시하기
img 요소를 가져와 변수에 저장한 후 onclick을 사용해 변수에 이벤트 처리기(함수)를 직접 연결함.
이미지를 클릭하면 알림 창이 나타나지만 이미지 외의 다른곳을 클릭하면 실행되지 않음.
② 함수 이름을 사용해 연결하기
이벤트가 발생했을 때 실행할 함수를 따로 정의해 놓았다면 함수 이름을 사용해 연결할 수 있음.
이 경우에는 함수 이름 다음에 괄호를 추가하지 않음.
※ 이미지를 클릭하면 함수 실행하기
이미지를 cup 변수로 저장한 후 click이벤트가 발생했을 때 changePic( ) 함수를 실행함.
빨간 컵을 클릭하면 파란 컵 이미지로 바뀜.
③ DOM의 event 객체 알아보기
DOM에는 이벤트 정보를 저장하는 event 객체가 있음.
이 객체에는 웹 문서에서 이벤트가 발생한 요소가 무엇인지, 어떤 이벤트가 발생했는지 등의 정보가 들어있음.
※ 이미지에서 클릭한 위치 알아내기
이미지에 발생한 이벤트의 유형과 위치를 알림 창으로 보여 주는 예제임.
img 요소를 클릭하면 그 위치를 확인하기 위해 event 객체를 함수의 인수로 사용함.
※ event 객체의 프로퍼티와 메서드
| 구분 | 설명 | |
| 프로퍼티 | altKey | 이벤트가 발생할 때 Alt키를 눌렀는지 여부를 boolean값으로 반환함. |
| button | 마우스에서 누른 버튼의 키값을 반환함. | |
| charCode | keypress 이벤트가 발생할 때 어떤 키를 눌렀는지 유니코드값으로 반환함. | |
| clientX | 이벤트가 발생한 가로 위치를 반환함. | |
| clientY | 이벤트가 발생한 세로 위치를 반환함. | |
| ctrlKey | 이벤트가 발생했을 때 Ctrl키를 눌렀는지 여부를 boolean값으로 반환함. | |
| pageX | 현재 문서 기준으로 이벤트가 발생한 가로 위치를 반환함. | |
| pageY | 현재 문서 기준으로 이벤트가 발생한 세로 위치를 반환함. | |
| screenX | 현재 화면 기준으로 이벤트가 발생한 가로 위치를 반환함. | |
| screenY | 현재 화면 기준으로 이벤트가 발생한 세로 위치를 반환함. | |
| shiftKey | 이벤트가 발생했을 때 shift키를 눌렀는지 여부를 boolean값으로 반환함. | |
| target | 이벤트가 최초로 발생한 대상을 반환함. | |
| timeStamp | 이벤트가 발생한 시간을 반환함. | |
| type | 발생한 이벤트 이름을 반환함. | |
| which | 키보드와 관련된 이벤트가 발생할 때 키의 유니코드값을 반환함. | |
| 메서드 | preventDefault( ) | 이벤트를 취소할 수 있는 경우에 취소함. |
※ this 예약어 사용하기
event 객체에는 이벤트 정보만 들어 있음. 만약 이벤트가 발생한 대상에 접근하려면
이벤트 처리기에서 예약어 this를 사용해야 함.
다음 예제처럼 클릭한 이미지의 파일 경로를 알고 싶다면 this.src를 사용함.
④ addEventListener( ) 메서드 사용하기
addEventListener( ) 메서드와 event 객체를 사용하면 한 요소에 여러 이벤트 처리기를 연결해 실행할 수 있음.
addEventListener( ) 메서드는 끝에 세미콜록(;)을 꼭 붙여야 함.
기본형 : 요소.addEventListener(이벤트, 함수, 캡처 여부);
// 이벤트 : 이벤트 유형을 지정함. 단, click과 keypress처럼 on을 붙이지 않고 씀.
// 함수 : 이벤트가 발생하면 실행할 명령이나 함수를 지정함. 여기에서 함수를 정의할 때는 event 객체를 인수로 받음.
// 캡처 여부 : 이벤트를 캡처하는지 여부를 지정하며 기본값은 false이고 true와 false 중에서 선택할 수 있음.
true면 캡처링, false이면 버블링 한다는 의미임.
이벤트 캡처링은 DOM의 부모 노드에서 자식 노드로 전달되는 것이고,
이벤트 버블링은 DOM의 자식 노드에서 부모 노드로 전달되는 것임.
※ 마우스 포인터를 올리면 이미지 바꾸기
이미지 위로 마우스 포인터를 올려놓으면 다른 이미지로 바뀌었다가 내려놓으면 다시 원래 이미지로 돌아오는 예제임.
addEventListener( ) 메서드를 사용해서 changePic( ) 함수와 originPic( ) 함수를 이벤트 처리기로 사용함.
이 예제에서는 함수 changePic( )과 originPic( )을 따로 선언하고 사용했으나,
단순히 이벤트를 처리하는 함수라면, 즉 따로 다른 곳에서 다시 사용하는 함수가 아니라면
메서드 안에서 함수 표현식으로 사용하는 경우가 많음.
※ 메서드 안에서 함수 선언하기
addEventListener( ) 메서드 안에 함수를 함께 선언하면 특정 이벤트에서 어떤 명령을 실행하는지
한눈에 확인할 수 있어서 더욱 편리함.
다음 예제에서는 그림에 마우스 포인터를 올리면 이미지가 바뀜.
⑤ CSS 속성에 접근하기
CSS 속성에 접근하려면 해당 스타일이 적용된 HTML 요소 다음에 예약어 style을 쓰고 속성을 적음.
기본형 : document.요소명.style.속성명
// 속성명을 적을 때 border-radius처럼 중간에 하이픈(-)이 있는 속성은 borderRadius처럼 두 단어를 합쳐서 사용함.
이때 두 번째 단어의 첫 글자는 대문자로 표시함.
※ id가 desc인 요소의 글자색을 파란색으로 바꾸기
document.getElementById("desc").style.color = "blue";
※ 도형의 테두리와 배경색 바꾸기
사각형 위에 마우스 포인터를 올려놓으면 초록색 원으로 바뀌고, 내려놓으면 원래 도형으로 되돌아감.
라이트 박스 효과 만들기
① 프로그램의 흐름 정리하기
이 파일 소스에서 row 요소는 섬네일 이미지 6개의 영역이고, lightbox 요소는 라이트 박스의 영역임.
코드를 작성하기 전 이 프로그램은 어떠한 순서로 작동하는지 흐름을 정리해보면 다음과 같음.
(1) 섬네일 이미지 6개를 화면에 보여 줌.
(2) 섬네일 이미지 가운데 하나를 클릭하면 그 이미지르 라이트 박스 영역에 표시하고 화면에 나타나게 함.
(3) 화면에 나타난 라이트 박스 영역을 클릭하면 다시 라이트 박스를 감춤
② DOM 요소 가져오고 섬네일 이미지 보여 주기
웹 문서에서 사용할 DOM 요소를 모두 가져옴.
먼저 섬네일 이미지인 pic 요소를 모두 가져옴. 라이트 박스를 화면에 표시하거나 감추려면 lightbox 요소를 가져오고,
큰 이미지를 표시할 수 있도록 lightboxImage 요소도 따로 가져옴.
다음으로 섬네일 이미지를 클릭하면 실행할 함수를 정의하기 위해서는
다음과 같이 섬네일 이미지에 addEventListener( ) 메서드를 연결하고 click 이벤트와 showLightbox( ) 함수를 넣음.
③ 섬네일 이미지를 클릭하면 라이트 박스에서 보여 주기
섬네일 이미지를 클릭하면 실행할 showLightbox( ) 함수를 작성함.
클릭한 섬네일 이미지의 큰 이미지 파일 경로를 가져와서 라이트 박스에 있는 이미지의 파일 경로를 바꿔주면 됨.
여기에서는 addEventListener( ) 메서드를 이용해 클릭 이벤트와 함수를 연결함.
이것은 나중에 this 예약어를 사용해서 클릭한 대상(섬네일 이미지)의 속성값을 가져오는 역할을 함.
마지막으로 감춰 있던 라이트 박스를 화면에 표시함.
④ 라이트 박스 감추기
화면에 표시한 라이트 박스를 다시 감추면 완성임.
화면 아무 곳이나 클릭했을 때, 즉 라이트 박스를 클릭하면 라이트 박스를 닫음.
만약 [닫기] 버튼을 따로 만든다면 그 버튼을 가져와서 라이트 박스를 닫는 함수와 연결하면 됨.
여기에서는 lightbox 요소를 클릭하면 라이트 박스를 닫도록 작성함.
모든 소스를 작성한 후 저장하고 웹 브라우저에서 확인해 보면
섬네일 이미지 가운데 하나를 클릭하면 큰 이미지가 라이트 박스에 표시되고,
다시 화면 아무 곳이나 클릭하면 라이트 박스가 사라짐.
DOM에서 노드 추가·삭제하기
① 노드 리스트란
DOM에서 새로운 노드를 만들어 추가하거나 삭제하려면 노드 리스트를 사용해야 함.
노드 리스트란 DOM에 접근할 때 querySelectorAll( ) 메서드를 사용하면 노드를 한꺼번에 여러 개 가져올 수 있는데,
이때 노드 정보를 여러 개 저장한 것으로 배열과 비슷하게 동작함.
※ 노드 리스트 살펴보기
웹 브라우저에서 파일을 열고 콘솔 창을 실행한 후 다음과 같이 입력함.
현재 문서에서 li요소를 모두 가져오라는 뜻임.
→ document.querySelectorAll("li")
결괏값으로 NodeList(3) [li, li, li]라고 표시됨. li의 요소의 형태가 노드 리스트인 것을 알 수 있음.
이처럼 노드 리스트란 노드를 여러 개 저장한 데이터 형태를 말함.
다음과 같이 입력하면 li 노드 리스트 중에서 두 번째 노드를 가져올 수 있음.
→ document.querySelectorAll("li") [1]
결괏값으로 두 번째 텍스트인 CSS가 나타남.
② 텍스트 노드를 사용하는 새로운 요소 추가하기
[더 보기] 링크를 클릭하면 그 아래에 간단한 텍스트가 표시되는 스크립트 소스를 작성해보면
문서에는 단순히 <p> 태그 하나가 추가되어 보이지만 DOM에서는 여러 단계가 필요하다는 것을 알 수 있음.
다음 단계를 따라 새로운 요소를 추가하는 방법을 배우고, 마지막으로 전체 코드를 완성할 수 있음.
(1) 요소 노드 만들기 - createElement( ) 메서드
DOM에 새로운 요소를 추가할 때 가장 먼저 할 일은 요소 노드를 만드는 것임.
이때 사용하는 메서드는 createElement( )인데 괄호 안에 해당하는 요소 노드를 만들면 됨.
기본형 : document.createElement(노드명)
※ 새로운 p요소 노드 만들기
→ var newP = document.createElement("P");
하지만 createElement( ) 메서드는 새로운 노드를 만들 뿐 아직 웹 문서에 새로운 노드를 추가한 것은 아님.
이제 <p> 태그의 내용에 해당하는 텍스트 노드도 만들어야 함.
(2) 텍스트 노드 만들기 - createTextNode( ) 메서드
새로운 요소 노드를 만들었다면 그다음은 내용을 담는 텍스트 노드를 자식 노드로 만들어 연결해야 함.
텍스트 노드를 만드는 메서드는 createTextNode( ) 메서드이고 다음과 같은 형식으로 사용함.
기본형 : document.createTextNode(텍스트);
※ p요소의 텍스트 노드 만들기
새롭게 만든 p요소에 들어갈 내용이 있는 텍스트 노드는 txtNode 변수로 저장함.
→ var txtNode = document.createTextNode("DOM은 document object model의 줄임말입니다.");
(3) 자식 노드 연결하기 - appendChild( ) 메서드
아직까지는 노드를 만든 상태이며 부모 노드와 자식 노드로 연결되지 않았음.
appendChild( ) 메서드는 텍스트 노드나 속성 노드를 만든 후 요소 노드에 연결할 때 사용함.
이때 appendChild( ) 메서드를 사용해서 연결하는 노드는 자식 노드 중 맨 끝에 추가됨.
기본형 : 부모노드.appendChild(자식노드)
※ 텍스트 노드를 자식 노드로 연결하기
다음은 텍스트 노드 txtNode를 요소 노드 newP의 자식 노드로 연결하고,
newP 노드를 다시 <div id="info"></div>의 자식 노드로 연결함.
→ newP.appendChild(txtNode);
document.getElementById("info").appendChild(newP);
(4) 전체 소스 코드 완성하기
다음 예제를 보면 [더 보기] 링크를 클릭하는 부분에 addP( ) 함수와 this.onclick=' ' 코드가 추가되었음.
이것은 addP( ) 함수가 한 번만 실행되도록 하기 위한 것임.
만일 이 코드를 추가하지 않으면 링크를 클릭할 때마다 p요소가 계속 추가됨.
※ 링크를 클릭하면 텍스트 표시하기
③ 속성값이 있는 새로운 요소 추가하기
HTML 태그에서는 여러 가지 속성을 사용해서 웹 요소를 제어함.
따라서 새로운 요소를 만들면 그와 관련된 속성 노드도 만들어서 자식 노드로 연결해야 함.
앞의 예제에 이어서 '더 보기' 링크를 클릭하면 그 아래에 텍스트는 물론 이미지까지 표시되는
스크립트 소스를 추가로 작성하려고 할 때
웹 문서에서 새 이미지를 보여 주려면 img 요소 노드를 추가한 후 src 속성 노드를 만들어 자식 노드로 연결해야 함.
(1) 요소 노드 만들기 - createElement( ) 메서드
텍스트 노드를 추가했던 방법과 마찬가지로 createElement( ) 메서드를 사용해서 새로운 이미지 노드를 만듦.
※ 이미지 노드 추가하기
→ var newImg = document.createElement("img");
(2) 속성 노드 만들기 - createAttriibute( ) 메서드
img 요소는 src 속성을 사용해서 이미지 파일의 경로를 지정해야 브라우저에 이미지를 보여 줄 수 있음.
그래서 createAttriibute( ) 메서드를 사용해서 속성 노드를 만들어야 함.
※ 속성 노드 만들기
→ document.createAttriibute(속성명)
※ 이미지의 src와 alt 속성 만들고 지정하기
다음은 이미지 파일의 경로를 지정할 src와 대체 텍스트를 지정할 alt를 위해 속성 노드를 추가하는 예제임.
속성 노드를 만든 후 속성값은 value 프로퍼티를 사용해서 지정함.
→ var srcNode = document.createAttriibute("src");
var altNode = document.createAttriibute("alt");
srcNode.value = "images/dom.jpg"; // src 속성값 지정
altNode.value = "돔 트리 예제 이미지"; // alt 속성값 지정
(3) 속성 노드 연결하기 - setAttriibuteNode( ) 메서드
속성 노드는 요소 노드의 자식으로 연결해야 함.
새로 만든 속성 노드를 요소 노드에 추가하려면 setAttriibuteNode( ) 메서드를 사용함.
※ 요소 노드의 자식으로 속성 노드 연결하기
→ 요소명.setAttriibuteNode(속성노드)
※ 이미지의 src 속성 노드 연결하기
만약 추가할 속성이 요소 노드에 이미 들어 있다면 기존 속성 노드를 새 속성 노드로 대체함.
다음은 newImg라는 새 이미지 요소를 만들고 srcNode라는 속성 노드를 추가하여 작성한 것임.
다른 속성도 같은 방법으로 얼마든지 추가할 수 있음.
→ newImg.setAttriibuteNode(srcNode);
(4) 자식 노드 연결하기 - appendChild( ) 메서드
속성 노드까지 연결했지만 아직 img 요소는 만들어 놓기만 한 상태임.
img 요소를 화면에 표시하려면 웹 문서의 DOM에 추가해야 함.
그러려면 appendChild( ) 메서드를 사용해서 필요한 위치에 자식 노드로 추가하면 됨.
다음은 #info 위치에 새로 만든 img 요소를 자식 요소로 추가하는 예제임.
→ document.getElementById("info").appendChild(newImg);
(5) 전체 소스 코드 완성하기
※ 링크를 클릭하면 텍스트와 이미지 표시하기
<a> 태그에 있는 [더 보기] 링크를 클릭하면 <p> 태그를 사용한 텍스트와 images\doit.jpg 이미지를 표시하는 예제임.
앞에서 추가한 텍스트 노드(newP)에 이미지 노드(newImg)를 추가한 예제임.
④ 노드 삭제하기
노드를 삭제할 때 기억해 둘 것은 부모 노드에서 자식 노드를 삭제해야 한다는 것임.
즉, 삭제해야 할 노드가 있다면 반드시 부모 노드 먼저 찾아야 함.
그래서 노드를 삭제하는 메서드 외에 부모 노드를 찾는 프로퍼티가 필요함.
(1) parentNode 프로퍼티
DOM 트리의 노드는 바로 삭제할 수 없으므로 먼저 부모 노드에 접근해야 함.
그러려면 삭제할 노드의 부모 노드를 찾아가는 방법을 알아야 함.
parentNode 프로퍼티는 현재 노드의 부모 노드에 접근해서 부모 노드의 요소 노드를 반환함.
기본형 : 노드.parentNode
앞에서 살펴본 파일을 웹 브라우저에서 열고 CSS 항목의 부모 노드를 찾기 위해서는
웹 브라우저에서 콘솔 창을 열어 다음과 같이 입력하고 Enter키를 누르면 됨.
→ document.querySelectorAll("li")[1].parentNode
그러면 위와 같이 li 노드의 부모 노드인 ul 노드가 보임.
이렇게 parentNode 프로퍼티를 사용하면 현재 노드의 부모 노드를 찾을 수 있음.
(2) removeChild( ) 메서드
removeChild( ) 메서드는 이름에서도 알 수 있듯이 자식 노드를 삭제하는 역할을 함.
부모 노드만 찾는다면 removeChild( ) 메서드를 사용하는 것은 간단함.
기본형 : 부모노드.removeChild(자식노드)
※ li 노드 삭제하기
li 노드를 삭제하려면 li의 부모 노드에서 삭제해야 하므로 다음과 같이 작성하면 됨.
→ li.parentNode.removeChild(li)
텍스트 필드에 입력한 값을 화면에 표시하기
① HTML 파일 확인하기
웹 브라우저에서 파일을 열면 아래 그림과 같이 텍스트 필드와 [추가] 버튼이 보임.
텍스트 필드에 값을 여러 번 입력하면 화면에 입력값이 여러 개 나타나도록 수정해야 함.
그리고 id 값을 확인해 보면 텍스트 필드 요소의 id 값은 subject이고,
② 새로운 요소 만들고 연결하기
새로 만들 요소는 <ul> 태그 사이에 들어갈 li 요소 노드임.
텍스트 필드에 입력한 값을 가져와 새로운 텍스트 노드를 만들고 li 요소 노드에다가 자식 노드로 추가하면 됨.
③ 추가 버튼 만들기
요소를 만드는 함수를 작성했으므로 버튼을 클릭하면 실행하도록 만들어야 함.
기본의 <button> 태그를 다음과 같이 수정함. 이때 return false를 추가하는 이유는
버튼의 기본 기능인 submit 역할을 취소하기 위한 것임.
이 기능을 취소하지 않으면 함수를 실행하지 않고 기본 기능을 먼저 실행하기 때문임.
기본 기능을 끄고 함수만 실행하라고 알려 주기 위해 작성함.
이렇게 수정한 문서를 저장한 후 웹 브라우저에서 확인해 보면
텍스트 필드에 값을 입력하고 [추가] 버튼이나 Enter키를 누르면 입력한 값이
텍스트 필드 아래에 표시됨. 값을 여러 개 입력해도 모두 나열되어 나타남.
※ 마지막에 입력한 값을 맨 위에 나타내는 방법
appendChild( ) 메서드를 이용하면 새로운 노드를 부모 노드의 맨 끝에 추가함.
그래서 가장 마지막에 입력한 값은 목록 맨 아래에 표시됨.
이 순서를 바꿔서 표시하려면 부모 노드와 자식 노드의 관계를 파악한 후 마지막 자식 노드를 맨 앞에 추가하면 됨.
itemList의 자식 노드 중에서 맨 앞의 자식 노드는 itemList.childNodes[0]으로 접근할 수 있음.
이 노드의 앞에 새로운 노드를 추가하도록 수정하면 됨.
ex. itemList.appendChild(newItem); → itemList.insertBefore(newItem, itemList.childNodes[0]);
입력한 항목을 클릭하여 삭제하기
① li 요소 가져오기
텍스트 필드에서 입력한 내용은 <li> 태그를 사용해 계속 추가할 수 있음.
항목을 삭제하기 위해서는 입력한 텍스트를 가져온 후 거기에서 click 이벤트가 발생하면
그 항목의 부모 노드를 찾아서 li 요소를 삭제하라고 하면 됨.
우선 기존에 작성한 newRegister( ) 함수의 맨 끝에 다음과 같이 코드 한 줄을 추가함.
② 항목을 클릭하면 실행할 함수 작성하기
노드 리스트에 있는 요소 전체를 반복하면서 click 이벤트가 발생하면 실행할 함수를 연결함.
앞에서 입력한 소스 다음에 for문을 추가하면 됨.
그리고 노드 삭제는 부모 노드에서 해야하므로
부모 노드가 있을 때만 부모 노드에서 현재 객체를 삭제할 수 있도록 다음과 같은 코드를 추가함.
이후 작성한 소스를 저장하고 웹 브라우저에서 확인해 보면
몇 가지 항목을 입력해서 추가한 뒤 그 항목을 클릭하면 클릭한 항목이 삭제가 되는 것을 알 수 있음.
'코딩 국비 학원 > Do it! HTML+CSS+자바스크립트' 카테고리의 다른 글
| [Do it! HTML+CSS+자바스크립트]자바스크립트와 객체 (0) | 2022.12.23 |
|---|---|
| [Do it! HTML+CSS+자바스크립트]함수와 이벤트 (0) | 2022.12.22 |
| [Do it! HTML+CSS+자바스크립트]자바스크립트 기본 문법 (0) | 2022.12.21 |
| [Do it! HTML+CSS+자바스크립트]자바스크립트와 첫 만남 (0) | 2022.12.21 |
| [Do it! HTML+CSS+자바스크립트]반응형 웹과 미디어 쿼리 (0) | 2022.12.20 |
