1. DOM 트리와 노드/노드 리스트
- DOM에는 단순히 태그에 해당하는 요소 노드 뿐만 아니라 여러 종류의 노드가 있음
> 노드를 구성하는 원칙
- 모든 HTML 태그는 요소 노드가 됨
- HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트 노드가 됨
- HTML 태그에 있는 속성은 모두 자식 노드인 속성 노드가 됨
- 주석들은 주석 노드가 됨
> 노드 리스트
- querySelectorAll() 메소드를 사용하면 여러 개의 노드를 한꺼번에 가져올 수 있음
- 노드 리스트 : 가져온 여러개의 노드 정보를 저장한 것
- 노드 리스트는 배열과 비슷하게 생겼고 배열은 아니지만 배열처럼 사용할 수 있음
- Q : p 요소 노드들을 저장한 노드 리스트 중에서 두 번째 노드를 가져오려면? A : document.querySelectorAll("p")[1]
2. 새로운 노드 추가하기
(1) 웹 문서에 새로운 노드 추가 > 텍스트 내용과 속성 추가 > 자식 노드 연결
- Q : 웹 문서에서 처음에는 화면에 보이지 않다가 이벤트가 발생했을 때 화면에 특정한 내용이 표시되도록 하려면 어떻게 해야 할까요?
- A : 특정 이벤트가 발생했을 때 DOM 트리거에 새로운 노드를 추가함
ⓐ 새롭게 추가할 노드에 텍스트 내용만 있는 경우
- 텍스트 노드를 만들고(텍스트 내용이 있는 노드)
- 요소 노드를 만들어서(예 <p>)
- 텍스트 노드를 요소 노드에 연결한 후(<p> 텍스트 내용 </p>)
- 원하는 영역에 추가(head, title 등 원하는 위치에 추가)
| <body> <h1> 노드 리스트 살펴보기 </h1> <p>HTML</p> <p>CSS</p> <p>JavaScript</p> <p>텍스트 노드 추가</p> </body> |
- createElement() : DOM에 새로운 요소를 추가할 때 가장 먼저 요소 노드를 만들어야 함
- 콘솔창에 입력하기 :
| 노드 정의 : let newP = document.createElement("p") > 노드 정의한 것뿐, 내용과 속성이 없고 연결이 안됨 |
| 노드에 내용과 속성 저장 : let testNode = document.createTextNode("Typescript") > 새로운 p의 요소에 들어갈 내용을 텍스트 노드로 만들고 textNode라는 변수에 저장 > 속성과 내용은 넣었지만, 연결이 아직 안됨 |
| 바디에 들어가게 연결하기 : newP.appendChild(textNode) / document.body.appendChild(newP) > 부모 노드와 자식 노드로 연결해줌 |
(2) 속성 값이 있는 노드 추가하기
- HTML 태그에서는 여러 가지 속성을 사용해서 웹 요소를 제어함
- 속성이 필요한 요소를 추가할 때는 속성 노드도 함께 만들어서 자식 노드로 연결해야 함
- 예를 들어 이미지 표현 시 src 속성은 Source의 의미로 이미지가 저장된 위치를 저장함, 이 또한 이미지 노드의 속성임
- (1)의 예시에서 이미지를 추가한다고 가정
| 노드 정의 : let newImg = document.createElement("img") |
| 속성 혹은 텍스트 정의 : let srcNode = document.createAttribute("src") |
| 속성에 내용 삽입 : srcNode.value = "C:\Users\유혜민\OneDrive\사진\KakaoTalk_20221126_103747305" |
| 속성 노드 연결하기 : newImg.setAttributeNode(srcNode) |
| 부모 노드와 자식 노드로 연결 : document.body.appendChild(newImg) |
(3) 기존 노드 앞에 추가하기
- 지금까지 살펴본 방법은 새로 만든 요소를 부모 노드의 맨 마지막에 자식 노드를 추가하는 것
- insertBefore()를 사용하면 특정 노드 앞에 새 요소를 추가할 수 있음
- (1)과 (2) 사이에 노드를 추가해보자
| 요소 정의 : let tsNode = document.createElement("p") |
| 테스트 내용 : let tsTestNode = document.createTextNode("두번째 만들기") |
| 테스트 연결 : tsNode.appendChild(tsTestNode) |
| 기존 노드 앞에 연결 : let basisNode = document.querySelectorAll("img")[0] // 첫번째 p 요소를 기준으로 정하기 document.body.insertBefore(tsNode, basisNode) |
3. 노드 삭제하기
(1) 노드 삭제하기
- remove()는 삭제하려는 요소에서 사용하는 메서드
- 2(3)의 p값을 없애보자
| 위치 지정하기 : heading = document.querySelectorAll("p")[1] |
| 삭제 : heading.remove() |
- removeChild() 자식 노드를 삭제하는 메서드
- 이 메서드를 사용하려면 우선 부모 노드를 찾아야하고, 그 후에 자식 노드를 삭제해야 함
- IE : removeChild() 메서드만 사용할 수 있어서, 주로 removeChild()를 사용함
- 모던 브라우저(크롬) : remove() 메서드를 사용해도 됨
(2) 이벤트 리스너에서 함수 안에 있는 this, 삭제 버튼 클릭해서 삭제하기
- 이벤트 리스너에서 function() {...}에 this를 사용하면, this는 이벤트가 발생한 노드를 가르킴
- 첫 번째 항목을 클릭했다면, 첫번째 li 요소가 this가 됨
- 이벤트 리스너에서 화살표 함수를 사용할 경우, this는 최상위 객체 window를 가르킴
- 화살표 함수를 사용할 경우 클릭한 요소를 찾을 때 this를 사용할 수 없음
- 이벤트가 발생한 요소를 this로 사용하려면 function () {...}를 사용해야 함
| item.addEventListener("click", function() { this.parentNode.removeChild(this); }); |
4. 최상위 객체 Window
(1) 내장 객체란?
- 사용자가 가져다 쓸수 있도록 미리 만들어진 객체
- 웹 브라우저에 웹 문서가 열리면 가장 먼저 window 객체가 만들어지고 하위에 웹 브라우저 요소에 해당하는 객체들이 만들어짐
- window 객체를 비롯해 하위에 연결된 객체들은 모두 HTML 웹 API에 만들어진 객체들
(2) Window 객체
- 웹 브라우저 창의 상태를 제어하는 객체
- 가장 최상위, 기본의 객체
- 웹 브라우저 창과 관련된 여러 속성이 있음
- window 객체의 속성과 메서드에 접근하는 마침표(.)를 사용함
(3) Window 객체의 주요 메서드
- document, frameElement, innerHeight, localStorage, location, name, outerHeight, pageXOffset, parent, screenX, scrollX, sessionStorage
- 대화창을 표시하거나 브라우저 창의 크기나 위치를 알아내고 지정하는 등 웹 브라우저 창 자체와 관련된 것이 대부분
- alert(), prompt() 함수도 window 함수에 해당
- 객체의 함수 표기법에 따르면 window.alert()으로 표기해야 하지만, window. 생략 가능
- alert(), blur(), close(), comfirm(), focus(), moveBy(), open(), postMessage(), print(), prompt(), resizeBy(), scroll(), setCursor(), showModalDialog(), stop() ....
(4) 팝업 창을 여는 open() 함수
- open(경로, 창 이름, 창 옵션) 함수를 사용하면 현재 창이나 새 탭, 새로운 알림 창 등 다양한 형태로 새 창을 열 수 있음
- 창 이름을 지정하지 않으면, 팝업 창이 계속 새로 나타남
- 위치를 지정하지 않으면 화면의 맨 왼쪽 위에 나타남
| open("notice.html", "", "width=600, height=500") |
| // 버튼을 클릭했을 때 팝업이 열리게 만들기 function openPopup() { window.open( "notice.html", "", "width=600 height=500 left=300 top=200") } const bttn = document.querySelector("button"); bttn.onclick = openPopup; |
(5) 브라우저 창을 닫는 close() 함수
| <button onclick = "close()" >닫기</button> |
(6) screen 객체
- 사용자의 화면 크기나 방향 등의 정보를 담고 있는 객체
- availHeight, colorDepth, orientation, pixelDepth, Width, Height, lockOrientation ...
(7) 팝업창, 화면 가운데 표시하기
- 팝업창의 기본 위치는 화면의 왼쪽 위, 가운데 배치를 위해서는 위치를 계산해야 함
- Q : 화면의 너미 1000px, 높이 600px, 팝업 창의 너비 500px 높이 400px이라면? 가운데 정렬
- A : open("notice.html", "event", "width=100 height=100 left=100 top=100");
- 듀얼 모니터는 적용 안됨, 1번 모니터에만 가운데로 표시
(8) history 객체
- history 객체에는 브라우저에서 뒤로나 앞으로 또는 주소 표시줄에 입력해서 방문한 사이트 주소가 배열 형태로 저장
- 브라우저 히스토리는 보안 문제 때문에 읽기 전용임
- 프로퍼티 : length, back(), forward(), go() : go(-1)은 이전 페이지, go(2)는 2번 이후 페이지
(9) location 객체
- 현재 문서와 URL 주고와 관련된 정보가 들어있음
- 프로퍼티 : hash, host, hostname, href, pathname, port, protocol, password, search, username
5. Data 객체 활용하기
(1) Data 객체,Data 객체의 인스턴스 만들기
- 자바 스크립트에 저의된 내장 객체를 사용할 때, 객체의 프로퍼티와 메서드를 가진 새로운 객체를 만든 후 여기에 식별자를 붙여 프로그래밍에서 사용, Date 객체를 사용하려면 자바 스크립트의 Date 객체를 똑같이 만들어서 사용함
- 인스턴스 객체 : 내장 객체와 똑같은 모양으로 찍어낸 객체
- new Date() / let today = new Date() / today.getDate() / new Date("2025-02-25") / new Date("2025-02-25T 18:00:00")
(2) 자바 스크립트 날짜, 시간 입력 방식, Data 객체의 메서드, 자바 스크립트 시간 단위
- YYYY-MM-DD 형태로 지정
- YYYY-MM-DD THH:MM:SS로 저장
- MM/DD/YYYY로도 사용 가능
- getFullYear(), getTime() : 1970년 1월 1일 0:0:0 이후의 시간, getHour() >> get은 시간 정보를 가져오는 메서드
- setFullYear() .... >> set이 붙으면 시간 정보를 설정하는 메서드
- toGMTString() >> to는 형식을 바꾸는 메서드
6. Math 객체 활용하기
- 삼각 함수나 로그 함수를 비롯한 수학 연산 함수를 가진 내장 객체
- 메서드 : abs, cbrt(세제곱근), ceil, floor, random, round() ...
- 예시 : Math.PI, Math.round(x), (3.141595)toFixed(3) = 소수점 이하 셋째 자리 까지 = 3.142, Math.random() : 0부터 1사이의 값