🔥 DOM 기초
DOM(Document Object Model)
: HTML, XML 문서의 프로그래밍 인터페이스이다. 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
1. HTML에 JavaScript 적용하기
HTML에 JavaScript를 적용하기 위해 <scipt> 태그를 이용한다.
<script src="파일명.js"></script><scipt>요소는 등장과 함께 실행된다.
JavaScript에서 DOM은 document객체에 구현되어 있고,
브라우저에서 작동되는 JavaScript 코드는 어디에서나 document 객체를 조회할 수 있다.
- console.dir : DOM 구조 조회할 때 사용 ( console.log와 달리 DOM을 객체의 모습으로 출력 )
consoel.dir(document.body.children)
: document.body를 통해 출력된 객체에서 children 요소를 가리키는 속성
( + 변수를 선언하여 정보를 저장해두면 언제든지 접근 가능하다. )
parentElement: 부모 요소를 반환하는 속성 (부모가 없거나 부모가 DOM이 아닌 경우 null 반환)
DOM tree
🔥 DOM 다루기
DOM을 JavaScript로 조작해 HTML Element를 생성, 조회, 갱신, 삭제할 수 있다.
=> CRUD(Create, Read, Update and Delete)
1. CREATE (생성)
: 새로운 element를 만드는 방법
document.createElement() : 지정한 tagName의 HTML 요소를 만들어 반환한다.
document.createElement('div'); // <div></div> 생성
// 작업의 결과를 담으려면, 변수를 선언하고 작업의 결과를 변수에 할당해야 한다.
const a = document.createElement('div');APPEND (포함)
: 새롭게 만든 태그를 DOM tree에 연결
append() : Node 마지막 자식 뒤에 개체 집합, 문자열 개체를 삽입한다.
const a = document.createElement('div');
// CREATE에서 생성한 a를 트리 구조와 연결
document.body.append(a);2. READ (조회)
: DOM내의 특정 HTML element의 정보를 조회
document.querySelector()
: 지정한 HTML element와 일치하는 첫번째 항목을 반환한다.
- 셀렉터(selector)로
HTML 요소("div"), id("#아이디명"), class(.클래스명)가장 많이 사용된다.
const a = document.querySelector('.클래스명');
// querySelector로 클래스명인 HTML 요소를 조회document.querySelectorAll()
: 지정한 HTML element와 일치하는 모든 요소를 반환한다.
=> 조회한 HTML 요소들은 배열처럼 사용할 수 있지만, 배열이 아닌 유사배열(Array-like Object)이다.
const b = document.querySelectorAll('.클래스명');
// querySelectorAll로 클래스명인 모든 HTML 요소를 조회document.getElementById()
: 지정한 id와 일치하는 요소를 반환한다. ( 옛날 방식 )
const c = document.getElementById('아이디명');
// getElementById로 아이디명인 요소를 조회3. UPDATE (변경)
: DOM내의 특정 Element의 값 변경
textContent
: node나 element의 텍스트 내용 변경한다.
const d = document.createElement('div');
d.textContent = 'Hi'; // 문자열 입력
console.log(d) // <div>Hi</div>- setAttribute() : 지정된 요소의 속성 값을 정한다.
( + innerHTML, innerText ... )
4. DELETE (삭제)
remove()
: DOM에서 선택한 element를 삭제한다.
const e = document.querySelector('#아이디명');
const f = document.createElement('div');
container.append(f);
f.remove(); // append 했던 요소 삭제innerHTML()
: 모든 자식 요소를 삭제한다.
document.querySelector('#아이디명').innerHTML = '';
// 아이디명인 자식 요소들을 삭제removeChild()
: 자식 요소를 지정해 삭제, 모든 자식 요소를 삭제하려면 반복문 활용하면 된다.
const container = document.querySelector('#아이디명');
// 아이디명인 HTML 요소를 조회
while (container.children.length > 1) {
container.removeChild(container.lastChild);
} // container의 자식요소가 1개만 남을 때까지, 마지막 자식요소를 삭제+ querySelectorAll()을 사용해 특정 클래스명을 가진 요소를 삭제할 수 있다.
🔥 이벤트 객체
이벤트는 마우스를 클릭하거나, 키보드를 누르는 등 사용자 액션에 의해 발생할 수 있고,
비동기적 작업의 진행을 나타내기 위해 API가 생성할 수도 있다.
1. 이벤트 객체 기초
이벤트 객체 : 사용자 입력(onclick, onkeyup, onscroll 등)을 트리거로 발생한 이벤트 정보를 담은 객체
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>이벤트 객체</title>
</head>
<body>
<button>아메리카노</button>
<button>카페라떼</button>
<script>
let menus = document.querySelectorAll("button"); // 모든 버튼을 가져온다
let btnAmericano = menus[0];
let btnCaffelatte = menus[1];
btnAmericano.onclick = handleClick;
btnCaffelatte.onclick = handleClick;
function handleClick() {
let currentMenu = event.target.textContent; // TODO
console.log(currentMenu + "를 클릭하셨습니다.");
}
</script>
</body>
</html>아메리카노 카페라떼
아메리카노 버튼을 누르면 아메리카노를 클릭하셨습니다.라고 콘솔창에 출력된다. (카페라떼도 같음)
사용자가 버튼을 클릭하면 그 버튼의 textContent(또는 innerHTML)을 이용해 메뉴의 이름을 가져온다. 사용자가 누른 버튼에 따라 출력되는 이름이 달라지므로, 클릭된 이벤트 객체에서 메뉴의 이름을 가져온다.
추가 내용
- Element.classList.add() : 지정한 클래스 값 추가
- Element.classList.remove() : 지정한 클래스 값 제거
- onkeyup() : 사용자가 키를 눌렀다 땠을 때 ( 모든 키 해당 )
- onKeydown() : 사용자가 키를 눌렀을 때 ( 모든 키 해당 )
- onKeyPress() : 사용자가 키를 눌렀을 때 ( 특수 키, 한글 x )
- document.cloneNode() : 노드 복제하는 메소드
- document.importNode() : 현재 문서가 아닌 외부 문서의 노드를 복사하여 현재 문서에 넣어주는 메소드
- document.insertBefore() : 참조된 노드 앞에 특정 부모 노드의 자식노드를 넣어주는 메소드
- document.appendChild() : 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 넣어주는 메소드
- addEventListener() : 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정한다.
=> addEventLinstener(type, listener)
- type : 수신할 이벤트 유형을 나타내는 대소문자 구분 문자열 (ex. keyup, onclick)
- listener : 지정한 이벤트를 수신할 객체,
handleEvent()메서드를 포함하는 객체 또는 JavaScript 함수여야 한다.
- prepend() : 선택한 요소의 내용 앞에 콘텐트 추가
