본문 바로가기

javascript30

[javascript] DOM의 활용 1. 요소 노드 선택하기 태그로 선택: document.getElementsByTagName("li"); id로 선택: document.getElementById(“id"); class로 선택: document.getElementsByClassName("class"); name으로 선택: document.getElementsByName("name"); * css 선택자로 선택: document.querySelector('css') > 선택자에 해당하는 태그 중 가장 첫번째 태그 하나 document.querySelectorAll('css') > 선택자에 해당하는 태그 모음 (NodeList) 2. 요소 노드 생성하기 document.createElement('div'); > 생성하고자 하는 태그 이름으로.. 2022. 9. 22.
[javascript] inner/outerHTML, textContent 비교 1. element.innerHTML 요소 노드 내부의 html 코드를 문자열로 리턴해 준다, 내부에 있는 행갈이나 들여쓰기 모두 포함하여. > 요소 안의 정보를 확인할 수도 있지만 내부의 html 자체를 수정할 때 자주 활용된다. (내부에 있던 값을 완전히 새로운 값으로 교체하기 때문에 주의해서 사용!) 2. element.outerHTML 요소 노드 자체의 전체적인 html 코드를 리턴해 준다. inner와 마찬가지로 행갈이, 들여쓰기 모두 포함이다. (새로운 값을 할당할 경우 요소 자체가 교체되어 버리기 때문에 주의!) 3. element.textContent 요소 내부 내용들 중 html 태그를 제외한 테스트만 출력. 마찬가지로 행갈이, 들여쓰기 포함. > innerHTML처럼 노드 내부의 값에 .. 2022. 9. 13.
[js] 프로그래머스 - 이진 변환 반복하기 프로그래머스 lv2 이진 변환 반복하기 0과 1로 이루어진 문자열에 대해 다음과 같은 변환 과정을 거친다. x의 모든 0을 제거한다. x를 "x의 길이를 2진법으로 표현한 문자열"로 바꾼다. 예시) x='110010101001' 1) 0을 제거 > x='111111' 2) x의 길이를 2진수로 표현 > x의 길이가 6이므로 2진수로 바꾸면 '110' > x='110' 위의 과정을 x가 1이 될 때까지 반복한다. 2진 변환 과정을 거친 횟수와 제거한 0의 개수를 배열로 출력한다. 입출력▽ s result '110010101001' [3, 8] 1) 우선 s의 1과 0을 구분하여 1은 저장하고, 0은 개수를 센다. var answer = [0, 0]; let one = ''; for (let i = 0; i.. 2022. 9. 8.
[js] 프로그래머스 - 로또의 최고 순위와 최저 순위 프로그래머스 lv1 로또 예상 순위 출력하기 순위 당첨 내용 1 6개 번호 일치 2 5개 번호 일치 3 4개 번호 일치 4 3개 번호 일치 5 2개 번호 일치 6(낙첨) 그 외 로또에 낙서를 하여 알아볼 수 없는 번호는 0으로 표기하고 보이는 번호로 추측하여 당첨 가능한 최고 순위와 최저 순위를 출력하는 문제이다. 예시) 당첨 번호 : 1, 6, 10, 19, 31, 45 구입한 로또 번호 : 0, 0, 1, 25, 31, 44 이때 알 수 없는 번호를 제외한 4개의 숫자 중에서 1과 31이 일치한 상황이므로 알 수 없는 번호가 모두 불일치할 경우 최소 [2개 번호 일치 > 5등] 알 수 없는 번호가 모두 일치할 경우 최대 [4개 번호 일치 > 3등]으로 추측할 수 있다. 따라서 출력값은 [3, 5]이다.. 2022. 9. 8.
[javascript] Dom이란? - 2 (Dom 트리) DOM 트리 DOM의 기본 개념을 기반으로 문서의 계층 구조를 그림으로 나타낸 것을 DOM 트리라 한다. DOM(Document Object Model) 문서 객체 모델 위의 코드 계층 구조를 그림으로 나타내면 아래와 같다. 이때 그림에 나타낸 박스 하나하나를 노드라 부르고 위아래 계층 구조에 부모 자식 관계, 좌우 계층 구조에 형제 관계가 맺어진다. + Node type) 각 노드의 성격에 따라 노드를 분류한 것을 노드 타입이라고 하는데 총 12가지가 있다. 주로 사용하는 것은 4가지이다. 요소 노드 : html 태그에서 만들어지며 dom 트리를 구성하는 블록이 되는 노드 텍스트 노드 : 오로지 텍스트로만 이루어진 노드 문서 노드 : dom의 진입점이 되는 document 노드 주석 노드 : 화면에 보.. 2022. 9. 5.