event와 target으로 부모 요소와 자식 요소에 접근하는 방법
자바스크립트는 보통 이벤트와 target을 통해 요소에 접근합니다.
그리고 <div>와 같은 요소를 중첩해서 사용하다 보면 이벤트 발생 시 부모 요소 또는 자식 요소에 접근이 필요한 경우가 있습니다.
예를 들면 다음과 같이 id=2인 div 요소의 이벤트가 발생했을 때 부모 div 요소 id=1에 접근하고 싶은 경우가 있습니다.
const check = (event) => {
console.log(event.target.id);
}
<body>
<div id=1>
<div id=2 onClick=(check(event))>click
<div id=3></div>
<div id=4></div>
</div>
</div>
</body>
그렇다면 어떻게 접근을 해야 할까요?
1. 이벤트를 통해 부모 요소 속성 접근하기
현재 이벤트가 발생한 요소를 감싸고 있는 부모 요소에 접근하기 위해서는 target과 parentElement를 사용하여 접근할 수 있습니다.
부모 요소의 id 속성에 접근하는 코드는 다음과 같습니다.
const check = (event) => {
console.log(event.target.parentElement.id); // 1
}
<body>
<div id=1>
<div id=2 onClick=(check(event))>click
<div id=3></div>
<div id=4></div>
</div>
</div>
</body>
실행해보면 콘솔에 1을 프린트합니다.
만약 id가 아닌 다른 속성에 접근하고 싶은 경우에는 id 대신 해당 속성명을 그대로 사용하면 됩니다.
구조를 확인하고 싶은 경우에는 console.log(event.target.parentElement)을 입력하여 확인할 수 있습니다.
console.log(event.target.parentElement)결과
현재 요소를 기점으로 접근을 진행하므로 target을 사용하며, 이벤트가 기점이 되는 경우 currentTarget를 사용합니다.
관련 포스트 : target, currentTarget 차이가 뭘까?
2. 이벤트를 통해 자식 요소 속성 접근하기
위 코드에서 보면 <div id=2>의 자식 요소는 <div id=3>과 <div id=4>입니다.
자식 요소는 target과 children을 통해 접근하는데요.
부모 요소는 하나밖에 없지만 자식 요소는 여럿 존재할 수 있습니다.
따라서 자식 요소는 인덱스를 통해 접근해야 하며, 리액트 코드를 통해 자식 요소의 구조를 살펴보겠습니다.
const accessChildren = () => {
const check = (e) => {
console.log(e.target.children)
}
return (
<div id={1}>
<div id={2} onClick={check}>click
<div id={3}>I'm a first child</div>
<div id={4}></div>
</div>
</div>
)
}
export default accessChildren;
콘솔에 찍히는 children의 구조는 다음과 같이 두 개의 object를 갖습니다.
따라서 첫 번째 자식 요소의 id에 접근하기 위해서는 다음과 같이 사용하면 됩니다.
const check = (e) => {
console.log(typeof(e.target.children[0].id)) // 3
}
그렇다면 첫 번째 자식 요소의 텍스트인 I’m a first child는 어떻게 접근할까요?
간단하게 위 children 구조를 열어서 살펴보면 답이 나옵니다.
textContent를 사용해서 접근할 수 있습니다. (innerHTML은 XSS에 취약)
const check = (e) => {
console.log(e.target.children[0].textContent) //I'm a first child
}
특정 요소가 속한 속성 전체(예를 들면 e.target)를 콘솔에 출력하면 다양한 하위 속성을 확인할 수 있으므로 원하는 속성을 찾거나 에러를 해결할 때 유용하게 사용할 수 있습니다.