반응형 Language/JavaScript94 [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. [JavaScript] arr.flat() - 배열의 평탄화, 중첩 배열 하나로 만들기 (ft. flatMap()) ES2019(ES10)에서 새롭게 추가된 Array.prototype.flat() 메서드에 대해 알아보자.이 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙여 새로운 배열로 만들어주는 역할을 한다. ▷ 구문const newArr = arr.flat([depth])depth : 중첩 배열 구조를 평탄화할 때 사용할 깊이 값이며, 생략 시 기본값으로 1이 주어진다.▷ 예제 1) Array.prototype.flat() 기본 사용법const arr1 = [1, 2, ,[3, 4]];arr1.flat(); // [1, 2, 3, 4] depth를 생략할 경우 기본적으로 1이 주어지며, 1depth의 배열까지 모두 평탄화 작업을 실시하여 배열로 반환한다.이 때 배열에 비어있는 인덱스는 생략되어 .. 2022. 2. 19. [JavaScript] str.(substring/substr/split) - 문자열 자르고 나누기 (ft. slice()) 문자열을 잘라주는 메서드인 String.prototype.substring() 와 String.prototype.substr() 그리고 문자열을 특정 구분자를 기준으로 나누는 String.prototype.split() 메서드에 대해 알아보자. 추가적으로 String.prototype.slice() 를 같이 알아두면 좋다. 1. String.prototype.substring() - substring() 메서드는 문자열의 시작 인덱스로 부터 종료 인덱스 "이전"까지의 문자열을 반환한다. - substring() 메서드를 사용할 때 만약 시작 인덱스와 종료 인덱스가 동일할 경우 빈 문자열을 반환한다. - substring() 메서드를 사용할 때 시작 인덱스가 종료 인덱스보다 큰 경우, 두개의 인자가 바뀐듯.. 2022. 2. 14. 이전 1 2 3 4 5 6 ··· 11 다음 반응형
