javascript

🫧 이벤트 흐름표준에서 정의한 DOM 이벤트의 흐름에는 3단계가 존재합니다.캡처링(capturing): 이벤트가 하위 요소로 전파되는 단계타깃(target): 이벤트가 실제로 의도한 타깃 요소에 전달되는 단계버블링(bubbling): 이벤트가 상위 요소로 전파되는 단계예를 들어, 아래와 같은 코드가 있고 테이블의 세 번째 요소에 클릭 이벤트를 할당한 경우 apple banana cherry durian 세 번째 'cherry'..

🌳 예시 html 코드아래는 이 글에서 사용될 전체 html 코드입니다. Cat-1 Ragdoll British Shorthair Scottish Fold Bengal Cat-2 Sphynx Munchkin Persian  🌳 태그 선택 메서드1) getElementById('id_명칭')document.getElementById('id_명칭')html의 id 속성을 이용하여 해당 id를 가진 태그를 반환선택된 태그 안에 다른 태그가 있다면 함께 선택됨id라고 명시했기 때문에 '#'을 작성할 필요 없음코..

🐝 스코프(Scope)스코프란 어떤 변수에 접근할 수 있는 범위를 의미합니다.스코프의 종류는 아래와 같습니다.전역(global) 스코프: 어디서나 해당 변수에 접근 가능지역(local) 스코프: 한정적인 범위 내에서만 해당 변수에 접근 가능블록 스코프함수 스코프 🐝 블록 스코프블록 스코프란 중괄호로 둘러싸인 { 블록 } 내부에서 선언된 변수는 해당 블록 안에서만 호출 가능한 것을 의미합니다.ES6 이후에 등장한 let과 const를 이용하여 선언한 변수가 블록 스코프의 개념을 따릅니다. 예를 들어, 아래와 같은 코드가 있을 때{ let test = 'block scope'; console.log(test); // 블록 내부에서 접근👍}console.log(test); // !블록 외부에서 접근👎블..

🌳 정의DOM이란 Document Object Model의 약자로 문서 객체 모델을 의미합니다.한 마디로 웹 페이지에 나타나는 html 문서 전체를 객체로 표현한 것이라고 할 수 있습니다. DOM에서의 객체는 '노드(node)'라고 불리며html 태그 = 요소(element) 노드태그를 제외한 문자 = 텍스트(text) 노드주석 = 주석(element) 노드로 구성됩니다. 따라서 DOM을 활용하면 자바스크립트로 html 태그를 객체처럼 다룰 수 있게 됩니다. 🌳 DOM 트리html은 태그들이 계층을 이루고 있습니다.그리고 이 계층 구조는 DOM에서도 반영되며 이를 DOM 트리라고 합니다.DOM 트리는 노드로 구성되어 있으며 노드들은 서로 부모/형제/자식의 관계를 가집니다. 예를 들어, 아래와 같은 코..