innerHTML, innerText, textContent는 DOM 요소의 콘텐츠를 읽어오고 설정할 수 있다는 점에서 비슷해 보이지만 조금씩 차이가 있다. 속성HTML 태그 처리숨겨진 요소의 텍스트보안(XSS)innerHTMLHTML 태그로 렌더링가져올 수 있음설정할 수 있음위험 가능성 큼innerText단순 텍스트로 변환하여 렌더링가져올 수 있음설정할 수 있음상대적으로 안전textContent단순 텍스트로 변환하여 렌더링가져올 수 없음설정할 수 있음상대적으로 안전    innerHTMLinnerHTML은 element의 속성으로 element 내에 포함된 HTML 또는 XML 마크업을 가져오거나 태그와 함께 입력하여 내용을 직접 설정할 수 있다. 즉, innerHTML을 사용하면 내부 HTML 코드를..

지난 포스트에서 이벤트 버블링(bubbling)에 대해 소개한 바 있다. [Javascript] 이벤트 버블링버블링(bubbling)의 원리는 간단하다. 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고 이어서 부모 요소의 핸들러가 동작한다. 이러한 과정이 가장 최상단의 조상 요소를 만날developing-move.tistory.com   이벤트에는 버블링 외에도 캡처링(capturing)이라는 흐름이 존재한다. 실제 코드에서는 자주 쓰이지 않지만 종종 유용한 경우가 있으니 알아보도록 하자. cf) 캡처링 단계를 이용해야 하는 경우는 흔치 않기 때문에, 캡처링에 관한 코드를 발견하는 일은 거의 없을지도 모른다. 표준 DOM 이벤트에서 정의한 이벤트 흐름에는 아래의 3가지 단계가 있다. 캡처..

인라인 방식 이벤트 핸들러에서의 this인라인 방식의 경우 이벤트 핸들러는 일반 함수로써 호출되므로 이벤트 핸들러 내부의 this는 전역 객체 window를 가리킨다.Button    프로퍼티 방식 이벤트 핸들러에서의 this프로퍼티 방식에서 이벤트 핸들러는 method이므로 이벤트 핸들러 내부의 this는 이벤트에 바인딩된 요소를 가리킨다. 이는 이벤트 객체의 currentTarget 프로퍼티와 같다.Button    addEventListener 방식에서의 thisaddEventListener에서 지정한 이벤트 핸들러는 콜백 함수지만 이벤트 핸들러 내부의 this는 이벤트 리스너에 바인딩된 요소(currentTarget)를 가리킨다. 이는 이벤트 객체의 currentTarget 프로퍼티와 같다.But..

웹 브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다. 텍스트 필드에 포커스를 둔 상태에서 키보드를 입력하면 텍스트가 입력된다.form에서 submit 버튼을 누르면 데이터가 전송된다.를 클릭하면 href 속성의 URL로 이동한다.이러한 기본적인 동작들을 이벤트라고 하는데 지난 포스트에서는 이벤트를 추가하는 세 가지 방법에 대해 정리한 바 있다.  [Javascript] 이벤트 추가 바로 알기이벤트(event)란 웹 페이지에서 발생하는 상호작용을 말한다. 웹 페이지에서 '무언가 일어났다'는 일종의 신호 같은 것이다. 우리가 사용하는 웹 애플리케이션에서는 수많은 이벤트가 발생한다.developing-move.tistory.com 이벤트는 등록뿐 아니라 취소하거나 조작할 수도 있는데 다음의 세 ..

Attribute와 Property. 한국어로는 둘 다 '속성'이라는 의미를 가지고 있지만 단순히 의미가 같은 것을 떠나 이 둘은 실제로 HTML 요소에 대한 클래스와 아이디 등의 속성을 가리킨다. 그럼에도 웹 프로그래밍에서는 구체적인 차이점이 존재한다.  HTML의 Attribute Attribute는 HTML 문서의 정적인 속성이다. Element의 id나 class와 같은 추가적인 정보를 가리킨다고 보면 된다.   DOM의 Property Property는 DOM의 속성이다. 즉 HTML의 Attribute를 DOM 내에서 표현하는 것이라고 볼 수 있다. Attribute가 정적인 속성인 것에 반해 Property는 DOM에서의 동적인 속성인 것.Hemllo World cf) 안에 class='m..

쉼표 연산자는 각각의 피연산자를 왼쪽에서 오른쪽 순서로 평가하고, 마지막 피연산자의 값을 반환한다.  위 내용은 쉼표 연산자에 대한 MDN의 정의이다. 하지만 이렇게만 봐서는 잘 모르겠으니 조금 풀어서 알아보도록 하자.  먼저 아래의 함수 예시를 보자. 흔히 볼 수 있는 평범한 함수이다.let myFunc = (value1, value2) => { value1 += value2; value1 += value2; return value1;}myFunc(1, 2); // 5 이제 이 예시를 쉼표 연산자를 사용하여 바꿔 보려 한다. 위 함수에서 중괄호를 없애고 괄호와 쉼표(,)만으로 표현할 수 있다. 작동 원리는 = (a, b, c) 와 같이 작성할 경우 1)  a 실행, 2) b 실행, 3) c re..