728x90
안녕하세요.
한 번은. 개발을 하다가, 동일 클래스를 가지는 요소들에 동일한 값을 Javascript를 통해서 넣어줘야 하는 상황이 있었습니다.
저는 단순히, document.querySelector('.클래스 이름');을 부여한 변수에 innerText를 사용해서 Javascript로 구한 값을 정성스럽게 넣어주었습니다. 그런데, 값은 가장 상위의 클래스에만 반영되고, 그 밑으로 동일한 클래스를 가지는 요소들에는 Javascript값이 들어가지 않았습니다.
원인은, document.querySelector입니다. 이 api는 단순 코드 가장 위에서부터 처음 매칭되는 클래스 요소만을 가져옵니다. 그 밑에 동일한 클래스 이름을 가지는 html 요소는 고려하지 않는 api입니다.
동일한 클래스 이름을 가지는 html요소들을 모두 불러오려면, document.querySelectorAll('.클래스 이름'); apI를 사용해야 합니다. 리스트 구조로 html 요소를 가져오게 됩니다.
이를 활용해서, 각 요소별로 동작을 부여할 수 있습니다.
저는 다음과 같이 코드를 작성해서 자바스크립트로 구한 소중한 값을 동일한 클래스를 가지는 html 요소에 각각 넣어주었습니다.
html
<body>
<p>안녕하세요 저는 경력 <span class="period"></span>차인 개발자입니다.</p>
<p><span class="period"></span>M</p>
</body>javascript
function init() {
const currentJobPeriod = document.querySelectorAll('.period');
currentJobPeriod.forEach((aItem) => {
aItem.innerText = diffMonth + 1;
});
}
html요소를 리스트로 가져와서 이를 반복문을 돌려서 각 html에 값을 넣어 줄 수 있었습니다.
참고 : developer.mozilla.org/ko/docs/Web/API/Document/querySelectorAll
728x90
'자바스크립트' 카테고리의 다른 글
| [Javascript] (2)정규식 초 간단 필수 문법 정리- 정규식 메서드 (0) | 2021.04.26 |
|---|---|
| Javascript 소수점 반올림 다루는 api (0) | 2021.04.19 |
| [Javascript] Web 이벤트 전파 막는 방법과 프론트 개발자가 반드시 알아야 하는 개념. (0) | 2021.03.03 |
| [Javascript] 배열에 특정 원소가 있는지 찾는 방법 (0) | 2021.02.09 |
| [Javascript] Web API DOM 클래스 다루기 (0) | 2021.02.05 |
댓글