반응형 javascript91 [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. [ES6+] 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. [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. [JavaScript] parseInt() - 문자열을 숫자 혹은 특정 진수의 정수로 변환 방법 parseInt() 메서드는 문자열을 숫자 혹은 특정 진수의 정수로 변환시켜주는 메서드이다. parseInt() 메서드와 동시에 반대되는 메서드인 숫자를 문자 혹은 특정 진수값으로 변환시켜주는 toString() 메서드에 대해서도 같이 알아두도록 하자. ▷ 구문 parseInt(string) parseInt(string, radix) string : 파싱할 문자열이며, 만약 매개변수가 문자열이 아닐경우 toString 추상 연산을 사용해 문자열로 변환하여 사용된다.(공백이 아닌 첫 문자를 숫자로 변환할 수 없는 경우 NaN을 반환) radix : string의 진수를 나타내는 2와 36사이의 정수 (2와 36 사이의 범위를 벗어날 경우 NaN을 반환) ▷ 예제 1) parseInt() 기본 사용법 // .. 2022. 2. 9. 이전 1 2 3 4 5 6 ··· 11 다음 반응형
