# querySelector

40개의 포스트

[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개의 댓글

DOM 01. 웹페이지 시작하기

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

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

DOM

DOM(Document Object Model) : XML, HTML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스BOM(Browser Object Model) 의 하나로, 트리 구조로 되어있다.자바스크립트로 요소에 접근해서 요소를

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

[코딩애플 JS기초] Bootstrap, class 탈부착 위한 toggle함수, querySelector

Bootstrap을 통해 html, css작성 시간을 줄일 수 있다. 사용방법은 부트스트랩 시작하기 여기에서

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

오늘의 몰랏던 단어들 02

querySelector : Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 이때 일치하는 요소가 없으면 null을 반환합니다.getElementById(id) : Element:

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

[JavaScript] querySelector().textContent 활용해보기

h3태그의 클래스 이름 확인콘솔창으로 querySelector('.클래스 이름')를 이용해 해당 클래스 이름의 모든 정보 가져오기querySelector().textContent로 텍스트 가져고 새로운 값을 할당하여 내용 변경하기

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

JS> getElementById VS querySelector

자바스크립트에서 요소를 컨트롤하는 방법은 여러가지가 있지만, 어떤 요소를 특정해서 컨트롤할때는 태그의 id값을 사용하는 getElementById 와 querySelector를 대표적이라고 할 수 있다.위의 두 문법은 둘다 버튼 변수에 아이디가 btn인 요소를 할당해준

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

[FC] DOM의 이해 Day-9

Document Object Model (문서 객체 모델)실제 Body 안쪽 html 요소들을 script로 제어하는 기능DOM 제어는 상당히 중요하다. 원하는 곳을 직접 제어하기 위해서..JS를 연결하는 방법은 다양하지만 가장 순수한 JS 연결법은..모든 예시는 위

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

1. Javascript Drum

키보드 입력을 인식해서 그에 맞는 소리를 출력하는 드럼을 만들자키보드가 눌리는 이벤트(keydown)이 발생하면'playSound' 콜백함수가 실행된다.선택자를 이용해 html element를 가져온다.선택자에 해당하는 요소가 여러개 있으면 DOM tree 맨 위에 있

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

document.querySelector("")와 classList 추가 제거 사용하기

자바스크립트를 통해서 HTML의 요소에 접근하고 이를 수정할 수 있다. class를 추가하고 삭제하여 적용되는 CSS 속성도 변경할 수 있다.

2021년 12월 30일
·
0개의 댓글
post-thumbnail

[JS] 바닐라 자바스크립트 학습 - Elements, events

3.2 Searching For Elements _html 값을 js로 불러오는 방법! getElementsByClassName() : array를 반환 getElementsByTagName() : array를 반환 getElementById : 하나의 값 queryS

2021년 12월 15일
·
0개의 댓글

html 요소 검색-querySelector, classList 등

getElementById, getElementByClassname 말고,querySelector 는 HTML 요소를 CSS와 같은 방식으로 검색할 수 있다.querySelector를 사용한다면 'hello' 라는 클래스 내부의 <h1>태그를 가져올 수 있다는 것

2021년 12월 6일
·
0개의 댓글
post-thumbnail

JavaScript - 인스타그램 로그인 화면

인스타그램 클론코딩으로 실질적인것을 많이 접했다고 느낀다.DOM으로 HTML과 Javascript를 연결하여 동적인 효과를 부여 할 수 있었다.

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

CSS Selectors

CSS Selector

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

[CS] DOM Day-17

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

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