728x90

프론트엔드 4

[자바스크립트] Cannot read properties of null (getElementById 와 querySelector차이점)

getElementById와 querySelector는 엘리먼트를 지정한다는 측면에서 차이가 없는 것인데 따로 만들어 사용하는 이유는 뭘까? getElementById VS querySelector 차이 Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.(MDN) Document.getElementById() 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환합니다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용합니다.(MDN) //1번 //2번 var username1 = document.g..

프론트엔드 2023.01.26

[자바스크립트] querySelector 사용 방법

CSS 선택자를 기반으로 element를 찾는 javascript의 querySelector()와 querySelectorAll()을 사용하는 방법 JavaScript의 querySelector()및 querySelectorAll() 메소드 소개 querySelector()는 Element 인터페이스의 메소드 입니다. querySelector() 메소드는 CSS 선택자에 매치되는 하나 이상의 element 중 첫 번째 항목을 반환해줍니다. 다음 코드는 querySelector() 메소드의 문법을 보여줍니다. let element = parentNode.querySelector(selector); 위 코드의 selector는 CSS 선택자 또는 CSS 선택자 그룹으로 parentNode의 하위 elemen..

프론트엔드 2023.01.21

[자바스크립트] request / response / 콜백 / Fetch / document 개념

관련 용어 request : 웹브라우저가 서버에 요청 response : 서버가 보내주는 응답 콜백 : 어떤 조건이 만족 되었을 때 실행되는 함수 fetch 서버로 requset 를 보내고 response 를 받는 함수 promise의 객체 then 메소드 response가 왔을 때 실행할 콜백을 등록 등록된 콜백들은 then 메소드로 등록한 순서대로 실행 이전 콜백의 리턴값을 이후 콜백이 넘겨 받아서 사용할 수 있음 response의 파라미터에는 '객체'가 넘어오기 때문에 response 객체의 text를 호출해야만 실제 내용을 볼 수 있음 then의 파라미터는 함수가 들어가야함 fetch('www.naver.com') .then((response) => response.text()) // fetcth..

프론트엔드 2023.01.20
728x90