search

yuzunsang / JS-deep-dive-study

자바스크립트 딥 다이브 스터디✨
0 stars 3 forks source link

[CH39]DOM #50

Open yuzunsang opened 1 month ago

yuzunsang commented 1 month ago

[퀴즈 예시] Q. 여기에 퀴즈 설명을 적으세요.

적을 코드가 있다면 밑에 적어주세요. (백틱 3개로 코드를 감싸면 코드 양식을 적을 수 있습니다.)

// 예시 코드
const arr = [1, 2, 3];
console.log("Hello");

아래 코드를 복붙해서 정답을 적어주세요.

<details>
    <summary>정답</summary>
    <div markdown="1">    
    정답 설명
    </div>
</details>
yuzunsang commented 1 month ago

Q. DOM 조작을 주의해서 다뤄야 하는 이유는 무엇일까요?

정답
DOM 조작에 의해 노드의 생성/변경/삭제 시 reflow와 repaint를 유발하며, 이는 성능에 영향을 주기 때문이다.
bo-eun commented 1 month ago

Q. 아래 코드 실행 시 두 번째 li만 blue로 변경되지 않습니다. li 모두 class 이름이 blue가 될 수 있게 아래 코드를 수정하세요.

...
<body>
    <ul id="fruits">
        <li class="red">apple</li>
        <li class="red">banana</li>
        <li class="red">orange</li>
    </ul>
    <script>
        const $elems= document.getElementsByClassName('red');

        for(let i = 0; i < $elems.length; i ++) {
            elems[i].className = 'blue';
        }
    </script>
</body>
...
정답
1. const $elems= document.querySelectorAll('red');
2. [...$elems].forEach(elem => elem.className = 'blue')
1 방법 보단 2 방법을 사용하는게 더 좋다
J-yun-ji commented 1 month ago

Q. 아래 코드의 실행 결과는 무엇인가요?

<!DOCTYPE html>
<html>
<body>
  <input id="apple" type="text" value="red">
  <script>
    const $input = document.getElementById('apple');

     // 1
    $input.value = 'blue';
    console.log($input.getAttribute('value')); // ??

     // 2
    $input.setAttribute('value', 'yellow');
    console.log($input.getAttribute('value')); // ??

  </script>
</body>
</html>
정답
red
yellow