JavaScript/DOM32

• 

  [JS]data 애트리뷰트(Attribute) 사용 방법 개요 HTML에서 애트리뷰트(Attribute)는 스타일 제어 또는 고유한 정보를 할당하거나 JavaScript에서 HTML 요소를 접근하기 위해 사용된다. 일반적으로 가장 잘 알려진 애트리뷰트는 id 및 class 애트리뷰트이며, 이 외에도 name, tab, role, tabindex, target, rel 등 다양한 애트리뷰트가 존재한다. 개발자는 위에서 언급한 애트리뷰트가 아닌 커스텀 애트리뷰트를 사용할 수 있는데, 아래 예제처럼 말도 안 되는 이름으로 애트리뷰트를 설정하는 것이 가능하고 JavaScript에서 커스텀 애트리뷰트를 접근하는 것도 가능하다. 버튼 하지만 대부분의 개발자들은 커스텀 애트리뷰트를 사용하는 것을 꺼려한다. 커스텀 애트리뷰트를 작성한 본인은 해당 애트리뷰트를 사용한 이유를 .. JavaScript/DOM 2022. 12. 15.

• 

  [JS]커스텀 이벤트 생성하기(CustomEvent 및 dispatchEvent) 해당 포스팅은 JavaScript에서 커스텀 이벤트를 생성할 수 있는 방법을 설명합니다. 개요 대부분의 개발자는 JavaScript에서 "click" 또는 "change" 이벤트를 많이 사용할 것이다. 아이디(id)와 패스워드(password)를 서버로 전송하기 위해 로그인 버튼을 클릭해야 하며, 네이버와 다음 또는 구글과 같은 웹 사이트의 검색 창에서 키워드를 변경할 때마다 자동 완성이 표시되어야 하기 때문이다. 하지만 경우에 따라 JavaScript에서 제공하는 기본 이벤트가 개발 요구 사항을 충족하지 않을 수 있다. 이러한 경우 개발자는 커스텀 이벤트를 생성하여 원하는 작업을 수행하도록 할 수 있다. 커스텀 이벤트 생성 방법 JavaScript에서 커스텀 이벤트를 생성하는 두 가지 방법이 존재한다... JavaScript/DOM 2022. 12. 11.

• 

  [JS]이벤트 위임(Event Delegation)이란? 이벤트 위임(Event Delegation) JavaScript의 대부분 이벤트는 이벤트 흐름(Event Flow)의 이벤트 캡처링, 이벤트 버블링 단계를 거칩니다. 일반적으로 addEventListener() 메서드의 세 번째 매개변수로 true를 전달하지 않은 이상 이벤트 캡처링 단계는 수행되지 않고 이벤트 버블링 단계를 거치는데, 이벤트 버블링은 타겟에서 이벤트가 발생하면 타겟에서 위로 이벤트를 전파하는 것을 말합니다. 아래 예제에서 태그에서 click 이벤트가 발생하면, button → span → div로 이벤트가 전파됩니다. 버튼 const divNode = document.getElementById("div-content"); const spanNode = document.getElement.. JavaScript/DOM 2022. 12. 11.

• 

  [JS]이벤트 핸들러와 이벤트 리스너 이벤트 핸들러와 이벤트 리스너 JavaScript에서 이벤트는 사용자와 웹 페이지간의 상호작용입니다. 예를 들어 티스토리에서 좋아요 버튼을 클릭하거나 네이버 검색 창에서 엔터 키를 누르는 행위를 이벤트가 동작했다고 말합니다. JavaScript에서 이벤트가 발생했을 때, 개발자가 구현한 기능을 수행하도록 함수를 연결하는 것을 이벤트 핸들러 또는 이벤트 리스너라고 말합니다. 이벤트 핸들러와 이벤트 리스너는 비슷하면서도 다른 개념이며 이번 포스팅은 JavaScript에서 이벤트와 함수를 연결하는 방법 그리고 이벤트 핸들러와 이벤트 리스너의 차이점을 설명합니다. 이벤트 핸들러 이벤트 핸들러는 쉽게 설명하자면 addEventListener() 메서드를 사용하지 않고 이벤트와 함수를 연결하는 것입니다. 버튼에서 .. JavaScript/DOM 2022. 12. 10.

• 

  [JS]이벤트 흐름(Event Flow) 이해하기 이벤트 흐름(Event Flow) 이해하기 JavaScript에서 이벤트라는 개념은 간단하면서 복잡합니다. 특정 이벤트(클릭, 값 변경, 마우스 커서 이동 등)가 발생했을 때, 동작하는 이벤트 핸들러 함수를 구현하는 것은 간단하지만 이벤트가 발생하고 처리되는 과정은 생각보다 복잡하기 때문입니다. 이번 포스팅은 JavaScript에서 이벤트가 무엇이고 어떻게 동작하는지 설명합니다. 이벤트(Event) 이벤트는 웹 페이지를 사용하는 사용자에 의해 일어나는 사건입니다. 이벤트의 대표적인 예시로 버튼 클릭, 엔터 키 입력, 파일 드래그 앤 드롭이 존재합니다. 사용자가 로그인 화면에서 id와 password를 입력 후 엔터키를 입력하거나 로그인 버튼을 눌렀을 때, id와 password를 처리하는 기능은 개발자가.. JavaScript/DOM 2022. 12. 10.

• 

  [JS]insertAdjacentHTML 메서드로 HTML 요소 추가하기 insertAdjacentHTML 메서드로 HTML 요소 추가하기 JavaScript에서 HTML 요소를 추가할 수 있는 방법으로 innerHTML 프로퍼티가 존재합니다. 하지만 innerHTML은 생각보다 빠르게 동작하지 않으며 많은 위험 요소를 가지고 있습니다. 이번 포스팅은 innerHTML의 위험성과 JavaScript에서 HTML 요소를 추가할 수 있는 또 다른 방법인 insertAdjacentHTML() 메서드를 설명합니다. innerHTML의 위험성 HTML 요소를 가져온 다음 innertHTML 프로퍼티의 값을 변경하면 HTML 요소의 텍스트를 변경하거나 하위 노드를 추가할 수 있습니다. 아래는 id가 "list"인 요소를 가져온 다음 innerHTML 프로퍼티를 사용하여 두 개의 요소를 .. JavaScript/DOM 2022. 12. 10.

• 

  [JavaScript]style 프로퍼티 설정 및 가져오기 style 프로퍼티 설정 및 가져오기 이번 포스팅은 JavaScript에서 HTML 요소에 적용된 style 애트리뷰트를 설정 및 가져오는 방법을 소개합니다. 특정 css 프로퍼티 가져오기 태그는 세 가지 css 프로퍼티인 font-size, color, background-color를 가지고 있습니다. style 애트리뷰트의 css 프로퍼티의 이름은 하이픈(-)이 포함되어 있습니다. 따라서, JavaScript에서 css 프로퍼티를 가져오려면 대괄호 표기법을 사용하거나 JavaScript에서 지원하는 프로퍼티를 사용합니다. const inputNode = document.getElementById("input-text"); // JavaScript에서 지원하는 프로퍼티 console.log(inputN.. JavaScript/DOM 2022. 12. 8.

• 

  [JavaScript]style 애트리뷰트(Attribute) 제거하는 방법 style 애트리뷰트(Attribute) 제거하는 방법 이번 포스팅은 JavaScript에서 style 애트리뷰트를 제거할 수 있는 몇 가지 방법을 소개합니다. removeProperty() - 특정 프로퍼티 제거 HTML 요소의 style 애트리뷰트(Attribute)는 세미콜론(;)을 사용하여 여러 값을 설정할 수 있습니다. 아래 HTML 마크업 문서의 태그는 세 가지 css 프로퍼티인 font-size, color, background-color를 가지고 있습니다. JavaScript에서 특정 css 프로퍼티만 제거하고 싶은 경우 style 프로퍼티의 removeProperty() 메서드를 사용합니다. const result = selectedNode.style.removeProperty(css);.. JavaScript/DOM 2022. 12. 7.

• 

  [JavaScript]HTML 애트리뷰트(Attribute)가 존재하는지 확인하는 방법 HTML 애트리뷰트(Attribute)가 존재하는지 확인하는 방법 이번 포스팅은 JavaScript에서 HTML 요소에 애트리뷰트가 존재하는지 확인하는 방법을 소개합니다. hasAttribute() - 특정 애트리뷰트가 존재하는지 선택한 요소에서 특정 애트리뷰트가 존재하는지 확인하려면 hasAttribute() 메서드를 사용합니다. const isAttribute = selectedNode.hasAttribute(name); 매개변수 name: 특정 애트리뷰트의 이름을 문자열로 전달합니다. 반환 결과 매개변수로 전달된 특정 애트리뷰트가 존재하면 true를 반환하고 그렇지 않으면 false를 반환합니다. 아래는 id가 "input-text"인 HTML 요소를 선택한 다음 hasAttribute() 메서드로.. JavaScript/DOM 2022. 12. 7.

• 

  [JavaScript]HTML 애트리뷰트(Attribute) 제거하는 방법 HTML 애트리뷰트(Attribute) 제거하는 방법 이번 포스팅은 JavaScript에서 HTML 애트리뷰트(Attribute)를 제거하는 몇 가지 방법을 소개합니다. removeAttribute() - 애트리뷰트 이름을 전달 가장 일반적인 방법으로 선택한 요소에서 removeAttribute() 메서드를 호출하여 특정 애트리뷰트를 제거할 수 있습니다. selectedNode.removeAttribute(name); 매개변수 name: 애트리뷰트의 이름입니다. 반환 결과 삭제 여부와 관계없이 undefined를 반환합니다. 아래는 id가 "input-text"인 HTML 요소의 name 애트리뷰트를 removeAttribute() 메서드로 제거하는 예제입니다. const inputNode = docum.. JavaScript/DOM 2022. 12. 7.

• 

  [JavaScript]HTML 애트리뷰트(Attribute) 설정하는 방법 HTML 애트리뷰트(Attribute) 설정하는 방법 이번 포스팅은 JavaScript에서 HTML 애트리뷰트(Attribute)를 설정하는 몇 가지 방법을 소개합니다. setAttribute() - 이름과 매핑되는 값을 설정 가장 일반적인 방법인 setAttribute() 메서드를 사용하여 선택한 요소의 애트리뷰트를 설정할 수 있습니다. selectedNode.setAttribute(name, value); setAttribute() 메서드는 두 개의 매개변수를 가집니다. 첫 번째 매개변수는 애트리뷰트의 이름이며 대문자를 입력하면 자동으로 소문자로 변환됩니다. 두 번째 매개변수는 애트리뷰트의 이름과 매핑되는 값이며 문자열 타입으로 변환됩니다. setAttribute() 메서드는 undefined를 반환.. JavaScript/DOM 2022. 12. 7.

• 

  [JavaScript]HTML 애트리뷰트(Attribute) 가져오는 방법 HTML 애트리뷰트(Attribute) 가져오는 방법 이번 포스팅은 JavaScript에서 HTML 애트리뷰트(Attribute)를 가져오는 몇 가지 방법을 소개합니다. getAttribute() - 애트리뷰트 이름으로 값 가져오기 특정 HTML 요소를 선택한 다음 getAttribute() 메서드를 호출하여 HTML 애트리뷰트의 값을 가져올 수 있습니다. 아래는 세 개의 애트리뷰트를 가지는 태그입니다. const inputNode = document.getElementById("input-text"); console.log(inputNode.getAttribute("id")); // input-text console.log(inputNode.getAttribute("name")); // content .. JavaScript/DOM 2022. 12. 7.