728x90 java script26 DOM(Document Object Model) 웹 페이지의 내용을 js로 다룰때는 단순히 내용을 문자열로 다루는 것 보다 어떠한 덩어리로 조작하는 것이 더 쉽다. 이를 위한 것이 DOM이다. DOM은 HTML, XML문서를 프로그램에서 이용하기 위한 API이며 트리 구조를 사용한다. 이때 이 트리를 DOM트리라 한다. 구조 자체가 트리인 만큼 DOM트리 안에서 각 객체를 노드라 하며 어떤 노드와 다른 노드와의 관계는 트리에서 사용하는 관계와 같다(부모, 자식 등). DOM 사양은 W3C에 의해 Level1~3으로 정의되 있다. DOM Level 1 DOM Level1은 Core, HTML이 두 가지 모듈로 구성되 있다. 모듈 설명 Core HTML에 한정되지 않은 일반적인 DOM 조작에 대한 사양 getElementsByTagName - 태그명을 지.. 2021. 8. 3. JS에서 객체를 비교하는 방법 JS에서 primitive값에 대한 비교는 단순히 '==' 또는 '==='를 사용하면 된다. 하지만 객체의 경우, 객체는 여러 데이터로 구조화된 형태 이기 떄문에 객체의 비교는 방법이 다양하고 해당 방법들은 각기 다른 결과를 출력한다. Referential equality JS는 다음과 같은 3가지 방식으로 값을 비교할 수 있다. 1. === 2. == 3. Object.is() 위 3개의 연산자는 모두 비교의 대상이 되는 값이 같은 인스턴스를 참조할때 참을 반환한다. 그때문에 Referential equality는 객체 레퍼런스를 비교할때 유용하다. 하지만 통상적인 상황에서는 레퍼런스가 아닌 실제 값을 비교해야 하는 상황이 더 많다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 co.. 2021. 7. 24. temporal dead zone TDZ(Temporal Dead Zone) 다음과 같은 코드가 있다고 해보자 1 2 const a = 1; a;//1 cs 1 2 3 a//throws 'Reference error' const a = 1; a;//1 cs 첫번째 예시에서는 제대로 된 결과가 나오고 두번째 예시에서는 reference error가 뜬다. 두번째 예시에서 1줄이 TDZ이다. TDZ는 변수를 선언하기 이전에 변수를 엑세스 하는 것을 금한다. 다음과 같은 statement는 TDZ의 영향을 받는다. 1. const, let 2. class statement, construcotr() 내부에 있는 super() 3. Default function parameters 다음은 hoisting으로 인해 영향을 받지 않는 것들이다 1... 2021. 7. 10. Event propagation-bubbling, capturing event propagation 위와 같은 코드가 있다고 하자. 태그는 부모, 자식 관계를 가진다. 이때 html, body, fieldset, input태그에 각각 이벤트를 장착했다고 하자. 그 후 버튼을 클릭했을때 html은 body를 감싸고 있고, body는 filedset을, filedset은 input을 감싸고 있기 때문에 어떤 순서고 이벤트가 발생할 것인가를 event propagation이라 한다. event propagation은 두 종류가 있다. (1). bubbling-자식 이벤트 부터 부모 이벤트, (2). capturing-부모 이벤트 부터 자식 이벤트. 위 코드를 실행시키면 다음과 같은 결과가 나온다 bubbling을 실행하기 위해서는 이벤트 리스너의 3번째 인자를 false 또는.. 2021. 6. 23. 이전 1 ··· 3 4 5 6 7 다음 728x90
