[JS] DOM(Document Object Model) 객체

Suji Kang·2023년 7월 14일

DOM getElementByClassName getElementById getelementbytagname if else querySelector querySelectorAll()

📌 DOM(Document Object Model) 객체

html의 모든 요소들은 객체이다

<p id="intro" class="hello word"> 안녕하세요</p>
{
   tagName: 'p',
   text:'안녕하세요',
   id: 'intro',
   classList: ['hello', 'world'],
   ...
   ...
   ...
   ...
}

html file

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
</head>
<body>
    <p class="em">안녕하세요</p>
    <p id="intro">DOM 객체를 자바스크립트로 다뤄보기</p>
    <p class="em">DOM 객체를 javascript 에서 변환하기</p>
    <script src="./02_dom.js"></script>
</body>
</html>

❗️html 요소를 자바스크립트로 가져오는 함수

👉 document.getElementById

태그의 id 속성값으로 가져오기
결과는 🌟객체 하나

let a = document.getElementById('intro');
console.log(a);
a.textContent = '안녕'; // 안녕하세요 값이 안녕으로 바뀌었다.

//예제
let b = {
    title: '강수지',
    price: 200
};
b.title = '김철수'
console.log(b); //title은 강수지에서 김철수로 바뀌었다.

👉 document.getElementByClassName

태그의 class 속성값으로 가져오기
결과는 객체가 요소로 들어있는 🌟배열

// 클래스 이름으로 가져오기
let c = document.getElementsByClassName('em');
console.log(c);
//세번쨰 p태그의 내용을 안녕
console.log(c[1]);
c[1].textContent = 'hi';
let tmp = [
   {
       title: 'suji',
       price:2000
   },
   {
       title: 'd',
       price: 5000
   }
]
tmp[1].title

👉 document.getElementByTagName

태그의 tag 속성값으로 가져오기
결과는 class 속성값으로 가져오기
결과는 객체가 요소로 들어있는 🌟배열
...등등
//태그이름으로 가져오기 
let e = document.getElementsByTagName('p');
console.log(e);
let f = document.querySelectorAll('p');
console.log(f);

❗️ css 선택자를 통해서 특정 요소를 가져오는 함수

👉 document.querySelector

결과가 객체하나

let b = document.querySelector('#intro');
console.log(b);
//#를 설정하지 않으면, p tag  중에서 제일 위에있는게 나옴
let c = document.querySelector('p');
console.log(c);

👉 document.querySelectorAll

결과가 객체가 요소로 들어있는 배열
let d = document.querySelectorAll('.em')
console.log(d);

html 요소를 받아오면 결과는,

HTMLElement type 이다. 그중 HTML 태그 Element 타입이다.
👉 공통적으로 모든 태그가 갖고있는 속성(key)가 있으며, 특정 태그에만 존재하는 속성(key)가 있다
예를들어,
textContent 속성 에는 태그 사이의 내용이 들어간다
style 속성 에는 태그의 css 정보가 객체로 들어있다

//다른예제
let b = document.querySelector('body')
console.log(b);
b.style.color ='red';
let b = document.querySelector('#intro');
console.log(b);

✏️ button을 눌렀을떄. (html code)

<button onclick="buttonClick()">click 하세요</button>

🌟 buttonClick 함수 만들기(function)

const buttonClick = () => {
    console.log('btn clicked');
    //첫번째 p 태그를 가져와서 
    //글자 색상을 빨간색으로 변경
    document.querySelector('p'); //  가장 위애있는 p태그 설정됨 
    let firstP = document.querySelector('p');
    firstP.style.color = 'red';
}

✏️ input tag(html) 입력된 값

<input id="inputText" type="text" value="입력해주세요">
<p id="id-err" class="err-txt">아이디는 필수 입력값입니다.</p>

✏️ login button(html)

<button onclick="login()">login</button>

🌟 login 함수 만들기(function)

const login = () => {
    let inputId = document.querySelector('#inputText');
    let valueId = inputId.value; //사용자가 input 안에  입력한 값이 문자열로 들어있음
    console.log(inputId);
    console.log(valueId); //input 에 입력한 값이 출력됨

    let errP = document.querySelector('#id-err');
    console.log(errP);
}

❗️조건문 (if else)

👉 조건 에 따라 서로 다른 코드를 실행시키도록 만들어주는 문법

if(조건식){
    조건식이 참일때 실행할 코드; //true
}else {
    조건식이 거짓일때 실행할 코드;//false
}

✏️ html file

 <style>
        .err-txt {
            color: red;
            display: none;
        }
 </style>

 //valueId 가 '' 이라면 id-err 를 display block으로 바꿔주기
    if (valueId === '') {
        errP.style.display = 'block';
    } else {
        //valueId 가 '' 아니라면 id-err 를 display none으로 바꿔주기
        errP.style.display = 'none';
    }