DOM 맛보기

DOM (Document Object Model)

• 시시각각 변하는 컨텐츠마다 파일을 작성할 수 없음
• 따라서 HTML과 css가 상황에 따라 변해야 함 -> javascript로 조작
• Document: HTML 파일을 의미
• Object: 객체 형태다 뭐 그런

Create

window.onload = function() {
    const p = document.createElement('p')
    p.innerText = 'Hello CoolGamja'
    document.body.appendChild(p)
}

Read

window.onload = function() {
    console.log(document.body.children[0].children[1]) // 굉장한 비효율!
    const form = document.querySelector('.join-form') // 하나만 갖고오기
    const div = document.querySelectorAll('div') // 여러 개 갖고오기
    
    // getElementById 혹은 getElementsBy- 시리즈는 한물감
}

Update, Delete

1. 전화번호 입력창에 포커스 이동
2. 전달하고자 하는 정보를 추가
3. 포커스가 빠지면 정보를 삭제

window.onload = function() {
    const phoneNumber = document.querySelector('#phoneNumber')
    
    phoneNumber.addEventListner('focus', function() {
    	const form = document.querySelector('form')
        const info = document.createElement('p')
        
        info.innerText = '전화번호 입력 형식을 확인해 주세요!'
        
        // form.appendChild(info)
        form.insertBefore(info, form.firstChild) // info를 form의 첫자식 앞에 추가
    })
    
    phoneNumber.addEventListner('blur', function() {
    	const form = document.querySelector('form')
        form.removeChild(form.firstChild)
    })
}

레퍼런스
김민태의 세상에서 가장 친절한 프론트엔드 수업 (패스트캠퍼스)