<인터랙티브 자바스크립트 >
자바스크립트는 원래 브라우저를 다루기 위해 등장한 언어
윈도우 객체는 브라우저의 창을 대변한다
//window 객체 출력
console.log(window);
console.log(window.innerWidth); // 탭 내부의 너비
console.log(window.innerHeigth);// 탭 내부의 높이
window.open() → 새로운 창이 열림
window.close() → 새로운 창을 닫음
윈도우 객체는 자바스크립트의 다른 모든 객체를 포함하고 있다
→ 따라서 윈도우 객체를 전역 개체라고도 부른다
DOM
문서 객체 모델
웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공
//DOM (Document Object Model) 문서 객체 모델
console.log(document); 1
console.log(typeof document); 2
console.dir(document); 3
☑️실행결과
console.dir와 console.log 차이점
1. 출력하는 자료형이 다르다
dir 메소드는 문자열 표시 형식으로 콘솔에 출력
2. log는 값 자체에, dir은 객체의 속성에
log 메소드는 파라미터로 전달받은 값을 위주로 출력하는 반면, dir 메소드는 객체의 속성을 좀 더 자세하게 출력
3. log는 여러 개, dir은 하나만!
log 메소드는 여러 값을 쉼표로 구분해서 전달하면 전달받은 모든 값을 출력하는 반면, dir 메소드는 여러 값을 전달하더라도 첫 번째 값만 출력
4. DOM 객체를 다룰 때
log 메소드는 대상을 HTML 형태로 출력하고, 객체의 속성에 좀 더 중점을 둔 dir 메소드는 대상을 객체 형태로 출력
콘솔에서 값 자체를 확인하고 싶다면 `log`메소드를, 객체의 속성들을 살펴보고 싶다면 `dir` 메소드를 활용
DOM 트리
• DOM트리에선 각 개체를 노드라고 표현한다
• 같은 층에 있는 노드를 형제 노드라고 부른다
• 자식노드가 없는 계층을 리프 노드라고 부른다
💡 태그를 표현 하는 노드 → 요소 노드
문서를 표현 하는 노드 → 텍스트 노드
HTML 태그는 요소 노드 가 되고,
문자들은 텍스트 노드
,그리고 주석도 주석 노드로 DOM 트리에 반영된다
//DOM 트리 여행하기
const myTag = document.querySelector('#content');
console.log(myTag);
//형제 요소 노드
console.log(myTag.previousElementSibling);
console.log(myTag.nextElementSibling);
//부모 요소 노드
console.log(myTag.parentElement);
//자식 요소 노드
console.log(myTag.children);
console.log(myTag.firstElementChild);
console.log(myTag.lastElementChild);
| 프로퍼티 | 유형 | 결과 |
| element.children | 자식 요소 노드 | element의 자식 요소 모음(HTMLCollection) |
| element.firstElementChild | 자식 요소 노드 | element의 첫 번째 자식 요소 하나 |
| element.lastElementChild | 자식 요소 노드 | element의 마지막 자식 요소 하나 |
| element.parentElement | 부모 요소 노드 | element의 부모 요소 하나 |
| element.previousElementSibling | 형제 요소 노드 | element의 이전(previous) 혹은 좌측(left)에 있는 요소 하나 |
| element.nextElementSibling | 형제 요소 노드 | element의 다음(next) 혹은 우측(right)에 있는 요소 하나 |
요소 노드 프로퍼티
innerHTML
1. 요소 안에 있는 HTML 자체를 문자열로 리턴해준다 (태그와 태그 사이의 줄바꿈이나 들여 쓰기 부분들도 모두 포함된다)
//요소 노드 주요 프로퍼티
const myTag = document.querySelector('#list-1'); // list-1 안에 있는 html 출력
// innnerHTML
console.log(myTag.innerHTML);
☑️실행결과
2. 요소 안에 HTML을 수정할 때 좀 더 자주 활용된다
//요소 노드 주요 프로퍼티
const myTag = document.querySelector('#list-1');
// innnerHTML
console.log(myTag.innerHTML);
myTag.innerHTML ='<li>Exotic</li>';
//myTag.innerHTML +='<li>Exotic</li>'; //마지막 요소로 추가
☑️실행결과
outerHTML
1. outerHTML은 해당 요소를 포함한 전체 HTML 코드를 문자열로 리턴해준다
//요소 노드 주요 프로퍼티
const myTag = document.querySelector('#list-1');
//outerHTML
console.log(myTag.outerHTML);
☑️실행결과
<ul> 요소까지 전부 포함된 채 리턴된다
2. innnerHTML과 마찬가지로 outerHTML에 새로운 HTML 코드를 할당할 수 있다 (요소 자체가 새로운 요소로 교체된다)
//요소 노드 주요 프로퍼티
const myTag = document.querySelector('#list-1');
//outerHTML
console.log(myTag.outerHTML);
myTag.outerHTML='<ul ld = "new-list"><li>Exotic</li></ul>';
💡outerHTML에 값을 할당하게 되면 처음 선택한 요소는 사라진다는 점 유의
☑️실행결과
textContent
1. HTML을 제외한 텍스트만 가져온다 (inner HTML과 유사하지만 다른 점 )
//요소 노드 주요 프로퍼티
const myTag = document.querySelector('#list-1');
//textContext
console.log(myTag.textContent);
☑️실행결과
2. 새로운 값을 할당해서 요소 안의 값을 수정할 수 있다
//요소 노드 주요 프로퍼티
const myTag = document.querySelector('#list-1');
//textContext
console.log(myTag.textContent);
myTag.textContent ='new text';
💡textContent는 텍스트만 다루기 때문에 특수문자도 텍스트로 취급한다
☑️실행결과
사용자의 입력값을 웹 페이지에 반영해야 될 때 textContent 주로 사용 (원하지 않는 html 코드 웹페이지 추가되는 것을 방지)
요소 노드 추가하기
innerHTML, outerHTML 은 기존의 내용을 덮어쓰는 방식으로 동작한다
→ 요소 노드 추가를 위해서 createElement 메소드 사용
const today = document.querySelector('#today');
today.innerHTML = '<li>처음</li>' + today.innerHTML;
today.innerHTML = today.innerHTML + '<li>마지막</li>';
today.outerHTML = '<p>이전</p>' + today.outerHTML;
const newToday = document.querySelector('#today');
newToday.outerHTML = newToday.outerHTML + '<p>다음</p>';
//요소 노드 추가하기
const tomorrow = document.querySelector('#tomorrow');
//1. 요소 노드 만들기 : document.createElement('태그이름');
const first = document.createElement('li');
//2. 요소 노드 꾸미기 : textContent, innnerHTML, ...
first.textContent='처음';
//3. 요소 노드 추가하기 : NODE ,prepend, append, after ,before
tomorrow.prepend(first)
prepend나 before의 경우
요소를 앞으로 추가하기 때문에 여러 개의 값을 전달하게 되면 하나씩 앞으로 추가하면서 역순으로 추가 될 것 같지만 아님
→ 파라미터를 한 번에 해당 위치에 추가함
노드 삭제와 이동하기
//노드 삭제와 이동
const today= document.querySelector('#today');
const tomorrow = document.querySelector('#tomorrow');
// 노드 삭제하기 : Node.remove();
tomorrow.remove();
today.children[2].remove();
//노드 이동하기 : prepend, append , before, after
today.append(tomorrow.children[1]);
HTML 속성 다루기
요소 노드의 메소드를 활용해서 HTML 태그가 가지고 있는 속성들을 다루는 방법
1. 메소드를 통해서 속성에 접근하는 법
→ getAttribute 메소드를 활용한다
// elem.getAttribute('속성'): 속성에 접근하기
console.log(tomorrow.getAttribute('href')); // href 속성에 접근
console.log(item.getAttribute('class')); // class 속성에 접근
💡클래스 속성은 프로퍼티 이름으로 접근할 때는 className, getAttribute를 활용할 때는 class로 접근!
2. 메소드를 통해서 속성을 추가하는 법
→ setAttribute 메소드를 활용한다
// elem.setAttribute('속성', '값'): 속성 추가(수정)하기
tomorrow.setAttribute('class', 'list'); // 추가
link.setAttribute('href', '<https://www.codeit.kr>'); // 수정 (이미 존재하는 속성인 경우)
3. 메소드를 통해서 속성을 삭제하는 법
→ removeAttribute 메소드를 활용한다
// elem.removeAttribute('속성'): 속성 제거하기
tomorrow.removeAttribute('href');
tomorrow.removeAttribute('class');
스타일 다루기
자바스크립트로 스타일을 다루는 방법
1. style 프로퍼티를 활용
//style 프로퍼티
today.children[0].style.textDecoration = 'line-through';
today.children[0].style.backgroundColor = '#DDDDDD';
style 프로퍼티를 활용하면 태그에 직접적으로 값이 적용됨 → 스타일 우선순위가 높아져버리는 문제 발생
→ 태그의 클래스를 변경하는 방식이 좀 더 권장된다
2. 태그의 클래스를 변경하는 방식 (좀 더 권장되는 방식)
//elem.className
today.children[1].className = 'done';
.done{
opacity: 0.5;
text-decoration: line-through ;
}
💡className으로 변경하면 클래스 속성값 전체가 바뀌게 된다
→ classList 프로퍼티를 활용
3. classList 활용
class의 속성값을 유사 배열로 다루는 프로퍼티
클래스를 좀 더 편하게 다룰 수 있는 add, remove, toggle이라는 메소드도 활용할 수 있다
//elem.classList: add, remove, toggle
const item=tomorrow.children[1]; // 첫번째 자식요소에 done클래스 추가
item.classList.add('done','other');
item.classList.remove('done','other');
item.classList.toggle('done','other');
toggle은 있으면 제거하고 없으면 추가하는 메소드
toggle의 두번째 파라미터는 boolean값을 받는다
→ true면 add만 false면 remove만 기능한다
비표준 속성 다루기
[속성 이름] 처럼 대괄호를 이용하면 대괄호 안에 있는 속성이름을 가진 태그들 선택 가능
[속성이름=”값”] 처럼 작성하면 속성이름에 해당 값을 가진 태그들을 선택
비표준 속성 활용
1. 선택자로 활용
2. 값을 표시할 태그를 구분할 때 활용
3. 스타일이나 데이터 변경에 활용
dataset 프로퍼티
비표준 속성을 사용하기 위해 미리 약속된 방식이 존재 → `data-*` 속성
`data-`로 시작하는 속성은 모두 dataset이라는 프로퍼티에 저장된다
`data-status`라는 속성이 있다면, `element.dataset.status`라는 프로퍼티에 접근해서 그 값을 가져올 수 있는 것
✍️요약 정리
1. window 객체
window 객체는 브라우저 창을 대변하면서 자바스크립트에서 최상단에 존재하는 객체
2.DOM
문서 객체 모델
각 객체를 노드(Node)라는 용어로 표현하고, 태그는 요소 노드, 문자는 텍스트 노드로 구분
3.DOM 트리
HTML의 계층 구조는 DOM에서도 반영되는데 이러한 계층구조를 나무에 비유해서 DOM 트리
4. DOM 이동 시 활용 가능한 프로퍼티
| element.children | 자식 요소 노드 | element의 자식 요소 모음(HTMLCollection) |
| element.firstElementChild | 자식 요소 노드 | element의 첫 번째 자식 요소 하나 |
| element.lastElementChild | 자식 요소 노드 | element의 마지막 자식 요소 하나 |
| element.parentElement | 부모 요소 노드 | element의 부모 요소 하나 |
| element.previousElementSibling | 형제 요소 노드 | element의 이전(previous) 혹은 좌측(left)에 있는 요소 하나 |
| element.nextElementSibling | 형제 요소 노드 | element의 다음(next) 혹은 우측(right)에 있는 요소 하나 |
| node.childNodes | 자식 노드 | node의 자식 노드 모음(NodeList) |
| node.firstChild | 자식 노드 | node의 첫 번째 자식 노드 하나 |
| node.lastChild | 자식 노드 | node의 마지막 자식 노드 하나 |
| node.parentNode | 부모 노드 | node의 부모 요소 하나 |
| node.previousSibling | 형제 노드 | node의 이전(previous) 혹은 좌측(left)에 있는 노드 하나 |
| node.nextSibling | 형제 노드 | node의 다음(next) 혹은 우측(right)에 있는 노드 하나 |
5. 주요 요소 노드 프로퍼티
| element.innerHTML | 요소 노드 내부의 HTML코드 문자열로 리턴 | 요소 안의 정보를 확인할 수도 있지만,내부의 HTML 자체를 수정할 때 좀 더 자주 활용 |
| element.outerHTML | 요소 노드 자체의 전체적인 HTML 코드를 문자열로 리턴 | outerHTML은 새로운 값을 할당하면요소 자체가 교체되어 버리기 때문에 주의 |
| element.textContent | 요소 노드 내부의 내용들 중에서 HTML을 제외하고 텍스트만 리턴 | textContent는 말그대로 텍스트만 다루기 때문에HTML태그를 쓰더라도 모두 텍스트로 처리됨 |
6. 요소 노드 다루기
- 요소 노드 만들기: document.createElement('태그이름')
- 요소 노드 꾸미기: element.textContent, element.innerHTML,element.outerHTML
- 요소 노드 추가 혹은 이동하기: element.prepend, element.append, element.after, element.before
- 요소 노드 삭제하기: element.remove()
7. HTML 속성 다루기
- 속성에 접근하기: element.getAttribute('속성')
- 속성 추가(수정)하기: element.setAttribute('속성', '값')
- 속성 제거하기: element.removeAttribute('속성')
8. 스타일 다루기
- style 프로퍼티 활용하기: element.style.styleName = 'value';
- class 변경을 통해 간접적으로 스타일 적용하기: element.className, element.classList
8-1. classList의 유용한 메소드
| classList.add | 클래스 추가하기 | 여러 개의 값을 전달하면 여러 클래스 추가 가능 |
| classList.remove | 클래스 삭제하기 | 여러 개의 값을 전달하면 여러 클래스 삭제 가능 |
| classList.toggle | 클래스 없으면 추가, 있으면 삭제하기 | 하나의 값만 적용 가능하고,두 번째 파라미터로 추가 또는 삭제 기능을 강제할 수 있음 |
'💻 Programming > Javascript' 카테고리의 다른 글
| 인터랙티브 자바스크립트 : 이벤트 (0) | 2024.06.08 |
|---|---|
| 인터랙티브 자바스크립트 : 태그 선택하기 (2) | 2024.06.08 |
