코딩 공부/Javascript

[JavaScript] 선택자

희원96 2022. 5. 18. 16:25

querySelector(selector)

-CSS 선택자를 이용하여 하나의 요소를 검색

 

querySelectorAll(selector)

-CSS 선택자를 이용하여 모든 요소를 검색

 

Element 요소 변경 메소드

<!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>Document</title>
</head>
<body>
    <h1 id="h1">저를 변경해주세요!</h1>
    <button onclick="ch()">변경!</button>

    <script>
        function ch(){
            //Elemnt 스타일 변경
            //문서객체접근.요소접근.style.속성 ='값'
            let h1 = document.querySelector('#h1')
            h1.style.color = 'red'
            h1.style.fontsize = '25px'
            h1.style.fontWeight = '100';
        }
        

    </script>
</body>
</html>
스타일실습

<!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>Document</title>
    <style>
     div{
            width: 100px;
            height: 100px;
        }
        #redBox{
            background-color: red;
        }
        #blueBox{
            background-color: blue;

        }
        #greenBox{
            background-color: green;
        }
        #grayBox{
            background-color: gray;
        }

    </style>
</head>
<body>
    <div id="redBox"></div>
    <div id="blueBox"></div>
    <div id="greenBox"></div>
    <div id="grayBox"></div>
    <button onclick="margin()">이동하기!</button>
    <button onclick="radius()">둥글게!</button>

    <script>

        let div = document.querySelectorAll('div')
        function margin(){
            div[1].style.marginLeft = '100px'
            div[2].style.marginLeft = '200px'
            div[3].style.marginLeft = '300px'
         }

         function radius(){
             div[0].style.borderBottomLeftRadius = '50%'
             div[0].style.borderTopRightRadius = '50%'
             div[1].style.borderBottomLeftRadius = '50%'
             div[1].style.borderTopRightRadius = '50%'
             div[2].style.borderBottomLeftRadius = '50%'
             div[2].style.borderTopRightRadius = '50%'
             div[3].style.borderBottomLeftRadius = '50%'
             div[3].style.borderTopRightRadius = '50%'
         }
        
    </script>
</body>
</html>
CallBack 함수

-코드를 통해 명시적으로 호출하는 함수가 아니라, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수

 

<!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>Document</title>
</head>
<body>
    <button id = "btn">클릭!</button>
    <script>
        //Callback 함수
        //어떤 이벤트가 발생했거나, 특정 시점에 도달했을 때
        // 시스템에서 호출하는 함수

        // 함수에 파라미터로 들어가는 함수

        //1.이벤트 핸들러 & 리스너
        //어떤 이벤트가 발생했을 때 : addEventListener()
        document.getElementById('btn').addEventListener('click',function(){
            console.log('click')

        })

        //2.타임핸들러
        //의도적으로 시간 지연을 사용하는 기능 : setTimeout()

        console.log(1)
        setTimeout(function(){console.log(2)},2000)
        
        console.log(3)



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