[JavaScript] DOM1

JavaScript
[JavaScript] DOM1

퓨어맨 2022. 5. 27. 02:24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ex02DOM활용해보기</title>
</head>
<body>
    <div id="temp">
        <p>퓨어맨 화이팅</p>
        <h3 class = "lunch">오늘 점심은 뭐 드실거에요?</h3>
    </div> 

    <script>
        // DOM == document
        // 모든 html의 요소 상하관계를 분리해 객체로 만들어서 가지고 있는
        // Document Object Model

        // DOM안에서 원하는 요소(태그)를 가져오는 방법
        // 1. querySelector('css선택자')
        // ---> 딱 하나의 첫번째 요소만 되돌려준다.
        let h3 = document.querySelector('.lunch')
        // 여러개의 요소를 가져오고 싶을때는
        // querySelectorAll을 사용한다. --> 배열과 같은 형태로 되돌려준다.
        let all_h3 = document.querySelectorAll('.lunch')

        console.log(h3)
        console.log(all_h3)
        console.log(all_h3[0])


        // 2. getElement~~~~
        // getElementById('id값') --> # 절대 붙이지 말것
        // --> 하나의 요소만 되돌려 줄때 사용하는 기능
        let div = document.getElementById('temp')
        console.log(div)
        let all_h3_2 = document.getElementsByClassName('lunch')
        console.log(all_h3_2)

        
        // querySelector vs getElement~~~
        // querySelector
        // 더 자세한 리턴타입(HTMLElementTagName)을 되돌려준다.
        // getElement~~~
        // 포괄적인 리턴타입(HTMLElement) 되돌려준다.


    </script>
</body>
</html>