일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
- windows
- 테이블
- 자바
- js
- 문자열
- javascript
- 자바스크립트
- 인텔리제이
- vscode
- CMD
- 이탈리아
- Maven
- input
- list
- Array
- 배열
- Visual Studio Code
- ArrayList
- Button
- string
- IntelliJ
- Eclipse
- Files
- table
- CSS
- date
- html
- 이클립스
- Java
- json
- Today
- Total
목록IT/Javascript (181)
어제 오늘 내일
javascript에서 dom의 요소(element)를 복사하여 붙여넣기 하는 방법입니다. cloneNode() dom의 노드(node)를 복사하는 함수입니다. var dupNode = node.cloneNode(deep); 이 함수는 node를 복사하여, 복사본을 리턴(dupNode)합니다. 파라미터 deep (optional) true/false 요소의 하위 요소까지 모두 복사하려면 true 요소의 하위 요소를 제외하고 복사하려면 false default : false 또는 true (최신 브라우저에서는 default 값이 false 이지만, 구형 브라우저에서는 default 값이 true입니다. 따라서, 이 값은 optional 이지만, 가능하면 파라미터 값을 명확하게 작성해 주는 것이 좋습니다. ..
특정 element에 자식 노드(node)가 존재하는지, 자식 요소(element)가 존재하는지 확인하는 방법입니다. 자식 노드(node) 존재 여부 확인 자식 요소(element) 존재 여부 확인 시작하기 전에! node와 element의 차이가 궁금하다면? [Javascript] node와 element의 차이 Javascript에서 DOM을 다루다 보면 node와 element가 자주 등장합니다. 이 2가지를 다루는 방법이 조금 달라서 헷갈리는 경우가 많은데, 이번 포스팅에서는 node와 element의 차이점을 정리해 보도록 하겠 hianna.tistory.com 자식 node, 자식 element를 탐색하는 방법이 궁금하다면? [Javascript] 부모, 자식, 형제 노드(node)와 요소(e..
DOM에 특정 id를 가지는 element가 있는지 체크하는 방법입니다. DOM에 특정 id element가 존재하는지 체크하기 document.getElementById(id); getElementById() 함수는 dom에서 특정 id를 가지는 element를 조회하는 함수입니다. 이 함수는, 만약 찾는 id를 가진 element가 없으면 null을 리턴합니다. 이런 점을 이용하여, dom에 특정 id를 가지는 element가 있는지 체크할 수 있습니다. 예제 사과 바나나 // 특정 id가 존재하는지 체크하는 함수 function checkElementExist(id) { if(document.getElementById(id)) { document.write(id + ' is exist' + ' ')..
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..