16일차 (DOM의 기초)

오늘은 자바스크립트를 이용하여 html을 조작하는 DOM을 배웠다. 처음에는 어떻게 연결되는지 이해가 잘 안갔지만 실습을 하면서 이해를 했다. 그리고 이벤트 핸들러를 배웠는 아주 재미있었다!

 

1. DOM으로 새로운 요소 만들기

let one = document.createElement('div')

• div element를 만들어 변수에 할당해 줬다.
• 아직 트리 구조에 연결하지 않았기 때문에 어떤한 변화도 나타나지 않는다.

 

2. 만든 요소를 트리구조에 연결하기

document.body.append(one)

• document.body로 위치를 잡아주고 append를 사용하여 body안으로 넣어준다.
• 하지만 그래도 아직 보이지 않는다.(개발자 도구에선 확인가능)

 

3. 자바스크립트에서 HTML Element 조회하기

let oneEl = document.querySelector('.one') // one인 class를 가진 요소 중 첫번째를 조회

let oneEl = document.querySelectorAll('.one') // one인 class를 가진 요소 전부를 조회

• document.querySelector는 () 안을 가진 요소 중 첫 번째 요소을 조회할 수 있다.
• document.querySelectorAll은 () 안을 가진 요소 전부를 조회할 수 있다. 
• 조회한 요소는 배열처럼 for문을 사용할 수 있다.
• 하지만 배열이 아니고 유사 배열, 배열형 객체 등, 다양한 이름으로 부른다. (Array-like Object)

 

4. body 자식요소에 생성한 요소 넣기

let container = document.querySelector('#container')
let one = document.createElement('div')
container.append(one)

• document.querySelector로 container를 선택해서 넣어야 한다.(document.body.container 해봤는데 안됨;)
• container의 맨 마지막 요소에 one을 넣었다.

 

5. 생성한 빈 태그 채우기

let one = document.createElement('div');

one.textContent = 'day';

one.classList.add('date');

• 빈 태그를 생성해 변수에 할당하고 그변수를 이용하여 텍스트를 채우고 class를 추가할 수 있다.
• class를 추가하면 CSS도 적용 받을 수 있다.

 

6. 요소 삭제하기

let container = document.querySelector('#container');
let one = document.createElement('div');
container.append(one);
one.remove();  // 요소가 삭제됨

• 삭제할 요소의 위치를 알고 있을 경우 사용이 가능하다.

document.querySelector('#container').innerHTML = '';

• 모든 자식요소를 지울 경우 사용이 가능하다.
• 하지만 보안에서 문제를 가지고 있다.

let container = document.querySelector('#container');
while (oneEl.firstChild) {
  container.removeChild(container.firstChild);
}

• 위와 같이 반복문을 사용하여 자식요소를 지울 수 있다.

 

과제하면서 배운 것들

• onkeyup : js에서 이벤트 핸들러로 사용하며 키보드 입력시 함수 내부의 코드가 실