반응형 Language/JavaScript64 [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] 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. [JavaScript] String.fromCharCode() - 입력받은 유니코드를 해당 유니코드가 의미하는 문자열로 변환하기 (ft. str.charCodeAt()) 유니코드 값을 문자열로 변환시켜주는 String.fromCharCode() 메서드와 그 반대로 특정 문자가 의미하는 유니코드값으로 변환시켜주는 String.prototype.charCodeAt() 메서드에 대해 알아보자. ▷ 구문 String.fromCharCode(num1[, ...[, numN]]) str.charCodeAt(index) num1, ..., numN : UTF-16 코드 유닛인 숫자 뭉치며, 가능한 값의 범위는 0부터 65535까지이다. (유효성 검사를 하지 않으며, 초과하는 값은 잘린다.) index : charAt() 메서드의 매개변수 처럼 0 이상이고 해당 문자열의 길이보다 작은 정수를 의미한다. (기본값은 0이다.) ▷ 예제 1) String.froCharCode() 메서드 기.. 2022. 2. 13. [JavaScript] str.charAt() - 문자열에서 특정 인덱스에 위치하는 단일문자 찾기 String.prototype.charAt() 메서드는 제목 그대로 기준 문자열에서 특정 인덱스에 위치하는 유니코드 단일문자를 찾는 메서드이다. ▷ 구문 str.charAt(index) index : 0과 문자열의 길이 -1 사이의 정수값을 의미하며, 인자를 생략하면 기본값으로 0이 설정되어 첫 문자를 반환한다. ▷ 예제 1) String.prototype.charAt() 기본 사용법 let str = "my blog is mine-it-record"; console.log(str.charAt()); // m console.log(str.charAt(3)); // b console.log(str.charAt(4)); // l console.log(str.charAt(5)); // o console.log.. 2022. 2. 13. 이전 1 2 3 4 5 ··· 8 다음 반응형
