반응형 Web/javascript3 javascript DOM 객체 생성, 삽입, 교체, 제거 DOM 요소를 생성, 삽입, 교체, 제거하는 방법에는 여러 가지가 있습니다. 다음은 사용 가능한 방법에 대한 요약입니다. DOM 생성 & 삽입 크게 두 가지 방법이 있습니다. HTML 스니펫(예: innerHTML을 통해)을 유효한 HTML 스니펫에 제공하고 브라우저가 이를 렌더링하도록 하거나 JS 코드로 DOM 객체를 생성한 후 수동으로 추가/삽입합니다. 후자의 접근 방식은 DOM 객체에 직접 접근할 수 있다는 장점이 있습니다. (프로퍼티를 설정하거나 이벤트 리스너를 추가하는 데 유용) 단점은 더 많은 코드를 작성해야 한다는 겁니다. HTML 코드 추가하기 const root = document.getElementById('root-el'); // selects something like root.in.. 2023. 3. 15. javascript 노드 접근 방법 (노드 쿼리 메서드) 다음은 DOM 요소에 접근하는 다양한 방법에 대한 요약입니다 (참고: 요소 노드에 대해서만 쿼리할 수 있음). 아래의 쿼리 메서드 외에도 문서 객체에 대한 아래의 특수 프로퍼티로 문서의 일부를 선택합니다. document.body => 요소 노드를 선택합니다. document.head => 요소 노드를 선택합니다. document.documentElement => 요소 노드를 선택합니다. 쿼리 메서드 document.querySelector(); 모든 CSS 선택자(예: ' #id이름 ', ' .클래스명 ' 또는 ' div p.클래스명 ')를 사용하여 DOM에서 처음(!) 일치하는 요소를 반환합니다. 일치하는 요소를 찾을 수 없는 경우에는 null을 반환합니다. 추가 정보: https://develop.. 2023. 3. 15. javascript 비교 연산자와 불리언(boolean) 조건문이나, 반복문 등의 조건부 코드실행에 자주 활용되는 비교 연산자에 대해 자세히 알아보겠습니다. 비교 연산자의 종류 비교 연산자의 결과는 True나 False인 불리언(Boolean) 자료형으로 출력됩니다. == (이중 등호 연산자) 두 값을 비교해서 참 또는 거짓으로 반환. 좌항, 우항의 값이 동등함을 확인 후 조건에 해당하는 코드만 실행. = (단일기호) - 변수나 상수에 값을 할당하는데 사용 != 값의 부등성을 확인하는 연산자입니다. a, b가 같지 않은 것을 확인 후 이 조건에 해당하는 코드만 실행. === (삼중 등호 연산자) 값과 자료형이 일치하는지 확인 비교합니다. !== 값과 자료형이 일치하지 않은 것을 확인 비교합니다. >, < 크기 비교 연산자입니다. 값이 큰지 작은지 비교하며, 숫.. 2023. 2. 28. 이전 1 다음 반응형
