반응형 Language/JavaScript62 [JavaScript] Array.isArray() - 배열(Array)이 맞는지 판별/확인하기 Array.isArray() 메서드는 제목 그대로 배열인지 확인하기 위한 메서드이다. 배열인지를 확인할 때 instanceof나 typeof 대신에 Array.isArray()를 사용하는 것이 더 정확한 결과를 얻을 수 있다. ▷ 구문 Array.isArray(obj) obj: 검사할 객체 ▷ 예제 1) Array.isArray() true/false 판별 // 모두 true 반환 Array.isArray([]); Array.isArray([1]); Array.isArray(new Array()); Array.isArray(new Array('a', 'b', 'c', 'd')); Array.isArray(new Array(3)); // Array.prototype은 스스로도 배열입니다 Array.isAr.. 2022. 7. 13. [JavaScript] element.(after/before) - 특정 element 앞뒤로 요소 추가 및 이동하기 after(), before() 메서드는 말 그대로 특정 element의 앞뒤로 요소를 추가하거나 이동시켜주는 메서드이다. 이전 게시글에서 element.insertAdjacentElement() 메서드에 대해 정리했었는데, [JavaScript] element.insertAdjacentElement() - 특정 element를 기준으로 노드 삽입하기 및 이동하기 (ft. insertAd insertAdjacentElement() 메서드는 특정 element를 기준으로 앞뒤, 자식으로의 처음, 마지막 위치로 노드 삽입을 하게 도와주는 메서드이다. ▷ 구문 targetElement.insertAdjacentElement(position, element) po.. mine-it-record.tistory.c.. 2022. 6. 7. [JavaScript] element.insertAdjacentElement() - 특정 element를 기준으로 노드 삽입하기 및 이동하기 (ft. insertAdjacentHTML, insertAdjacentText) insertAdjacentElement() 메서드는 특정 element를 기준으로 앞뒤, 자식으로의 처음, 마지막 위치로 노드 삽입 또는 이동을 하게 도와주는 메서드이다. ▷ 구문 targetElement.insertAdjacentElement(position, element) position: 상대적인 위치를 나타내는 문자열로, 다음 문자열 중 하나만 사용 가능하다.(대소문자 구분을 하지 않는다.) beforebegin: targetElement의 앞 afterbegin: targetElement 자식 요소의 첫 번째 위치 beforeend: targetElement 자식요소의 마지막 위치 afterend: targetElement의 뒤 element: 특정 elemet를 기준으로 poisiton에 알.. 2022. 6. 7. [JavaScript] 문서의 로딩되는 시점 이벤트 제어하기 (ft. DOMContentLoaded, load, beforeunload, unload) 문서에 따르면 HTML 문서의 생명주기엔 다음과 같은 3가지 주요 이벤트가 관여한다고 한다. DOMContentLoaded - 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생한다. 이미지 파일()이나 스타일시트 등의 기타 자원은 기다리지 않는다. load - HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생한다. beforeunload/unload - 사용자가 페이지를 떠날 때 발생한다. 각각의 시점 이벤트이기 때문에 당연히 이벤트를 주입해서 사용해주면 된다. // only document window.addEventListener("DOMContentLoaded", (event) => { console... 2022. 5. 27. [JavaScript] element.matches() - 해당 엘리먼트가 CSS 선택자(selector)로 선택이 되는지 여부 확인 matches() 메서드는 기준 element가 CSS 선택자처럼 (예를 들어 #id, .class, [href ^= https] 등의 선택자들) 선택이 되는지 여부를 확인하는 메서드다. ▷ 구문 targetElement.matches(selectorString); selectorString: CSS 선택자와 동일한 표현식의 문자열 ▷ 예제 1) matches 사용법 Here is id div-01 Here is id div-02 Here is class div-03 mineItRecord const div0 = document.querySelector('#div-0'); const div1 = document.querySelector('#div-1'); const div2 = document.query.. 2022. 5. 27. [JavaScript] str.match() - 문자열에 원하는 특정 문자열 혹은 정규식과 매치되는 문자열 찾기 String.prototype.match() 메서드는 제목 그대로 기준 문자열에서 원하는 특정 문자열 혹은 정규식과 매치되는 부분을 찾아주는 메서드이다. ▷ 구문 str.match(regexp) regexp: 정규식 개체이며, 정규표현식이 아닌 객체가 전달되면 암묵적으로 정규표현식(RegExp)으로 변환된다. ▷ 예제 1) String.prototype.match() 기본 사용법 let str = 'Hello my blog, My blog name is mine-it-record' // 1. 정규표현식 글로벌 플래그(g) 없이 사용하기 str.match(/name is [a-z]{4}-it/i); // [ // 'name is mine-it', // index: 23, // input: 'Hello my.. 2022. 5. 27. [JavaScript] element.closest() - 특정 엘리먼트를 기준으로 부모요소, 상위요소 중 일치하는 요소 찾기 특정 element를 기준으로 상위요소 중 일치하는 요소를 찾게 도와주는 closest() 메서드에 대해 알아보자. closest() 메서드는 기준 element에서부터 부모 요소 단위로 출발하여 각 요소가 지정한 선택자에 만족할 때까지 탐색한다. 그 중 가장 가깝게 조건에 만족하는 부모 요소가 반환되며, 조건에 만족한 요소가 없으면 null값을 반환한다. ▷ 구문 let closestElement = targetElement.closest(selectors); selectors : 하나 이상의 선택자를 포함한 DOM 요소 문자열이다. ▷ 예제 1) closest 사용법 Here is div-01 Here is div-02 Here is div-03 span?span! let el = document.g.. 2022. 3. 2. [JavaScript] element.classList - 특정 엘리먼트의 클래스 속성 제어하기 javascript로 엘리먼트의 접근하여 특정 클래스를 제어하는 방법에 대해 알아보자. ▷ 구문 const elementClasses = element.classList; classList자체는 엘리먼트의 클래스 목록에 접근하는 방식인데, 사실상 클래스 목록을 가져오는 역할만 하고 그 안에 내장되어있는 메서드를 통해 해당 엘리먼트의 클래스를 제어하는 것이다. Element.classList의 주요 메서드는 다음과 같다. add(String [, String [, ...]]) : 지정한 클래스 값을 추가하며(여러개 동시 삽입 가능), 만약 추가하려는 클래스가 엘리번트의 class 속성에 이미 존재한다면 무시한다. remove(String [, String [, ...]]) : 지정한 클래스 값을 제거하며(.. 2022. 2. 27. [JavaScript] document.(querySelector/querySelectorAll) - DOM 요소에 구체적으로 접근하기 javascript로 dom 요소를 제어할때 사용되는 메서드인 document.querySelector() 와 document.querySelectorAll()에 대해 알아보자. 평소 자주 사용하던 getElementById, getElementsByClassName, getElementsByTagName 과 비슷하면서도 다르며, 좀 더 구체적으로 dom 요소에 접근하는것을 도와주는 메서드이다. ▷ 구문 document.querySelector(selectors); document.querySelectorAll(selectors); selectors : 하나 이상의 선택자를 포함한 DOM 요소 문자열이다. ▷ 예제 1) querySelector / querySelectorAll 사용법 div-1 div_.. 2022. 2. 24. 이전 1 2 3 4 ··· 7 다음 반응형
