Tag: e.target

target으로 부모 요소, 자식 요소 접근하기(자바스크립트,target)

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)를 콘솔에 출력하면 다양한 하위 속성을 확인할 수 있으므로 원하는 속성을 찾거나 에러를 해결할 때 유용하게 사용할 수 있습니다.