반응형 Language200 [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] arr.fill() - 배열을 특정 값으로 채우기 (ft. 특정 인덱스 지정) 배열을 특정 값으로 채우는 Array.prototype.fill() 메서드에 대해 알아보자.이 메서드는 배열의 시작 인덱스부터 끝 인덱스의 이전까지 정적인 값 하나로 채우는데, 매개변수를 통해 시작 인덱스와 끝 인덱스를 지정할 수 있다. ▷ 구문arr.fill(value[, start[, end]])value : 배열을 채울 특정 값start : 시작 인덱스이며, 생략 시 기본 값은 0end : 끝 인덱스이며, 생략 시 기본 값은 배열의 길이(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); // [0, 0, 1,.. 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. 이전 1 2 3 4 5 6 7 ··· 23 다음 반응형
