부모요소.querySelector('자식 태그||클래스||아이디')
localStorage.setItem("history", JSON.stringify(removedHistory));
const initialHistory = JSON.parse(localStorage.getItem("history"));
innerHTML
의 경우 this.$target.innerHTML = ` <div class="form-control"> <label for="text">Text</label>
<input type="text" id="text" placeholder="Enter text..." />
</div>
<div class="form-control">
<label for="amount"
>Amount <br />
(negative - expense, positive - income)</label
>
<input type="number" id="amount" placeholder="Enter amount..." />
</div>
<button class="btn">Add transaction</button>`;
다음과 같이 코딩하고, 이벤트를 this.$target
에 걸어 e.target.firstChild
로 조회하면
빈 문자열 text
노드가 노출된다.
innerHTML
로 깡코딩하면 공백문자도 자식이되어버림. innerHTML
로 코딩하는 경우 자식을
const inputs = target.querySelectorAll("input");
const textValue = inputs[0].value;
const amountValue = inputs[1].value;
다음과 같이 태그명, 클래스명, 아이디명을 명시해서 받아오면된다.
appendChild
는 firstChild
, lastChild
등이 제대로 동작한다.