[DOM] 개념 및 개인 공부

DOM 이란?

DOM (Document Object Model)은 HTML 및 XML 문서를위한 프로그래밍 인터페이스입니다. 프로그램이 문서 구조, 스타일 및 내용을 변경할 수 있도록 페이지를 나타냅니다. DOM은 문서를 노드와 객체로 나타냅니다. 이렇게하면 프로그래밍 언어가 페이지에 연결할 수 있습니다.

간단히 말해 프로그래머 관점에서 본 HTML 이라고 생각한다.

DOM 구조 는 트리 구조로 HTML을 부모 자식으로 나눠 만들어 진다.

HTML - JS

CRUD

// 조회하기
console.log(document.body) // body
console.dir(document.body.children) // body 엘리먼트 자식 찾기


// element 만들기
let tweetDiv = document.createElement('div') // div 만들기


// append
document.body.append(twoDiv); // body  뒤에 붙는 느낌
document.body.appendChild(twoDiv); // body > 안에 붙는 느낌


// 클래스 이름으로 선택하기
let one = document.querySelector('.tweet'); // class = tweet 가져오기

// 클래스 전부
let two = document.querySelectorAll('.tweet'); // class = tweet 전부 가져오기


// id >>> '#아이디명'으로 가져오기
tweetDiv.textContent = 'dev';
console.log(tweetDiv); // <div>dev</div>


// 삭제
tweetDiv.remove() // append 삭제
document.querySelector('#container').innerHTML = ''; // id=container 의 모든 엘리먼트 삭제


// 첫번째 자식 엘리먼특 ㅏ존재하면 모두 제거
const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

유효성 검사

// 아이디 검사

InputUserID.onkeyup = () => {
    if (CheckIDLength(InputUserID.value)) {
        //실패 메세지
        failMsg.classList.add();
        success.classList.remove();
    }
}

const CheckIDLength = (props) => {
    return props.length >= 6;
}

// 비밀번호 검사

InputUserPW.onkeyup = () => {
    if(CheckPW(pwtext1.value, pwtext2.value)) {
        // 비밀번호 실패 메세지
        failMsg.classList.add();
        success.classList.remove();
    }
}

const CheckPW = (pw1, pw2) => {
    return pw1 === pw2;
}

이벤트 객체

// 버튼 가져오기
let menus = document.querySelectorAll('button'); 

let buttonNum1 = menus[0];
let buttonNum2 = menus[1];

buttonNum1.onclick = handleClick;
buttonNum2.onclick = handleClick;

const handleClick = (event) => {
    console.log(event);
    let currentMenu = event.target.textContent; 
    console.log(currentMenu);
}