# querySelectorAll()

ljk4268

for문으로 반복되고 있는 div태그에 class로 lazy값을 넣어줬다. 그리고 Dom이 그려진 후인 onMounted에서 document.querySelectorAll('.lazy')로 해당 태그들을 가져오려고 했는데, 반환 값이 빈 배열로 나온다. ( 아래처럼 나왔던듯 ) DOM이 다 그려진 직후인데 div태그를 왜 가져오지 못 할까? 심지어 vscode상 스페이스로 띄어쓰기 1번만 써도 웹페이지가 자동 새로고침이 되면서 console.log()에 내가 원하는 반환값이 제대로 찍힌다. 뭔데..? 😵‍💫😵‍💫😵‍💫😵‍💫 ✅ 컴포넌트가 화면 그리는 동작 분석 내가 만든 공통컴포넌트는 props를 받아 화면을 그리고 있다. 내가 default값으로 [] 빈배열을 설정해놨는데, 이렇게 설정해두면 해당 컴포넌트는 화면을 총 2번 그리게 된다. 처음 빈배열(=[])일 때 한 번 그리고, props.projectList에 데이터가

tjdgus9773

난수 - 이미지 랜덤 본문 복습문제 style 변경 value 본문 get/query 사용 getElementsByTagName getElementsByClassName getElementsByClassName('','') 복수 가능 getElementById querySelector 같은게 여러개면 제일 위가 디폴트 querySelectorAll style id class 같이 있는 태그는 id 우선 적용 본문 마우스 이미지 출력 본문

myseventh

모든 이벤트 함수에는 this 값 존재 &ltselect&gt 태그의 &ltoption&gt은 value 값이 존재하면, 선택 시(onchange) this.value 값이 value 값으로 변경되지만, value 값이 존재하지 않으면 &ltoption&gt 사이에 입력한 값을 this.value 값으로 대체 &ltstyle&gt 태그로 css 속성 값 부여 &ltstyle&gt 태그로 부여한 속성은 setAttribute가 아닌 style로만 변경 가능 &ltstyle&gt 태그로 부여한 속성 중 단위가 있는 속성은 단위까지 속성 값으로 포함 단위가 있는 숫자를 parseInt 하면 단위가 제거된 채로 숫자로 형 변환 &ltstyle&gt 태그로 부여한 속성을 변경하기 위해서는 parseInt로 단위를 제거 후 이 값을 변경하고, 다시 단위를 문자열로 합하여 style로 속성 재부여 위에서 언급했듯이 &ltstyle&gt 태그로 부

sjkang930

📌 DOM(Document Object Model) 객체 > html의 모든 요소들은 객체이다 html file ❗️html 요소를 자바스크립트로 가져오는 함수 👉 document.getElementById > 태그의 id 속성값으로 가져오기 결과는 🌟객체 하나 👉 document.getElementByClassName > 태그의 class 속성값으로 가져오기 결과는 객체가 요소로 들어있는 🌟배열 👉 document.getElementByTagName > 태그의 tag 속성값으로 가져오기 결과는 class 속성값으로 가져오기 결과는 객체가 요소로 들어있는 🌟배열 ...등등 ❗️ css 선택자를 통해서 특정 요소를 가져오는 함수 👉 document.querySelector >- 결과가 객

1109_haeun

0606 > - DOM 객체란 무엇인가 document DOM 트리 DOM 객체로 HTML 문서의 요소 가져오기 id를 통해 요소에 접근하기 class를 통해 요소에 접근하기 querySelector()와 querySelectorAll() DOM에서 이벤트 처리하기 DOM요소에 직접 이벤트 처리기 연결 addEventListener() 사용하기 안녕하세요! 트윅스스터디 그 네 번째 과제에서는 DOM 객체와 이벤트 리스너를 배워보도록 하겠습니다. 저번 과제에서 "대체 DOM이 뭐야?" 하는 궁금증이 생겼었는데 이번에 공부하게 되어서 참 다행입니다.. 그럼 알아볼까요? 🧁1. DOM 객체 👉1.1. DOM (Document Object Model) 객체가 무엇인가요? DOM이란 문서 객체 모델입니다. 문서 객체 모델, 즉 DOM은 웹페이지(HTML

summerrrr

queryselectorAll메소드를 이용하여 html element들을 자바스크립트로 가져와서 css로 스타일링을 해주었는데 제일 처음 요소에만 적용이 되었다. 알고보니 queryselectorAll메소드를 사용하면 css선택자와 일치하는 모든 요소들을 가져와 NodeList형태로 반환하는데 이때 NodeList는 실제 배열은 아니지만 배열과 유사한 방식으로 작동한다. 각 노드에는 인덱스가 있어서 NodeList를 반복하여 각 노드에 접근을 할 수 있다. 각 노드는 자바 스크립트의 element객체와 같은 유형의 객체이다. > - length : NodeList에 포함된 노드 수를 반환합니다. item(index) : 지정된 인덱스의 노드를 반환합니다. forEach(callback) : NodeList의 모든 요소에 대해 지정된 함수를 실행합니다. entries() : NodeList의 각 요소에 대한 인덱스 및 값을 포함하는 새로운 Array Iterator 객

yeonew

The Document Object javascript는 HTML에 접근하고 읽을 수 있게 설정되어있다. 읽어올 뿐만 아니라* HTML을 변경*할 수도 있다. document가 시작점 document : body, head, title,, getElementById("id") : id 요소를 가져옴 innerText : HTML 요소를 변경 Searching For Elements 많은 element를 한번에 가지고 와야하는 경우 getElementByClassName() 사용(array) querySelector() : element를 css 방식으로 검색 ✨ 단 하나의 첫번 째 element를 return 해줌 -querySelectorAll() : selector 안의 조건에 부합하는 모든 element를 가져옴(array) Event `addEventListener(

byeongk

학원에서 공부한 내용을 다시 한 번 정리해봤습니다. 요소 가져오기 >1) getElementById : 아이디로 접근 2) getElementBy 1) 아이디로 접근 (getElementById) >아이디로 요소 접근하기 document.getElementById("아이디명"); >버튼 클릭 전 >버튼 클릭 후 >버튼을 클릭하면 id가 'area1'인 요소를 선택하여 배경색을 변경한 모습이다. # 색상 선택 후 변경 버튼을 클릭하면 색상 변경하기 >input 태그를 사용하여 입력받아서 색상 변

wlwl99

CRUD Create Append (DOM에는 HTML에 적용하는 메소드가 추가로 있다.) Read Update Delete CREATE : DOM을 JavaScript로 조작하여 HTML Element를 만드는 것 createElement() document.createElement(tagName) : HTML 요소를 만드는 document 객체의 메소드 이렇게 만든 엘리먼트는 Append를 이용해 다른 엘리먼트 안에 자식 요소로 넣어줘야 웹 페이지 상에서 확인할 수 있다. APPEND : 생성한 HTML 요소를 부모 노드에 자식 요소로 포함시키는 것 append() Element.append(Node) : HTML 요소를 특정 엘리먼트에 마지막 자식 요소로 넣는 메소드 >#### prepend() Element.prepend(Node) : HT

wangjh789

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

raccoon-ccoder

리액트에서 테스트 코드를 작성하다가 알게 된 방법으로 엄청 기초인데 몰랐던 것을 반성하며 잊지 않기 위해 글을 작성한다. querySelectorAll라는 Document 메소드는 NodeList를 반환하는데 Array타입이 아니라 filter, reduce와 같은 Array 타입의 메소드를 사용할 수 없다. 따라서 NodeList를 Array.from()를 사용해 Array로 변환하여 사용하면 된다. Array.from() 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕은 복사로 진짜 array 생성해준다.

jhyun223

학습 예제를 살펴보던 중, 정확한 사용의 차이를 파악하기 위해 찾아 정리하게 되었다. querySelector() 지정된 선택자와 일치하는 문서 내 첫 번째 element를 반환 일치하는 요소가 없으면 null 반환 selecotrs는 유효한 css 선택자여야 함 querySelectorAll() 지정된 선택자 그룹과 일치하는 문서 내 element 목록을 반환 (NodeList로 반환) 일치하는 것이 없는 경우에는 빈 NodeList 반환 확인! querySelector는 element 하나를 가져오지만, querySelectorAll은 NodeList로 가져오므로, 함수에서 실행 시, 반복문을 통해 배열을 실행시켜야 함 ex) for, for each ... > 참고자료 : MDN ※잘못된 정보는 댓글로 알려주시면 감사하겠습니다 :)

pjj2059

1. 학습한 내용 0616 / 배포(1) / DOM / 05.domNode.html ‘’‘ <!-- console 창에서 순서대로 다음과 같이 작성하기 요소 노드 만들기 var newP = document.createElement("p") 텍스트 노드 만들기 var newText = document.createTextNode("주문이 완료되었습니다.") 자식노드로 추가하기 newP.appendChild(newText) 자식노드로 추가하기 document.body.appendChild(newP) 속성 노드 만들기 var attr = document.createAttribute("class") attr.value = "accent" 속성 노드 연결하기 newP.setAttributeNode(attr) 또는 5, 6 단계 대신: 텍스트 노드를 만들어 웹 문서에 추가해 놓은 경우 setAttribute()함수 사용하면 더 간단. n

qwe8851

이번엔 부트스트랩을 사용해서 버튼 누르면 등장하는 서브메뉴를 만들어보겠습니다. 1. Bootstrap 설치 Bootstrap css 파일을 설치해놓으면 버튼, 탭, 메뉴 같은걸 복붙식으로 개발할 수 있습니다. 구글에 bootstrap검색해서 나오는 맨 처음 사이트에 들어가서 get started버튼 클릭 우선 우측 위에서 버전이 5.X 버전인지 확인한 후에 css파일은 태그 안에 js파일은 태그 끝나기 전에 붙여넣으면 설치 끝 2. Navbar 만들기 --- 부트스트랩을 설치했으면 그 사이트에서 원하는 웹 ui를 검색해서 복붙하면 개발 끝임 그럼 이제 버튼 누르면 등장하는 서브메뉴를 만들어 보겠습니다. 이런 U

sjmh0507

문제의 코드 상품버튼을 누르면 아래 장바구니에 들어가는 코드를 아래와 같이 짰다. 콘솔창에 document.querySelectorAll('.button-product')을 찍으면 버튼이 아주 잘 잡히는데, 이 buttonProduct로 이벤트 리스너가 실행이 안되는 문제가 있다. buttonProduct.addEventListener가 함수가 아니라는 콘솔창 경고가 뜬다. 해결방법 document.getElementById는 단일 DOM 객체를 가져오지만, document.querySelectorAll은 NodeCollection을 가져온다.(이름도 컬렉션...) 그렇기 때문에 querySelectorAll 에서는 addEventListener가

sjmh0507

여러 개의 요소에 접근할 때 querySelectorAll나 getElementsByClassName 등을 사용한다. 개념이 잘 안잡혀 있어서 습관적으로 querySelector, querySelectorAll을 썼는데, 이렇게 하다가 결국 문제가 생겼다. 오히려 좋아! 0. NodeList와 HTMLCollection이 뭐지?? 위 첫번째 사진은 querySelectorAll로 리스트를 잡은 거고, 두번째 사진은 getElementsByTagName으로 리스트를 잡은 거다. 내가 만들고 있는 메모장에 li 삭제

ssonnni

DOM (Document Object Model) > 텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다. 즉,자바스크립라는 프로그래밍 언어를 통해 HTML,XML 문서에 접근할 수 있게 해주고 내용을 변경할 수 있게 해주는 것이 DOM입니다. DOM을 알아야하는 이유 자바스크립트를 이용해 HTML요소에 접근하고 싶을 때 웹페이지에 보여지는 데이터를 변경하고 싶을 때 인터렉티브한 동적인 웹을 만들고 싶을 때 01. DOM사용하기 = HTML 객체로 생성하기 단건 조회 : getElement, querySelector **복수 조회 : getElements, querySelecto

astraea0119

1/4.학습내용 -queryselectorAll 활용문제:2000개 버튼 자동클릭+ 조건문 이용하여 지정범위 자동클릭 -함수(function)=서로 연관된 코드를 모아서 정리정돈(grouping)한 상자 파이썬언어 내장함수(built in function) 함수의 장점 ①코드글자수 감소 ▶②가독성상승▶③코드 취지파악 용이 ▶④유지보수 간편 활용문제: 부가세 계산 매개변수(parameter)와 인자(argument),반환(return=함수의 종료조건) 🗨"본질적으로 입/출력이 있는 것은 함수다" 2/4.학습내용 중 난관 또는 미제 총체적난관: 코드를 스스로 짜지 못함. 강사님 보고 따라하기 급급 작동원리는 이해하겠으나 스스로 어떤코드를 어떤형식으로 작성하는지

jangws

HTMLCollection vs NodeList HTML의 구조나 내용 또는 스타일 등을 동적으로 조작할 필요가 자주 있는데, 이를 위해서는 먼저 요소 노드를 취득해야 한다. 같은 class 어트리뷰트 값을 갖는 모든 요소 노드들을 취득하기 위한 방법에는 두 가지가 있는데, querySelectorAll과 getElementsByClassName이 바로 그것이다. 그런데 둘 다 같은 효과를 내는 것 같은데, 왜 두 개나 있는지 의문이 들었고 둘의 공통점과 차이점이 궁금해졌다. 특히, 습관적으로 Array.from()을 하여 유사배열객체를 배열로 만들어 왔는데 그 이유도 확실히 알아야겠다는 생각이 들었다. HTMLCollection, NodeList 두 객체의 공통점 둘 다 DOM API가 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체이다. 또한, 둘 다 유사 배열 객체이면서 이터러블이다. 따라서 둘 다 for ...of 문으로