어제 오늘 내일

Javascript에서 class 이름으로 element를 찾는 방법은 다음과 같습니다. getElementsByClassName() querySelector() querySelectorAll() getElementsByClassName() 클래스 이름을 파라미터로 입력받아서 해당 클래스를 가진 모든 element 목록을 HTMLCollection 형태로 리턴합니다. 예제 - getElementsByClassName() 수박 사과 포도 .green { color : green; } .red { color: red; } .purple { color: purple; } .underline { text-decoration: underline; } // class 이름으로 element 목록 조회 const e..

지난번에는 node와 element의 차이에 대해서 정리해보았습니다. 이번에는 dom에서 부모, 자식, 형제 노드(node)와 요소(element)를 탐색하는 방법을 정리해 보도록 하겠습니다. node 탐색 부모(parent) 노드 자식(child) 노드 형제(sibling) 노드 element 탐색 부모(parent) 요소 자식(child) 요소 형제(sibling) 요소 1. node(노드) 탐색하기 dom은 node의 계층 구조로 이루어져 있습니다. 따라서, node에는 element, text, comment 등 여러 항목이 포함되어 있다는 것에 주의하세요. node의 부모, 형제, 자식은 아래 표와 같은 속성을 통해 접근할 수 있습니다. 부모(parent) 노드 탐색 parentNode : 부모..

Javascript에서 DOM을 다루다 보면 node와 element가 자주 등장합니다. 이 2가지를 다루는 방법이 조금 달라서 헷갈리는 경우가 많은데, 이번 포스팅에서는 node와 element의 차이점을 정리해 보도록 하겠습니다. node vs element DOM 문서는 node의 계층 구조로 이루어져 있습니다. 이 node는 여러 가지 다양한 유형이 존재합니다. 요소(element), 텍스트, 주석 등등... element는 이러한 node의 여러가지 유형 중 한 가지입니다. 위 그림과 같이 element는 여러 가지 node의 유형 중 한 타입입니다. 즉, node는 element의 상위 개념입니다. 좀 더 자세히 설명하면, element는 html 문서에서 , , 과 같은 태그를 사용해서 작성..

Javascript에서 문자열의 마지막 문자를 제거하는 4가지 방법을 정리하였습니다. slice() substring() substr() replace() slice() slice() 함수는 문자열의 일부를 잘라서 새로운 문자열을 리턴합니다. str.slice(startIndex[, endIndex]) 파라미터 startIndex (필수 입력값) 잘라낼 문자열의 시작 index입니다. 0부터 시작합니다. 만약, 이 값이 음수이면, [문자열 길이 + startIndex]로 계산되어 실행됩니다. 예를 들어, 위 예제에서 startIndex가 -3이면, 이것은 (4+(-3)), 즉, 1과 같습니다. endIndex (optional) 문자열을 잘라낼 종료 index입니다. 0부터 시작합니다. 문자열이 추출될 ..

반복문을 사용하여 배열의 값을 출력하는 방법을 정리해보았습니다. for forEach() for in for of for // 배열 선언 const arr = ['A', 'B', 'C']; // 배열 출력 (for 문) for(let i = 0; i < arr.length; i++) { document.write(arr[i] + ' '); } 가장 기본적인 반복문인 for문을 사용하여 배열의 값을 출력하였습니다. 배열은 0부터 순서대로 index가 증가하기 때문에, for문을 이용하여 index를 증가시키고, 이 index를 사용하여 배열에 순차적으로 접근하여 각각의 값을 출력하였습니다. forEach() // 배열 선언 const arr = ['A', 'B', 'C']; // 배열 출력 (forEach..

이번 포스팅에서는 Javascript에서 숫자를 배열로 바꾸는 2가지 방법을 소개합니다. Array.from() split(), map() 1. Array.from() Array.from(arrayLike[, mapFn[, thisArg]]) Array.from() 함수는 유사배열객체(array like object)나 반복가능한객체(iterable object)를 얕은 복사(shallow-copy)하여 새로운 Array 객체를 만들어서 리턴합니다. 파라미터 arrayLike 필수 입력값 배열로 변환하고자 하는 객체(array like object 또는 iterable object)를 입력합니다. mapFn 배열의 요소(element)들에 호출할 맵핑 함수. thisArg mapFn 내에서 this로 사..

Javascript에서 Number()와 parseInt()는 문자열을 숫자로 변환할 때 주로 사용됩니다. 이번에는 두 함수의 차이점을 정리해보도록 하겠습니다. Number() Number 객체는 숫자를 표현하는 wrapper 객체입니다. Number 객체는 Java나 C#에서의 double과 비슷합니다. 즉, Number 객체는 소수점 이하 17자리를 표현할 수 있습니다. Number()는 Number 객체의 Constructor로, Number 객체를 생성합니다. parseInt() parseInt()에 대한 설명은 이전의 포스팅을 참조하세요. [Javascript] 문자열 숫자로 변환하기 (1) - parseInt() 지난번에는 문자열이 숫자인지 아닌지 체크하는 방법을 알아보았습니다. [Javasc..

이번 포스팅에서는 사용자가 체크박스를 선택했을 때, 텍스트 박스를 활성화하고 체크박스 선택을 해제했을 때, 텍스트 박스를 비활성화 하는 방법을 정리해보도록 하겠습니다. 체크박스 선택 시, 텍스트박스 활성화/비활성화 하기 다음 예제는 아래와 같이 동작합니다. 체크박스 선택 했을 때 텍스트 박스 활성화 텍스트 박스에 포커스 체크박스 선택해제 했을 때 텍스트 박스 비활성화 텍스트 박스 입력값 초기화 기타 의견 입력 function toggleTextbox(checkbox) { // 1. 텍스트 박스 element 찾기 const textbox_elem = document.getElementById('my_text'); // 2-1. 체크박스 선택여부 체크 // 2-2. 체크박스 선택여부에 따라 텍스트박스 활성..

체크박스는 2개의 상태를 가집니다. checked unchecked 이번 포스팅에서는 체크박스의 상태를 확인하는 예제를 정리해보았습니다. 체크박스의 체크여부 확인하기 체크하세요 function is_checked() { // 1. checkbox element를 찾습니다. const checkbox = document.getElementById('my_checkbox'); // 2. checked 속성을 체크합니다. const is_checked = checkbox.checked; // 3. 결과를 출력합니다. document.getElementById('result').innerText = is_checked; } checkbox가 선택되었는지 확인하기 위해서 checkbox element를 선택하고,..

이번에는 CSS를 사용하여 버튼(element)을 숨기는 방법과 사용자 이벤트가 발생하였을 때 Javascript를 사용하여 버튼을 숨기고 다시 보일수 있는 방법(토글)을 정리하였습니다. [CSS] 버튼 숨기기 display : none; visibility : hidden; [Javascript] 버튼 숨기기, 보이기 (토글) display 속성 visibility 속성 1. [CSS] 버튼 숨기기 display : none; #btn2 { display : none; } 위 예제에는 원래 3개의 버튼이 존재 합니다. (버튼1, 버튼2, 버튼3) display: none; display 속성값을 none으로 설정하면 해당 버튼은 화면에서 사라지고, 더 이상 화면에서 공간을 차지하지 않게 됩니다. 이 예..