반응형 Language199 [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. [ES6+] arr.fill() - 배열을 특정 값으로 채우기 (ft. 특정 인덱스 지정) 배열을 특정 값으로 채우는 Array.prototype.fill() 메서드에 대해 알아보자. 이 메서드는 배열의 시작 인덱스부터 끝 인덱스의 이전까지 정적인 값 하나로 채우는데, 매개변수를 통해 시작 인덱스와 끝 인덱스를 지정할 수 있다. ▷ 구문 arr.fill(value[, start[, end]]) value : 배열을 채울 특정 값 start : 시작 인덱스이며, 생략 시 기본 값은 0 end : 끝 인덱스이며, 생략 시 기본 값은 배열의 길이(this.length)이다. ▷ 예제 1) Array.prototype.fill() 기본 사용법 // [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] const arr1 = Array(10).fill(0); arr1.fill(1, 2, 6); // .. 2022. 3. 4. [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. [JavaScript] document.getElementsByTagName() - 특정 tag명을 가진 dom 요소들을 찾기/가져오기 (ft. element.getElementsByTagName()) javascript로 dom 요소를 제어할때 사용되는 메서드중 하나인 document.getElementsByTagName()에 대해 알아보자. 메서드명 그 의미를 그대로 가지고 있어, 특정 tag명을 가지고 있는 dom 요소에 접근하기 위한 메서드이다. ▷ 구문 document.getElementsByTagName(name); name : 찾으려는 태그 요소명을 의미한다. (특수 문자 * 은 모든 엘리먼트를 나타낸다.) ▷ 예제 1) document.getElementsByTagName() 사용법 div-1 div_2 span p span // 기본 사용법 document.getElementsByTagName('div'); // HTMLCollection(4) [div, div, div, div#wra.. 2022. 2. 24. [JavaScript] document.getElementsByClassName() - 특정 class를 가지고 있는 dom 요소들을 찾기/가져오기 (ft. element.getElementsByClassName()) javascript로 dom 요소를 제어할때 사용되는 메서드중 하나인 document.getElementByClassName()에 대해 알아보자. 메서드명 그 의미를 그대로 가지고 있어, 특정 class를 가지고 있는 모든 dom 요소에 접근하기 위한 메서드이다. 지금까지 그냥 아무생각없이 사용해왔는데, 한번 공부할 겸 정리하고자 한다. ▷ 구문 document.getElementsByClassName(names) names : 찾으려는 요소 클래스를 의미하며, 대소문자를 구분하는 문자열을 사용한다.(여러 클래스 이름은 공백으로 구분된다.) ▷ 예제 1) document.getElementsByClassName() 사용법 div-1 div_2 sp1 sp2 // 기본 사용법 document.getElem.. 2022. 2. 24. [JavaScript] document.getElementById() - 특정 id를 가지고 있는 dom 요소를 찾기/가져오기 javascript로 dom 요소를 제어할때 가장 많이 사용되는 메서드중 하나인 document.getElementById()에 대해 알아보자. 메서드명 그 의미를 그대로 가지고 있어, 특정 id를 가지고 있는 dom 요소에 접근하기 위한 메서드이다. 지금까지 그냥 아무생각없이 사용해왔는데, 한번 공부할 겸 정리하고자 한다. ▷ 구문 document.getElementById(id); id : 찾으려는 요소 id를 의미하며, 대소문자를 구분하는 문자열을 사용해야하는데 id는 기본적으로 문서 내에서 유일해야 한다. (처음 발견하는 id 하나만 반환하며, 주어진 id가 없을 경우 null을 반환한다.) ▷ 예제 1) document.getElementById() 사용법 div-1 div_2 div3 // 기.. 2022. 2. 24. [JavaScript] 배열에서 최대값, 최소값 구하는 방법(ft. Math.(max/min)) 배열에서도 최대값과 최소값을 구하는 방법에 대해 알아보자. 일반적으로 최대, 최소값을 구한다 하면 Math.max() 함수와 Math.min()함수를 사용하고는 하는데, 여기에 배열을 대상으로 사용하게되면 안타깝게도 제대로된 값을 반환하지 않는다. 예제를 통해 몇가지 방법에 대해 접해보자. ▷ 예제 1 ) Function.prototype.apply() 사용하기 const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.log(Math.max.apply(null, nums)); // 10 console.log(Math.min.apply(null, nums)); // 1 이 방법은 대부분의 브라우저에서 사용이 가능하니 알아두면 좋다. apply(this, arr) 라는.. 2022. 2. 22. 이전 1 2 3 4 5 6 7 ··· 23 다음 반응형
