javascript

javascript_(DOM_querySelector)연습_22.05.02(day09)

양빵빵 2022. 5. 2. 17:53

<!DOCTYPE html>
<html lang="ko">
<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>
    
    <!-- #wrap>ul#list1>li{리스트$}*7 -->
    <div id="wrap">
        <ul id="list1">
            <li>리스트1</li>
            <li>리스트2</li>
            <li>리스트3</li>
            <li>리스트4</li>
            <li>리스트5</li>
            <li>리스트6</li>
            <li>리스트7</li>
        </ul>
    </div>

    <script>
        //1. id="list1"인 요소에 <li> 요소중  홀수번째 요소만 선택후 배경색상 yellow 적용   
        


        //2. id="list1"인 요소에 <li> 요소중   짝수번째 요소만 선택후 배경색상 gray 적용  
          

        //3. id="list1"인 요소에 <li> 요소중   첫번째 <li>요소만 선택후 폰트색상 red 적용   
        // $oddElems[0].style.color = 'red';
        

        //4. id="list1"인 요소에 <li> 요소중  마지막번째 <li>요소만 선택후 폰트색상 green 적용  
             

        //5. id="list1"인 요소에 <li> 요소중  두번째 <li>요소만 선택후 font-style: italic 적용             
        

        //6. id="list1"인 요소에 <li> 요소중  3번째 이전 요소만 선택후 
        //   border: 2px dotted aqua 적용 (1, 2번째만 선택) 
        

        //7. id="list1"인 요소에 <li> 요소중  3번째 이후요소만 선택후
        //   border 2px dashed violet 적용 (3번째부터 끝까지 선택)
        


    </script>


</body>
</html>

 

 

<!DOCTYPE html>
<html lang="ko">

<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>

    <!-- #wrap>ul#list1>li{리스트$}*7 -->
    <div id="wrap">
        <ul id="list1">
            <li>리스트1</li>
            <li>리스트2</li>
            <li>리스트3</li>
            <li>리스트4</li>
            <li>리스트5</li>
            <li>리스트6</li>
            <li>리스트7</li>
        </ul>
    </div>

    <script>
        //1. id="list1"인 요소에 <li> 요소중  홀수번째 요소만 선택후 배경색상 yellow 적용  
        const $elems = document.querySelectorAll("#list1>li");
        console.log($elems);

            for(let i = 0; i<$elems.length; i++) {
                if(i % 2 === 0) {
                    $elems[i].style.background = 'yellow';
                }
            }
           
 


        //2. id="list1"인 요소에 <li> 요소중   짝수번째 요소만 선택후 배경색상 gray 적용  
/*
        $elems[1].style.background = 'gray';
        $elems[3].style.background = 'gray';
        $elems[5].style.background = 'gray';
*/
        for(let i = 0; i<$elems.length; i++) {
                if(i % 2 === 1) {
                    $elems[i].style.background = 'gray';
                }
            }
           



        //3. id="list1"인 요소에 <li> 요소중   첫번째 <li>요소만 선택후 폰트색상 red 적용
        // $oddElems[0].style.color = 'red';
        const $elems0 = document.querySelector('#list1 > li:first-child');
        $elems0.style.color = 'red';

       


        //4. id="list1"인 요소에 <li> 요소중  마지막번째 <li>요소만 선택후 폰트색상 green 적용  
        // $elems[6].style.color = 'green';
        const $elems6 = document.querySelector('#list1 > li:last-child');
        $elems6.style.color = 'green';


        //5. id="list1"인 요소에 <li> 요소중  두번째 <li>요소만 선택후 font-style: italic 적용
        $elems[1].style.fontStyle = 'italic';


        //6. id="list1"인 요소에 <li> 요소중  3번째 이전 요소만 선택후
        //   border: 2px dotted aqua 적용 (1, 2번째만 선택)

        for(let i = 0; i<$elems.length; i++) {
                if(i <=1) {
                    $elems[i].style.border = '2px dotted aqua';
                }
            }
    /*
        $elems[0].style.border = '2px dotted aqua';
        $elems[1].style.border = '2px dotted aqua';

*/


        //7. id="list1"인 요소에 <li> 요소중  3번째 이후요소만 선택후
        //   border 2px dashed violet 적용 (3번째부터 끝까지 선택)

        for(let i = 0; i<$elems.length; i++) {
                if(i >=2) {
                    $elems[i].style.border = '2px dashed violet';
                }
            }
     /*   $elems[3].style.border = '2px dashed violet';
        $elems[4].style.border = '2px dashed violet';
        $elems[5].style.border = '2px dashed violet';
        $elems[6].style.border = '2px dashed violet';*/


    </script>


</body>

</html>

 

=================== 정답↓========

<!DOCTYPE html>
<html lang="ko">

<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>

    <!-- #wrap>ul#list1>li{리스트$}*7 -->
    <div id="wrap">
        <ul id="list1">
            <li>리스트1</li>
            <li>리스트2</li>
            <li>리스트3</li>
            <li>리스트4</li>
            <li>리스트5</li>
            <li>리스트6</li>
            <li>리스트7</li>
        </ul>
    </div>

    <script>
        //1. id="list1"인 요소에 <li> 요소중  홀수번째 요소만 선택후 배경색상 yellow 적용   
        const $odds = document.querySelectorAll('#list1 > li:nth-child(odd)');
        // console.log($odds);

        for (let $li of $odds) {
            $li.style.backgroundColor = 'yellow';
        }

        //2. id="list1"인 요소에 <li> 요소중   짝수번째 요소만 선택후 배경색상 gray 적용  
        const $evens = document.querySelectorAll('#list1 > li:nth-child(even)');
        // console.log($evens);

        for (let $li of $evens) {
            $li.style.backgroundColor = 'gray';
        }

        //3. id="list1"인 요소에 <li> 요소중   첫번째 <li>요소만 선택후 폰트색상 red 적용   
        const $firstLi = document.querySelector('#list1 > li:first-child');
        $firstLi.style.color = 'red';


        //4. id="list1"인 요소에 <li> 요소중  마지막번째 <li>요소만 선택후 폰트색상 green 적용  
        const $lastLi = document.querySelector('#list1 > li:last-child');
        $lastLi.style.color = 'green';

        //5. id="list1"인 요소에 <li> 요소중  두번째 <li>요소만 선택후 font-style: italic 적용             
        const $secondLi = document.querySelector('#list1 > li:nth-child(2)');
        $secondLi.style.fontStyle = 'italic';

        //6. id="list1"인 요소에 <li> 요소중  3번째 이전 요소만 선택후 
        //   border: 2px dotted aqua 적용 (1, 2번째만 선택) 
        
        // const $liArr = document.querySelectorAll('#list1 > li:nth-child(-n+2)');
        const $liArr = [$firstLi, $secondLi];
        for (let $li of $liArr) {
            $li.style.border = '2px dotted aqua';
        }

        //7. id="list1"인 요소에 <li> 요소중  3번째 이후요소만 선택후
        //   border 2px dashed violet 적용 (3번째부터 끝까지 선택)

        const $gtThan3Li = document.querySelectorAll('#list1 > li');
        for (let i = 0; i < $gtThan3Li.length; i++) {
            if (i === 0 || i === 1) continue;
            $gtThan3Li[i].style.border = '2px dashed violet';
        }
    </script>


</body>

</html>