# querySelectorAll()

25개의 포스트
post-thumbnail

queryselectorAll의 배신

queryselectorAll메소드를 이용하여 html element들을 자바스크립트로 가져와서 css로 스타일링을 해주었는데 제일 처음 요소에만 적용이 되었다.알고보니 queryselectorAll메소드를 사용하면 css선택자와 일치하는 모든 요소들을 가져와 Node

2023년 3월 8일
·
0개의 댓글
·
post-thumbnail

바닐라 JS DAY-4

javascript는 HTML에 접근하고 읽을 수 있게 설정되어있다.읽어올 뿐만 아니라 HTML을 변경할 수도 있다.document가 시작점 document : body, head, title,,getElementById("id") : id 요소를 가져옴innerTex

2023년 2월 23일
·
0개의 댓글
·

element 접근 방법

✍️ DOM 접근의 기본에 대해 정리해 보았다. 항상 쓰던 것만 썼어서, 정리하면서 처음 보는 것도 있었다. (살짝 반성한다.🙇) 기초를 차근차근 다진다는 마음으로 정리해 보았다.

2023년 2월 19일
·
0개의 댓글
·

JavaScript :: 요소 가져오기

학원에서 공부한 내용을 다시 한 번 정리해봤습니다. 요소 가져오기

2022년 10월 9일
·
0개의 댓글
·

CRUD

CreateAppend (DOM에는 HTML에 적용하는 메소드가 추가로 있다.)ReadUpdateDelete: DOM을 JavaScript로 조작하여 HTML Element를 만드는 것document 객체의 createElement(tagName) 메소드를 이용하여 H

2022년 9월 13일
·
0개의 댓글
·
post-thumbnail

정적 노드 리스트와 동적 노드 리스트

새로운 요소 노드를 추가했지만 listItem에는 보이지 않는다.그 이유는 querySelecorAll()메서드는 DOM의 스냅샷에서 가져오기 때문이다. 이러한 이유로 배열을 업데이트하지 않는다.하지만 getElementByTagName()으로 가져온 배열은 최근에 추

2022년 8월 29일
·
0개의 댓글
·

querySelectorAll로 filter 메서드 사용하기

querySelectorAll의 반환 값인 NodeList를 Array로 변환하는 방법

2022년 7월 24일
·
0개의 댓글
·

[JavaScript] querySelector 과 querySelectorAll 의 차이

학습 예제를 살펴보던 중, 정확한 사용의 차이를 파악하기 위해 찾아 정리하게 되었다.지정된 선택자와 일치하는 문서 내 첫 번째 element를 반환일치하는 요소가 없으면 null 반환selecotrs는 유효한 css 선택자여야 함지정된 선택자 그룹과 일치하는 문서 내

2022년 6월 20일
·
0개의 댓글
·
post-thumbnail

[6/16 일반] JavaScript 기초/ 실습 - (실습) 유용한 JS 기능 구현하기 2

0616 / 배포(1) / DOM / 05.domNode.html‘’‘→ 결과(아래 그림 1)ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ0616 / 배포(1) / DOM / 06.register.html‘’‘ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

2022년 6월 16일
·
0개의 댓글
·

querySelector & querySelectorAll

이번엔 부트스트랩을 사용해서 버튼 누르면 등장하는 서브메뉴를 만들어볼거임Bootstrap css 파일을 설치해놓으면 버튼, 탭, 메뉴 같은걸 복붙식으로 개발할 수 있다.구글에 bootstrap검색해서 나오는 맨 처음 사이트에 들어가서 get started버튼 클릭우선

2022년 6월 4일
·
0개의 댓글
·
post-thumbnail

[JavaScript] 왜 querySelectorAll 에서는 addEventListener가 안먹힐까?

querySelectorAll 사용 시 주의할 점

2022년 6월 2일
·
0개의 댓글
·
post-thumbnail

[JavaScript] NodeList와 HTMLCollection 차이

querySelectorAll과 getElementsByTagname으로 요소를 잡을 때 차이점

2022년 5월 29일
·
0개의 댓글
·

DOM 01. 웹페이지 시작하기

텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DO

2022년 5월 12일
·
0개의 댓글
·
post-thumbnail

Day.5)웹기초-JavaScript 3/3

총체적난관: 코드를 스스로 짜지 못함. 강사님 보고 따라하기 급급작동원리는 이해하겠으나 스스로 어떤코드를 어떤형식으로 작성하는지 아직모름.난관1:함수적용하니 토글안됨미제: X난관1: 강사님코드와 compare하여 오탈자 확인코드의 작동원리는 설명듣고 이해하겠는데이 코

2022년 3월 25일
·
0개의 댓글
·
post-thumbnail

HTMLCollection vs NodeList 둘의 차이를 알고 있나요?

HTML의 구조나 내용 또는 스타일 등을 동적으로 조작할 필요가 자주 있는데, 이를 위해서는 먼저 요소 노드를 취득해야 한다.같은 class 어트리뷰트 값을 갖는 모든 요소 노드들을 취득하기 위한 방법에는 두 가지가 있는데, querySelectorAll과 getEle

2022년 2월 24일
·
0개의 댓글
·
post-thumbnail

3. CSS Variables

Spacing, Blur, Base Color 각 label이 변화할 때, 사진이 그 알맞게 변화해야 한다.Spacing: 그림의 padding값Blur: 그림이 흐린정도 (filter: blur(3px))Base Color: 그림의 background-color:ro

2022년 1월 7일
·
0개의 댓글
·
post-thumbnail

[CS] DOM Day-17

DOM이란? Document Object Model의 약자입니다. 프로그래머 입장에서 바라 본 HTML입니다. DOM을 이해하고 조작할 수 있다면 HTML을 단순화 해 웹앱으로 업그레이드 할 수 있습니다. HTML에 JavaScript 적용하기 HTML에 JavaSc

2021년 10월 26일
·
0개의 댓글
·
post-thumbnail

선택자

위의DOMContentLoaded 이벤트는 웹 브라우저가 문서 객체를 모두 읽고 나서 실행하는 이벤트이다. 위와같이 코드를 구성하면다 읽고난 상태가 되었을때 , 콜백 함수를 호출한다. 쉽게말해 컴퓨터가 위에서부터 순서대로 읽어 내려가는게 아닌 우선 다읽어들이고 난 뒤에

2021년 9월 23일
·
0개의 댓글
·
post-thumbnail

HTMLCollection의 함정

최근 작업에서 클래스를 기준으로 돔을 조작하는 스크립트를 작성할 일이 있었습니다. 그런데, 이 작업 도중 도무지 이해가 가지 않는 일이 생겨 한참 삽질을 했습니다. 그 삽질의 기억을 기록합니다.

2021년 9월 7일
·
0개의 댓글
·