Element의 기준으로 다른 요소를 찾기

 특정 다수의 input의 값을 className을 통해서 불러 오면서 그에 맞는 key값을 html에서 불러 올때 사용가능한 코드 들이다.

 

 1. element.parentElement : 해당 요소의 부모 요소를 불러 온다.

value.parentElement;
//value의 부모 요소를 불러온다

 

 2. element.previousElementSibling : 해당 요소의 이전 요소를 불러 온다.

value.previousElementSibling;
//value의 이전 요소를 불러온다

 

 3. element.nextSibling : 해당 요소의 다음 요소를 불러 온다.

element.nextSibling
//element의 다음 요소를 가져온다

 

 # previousElementSibling과 nextSibling에서 주의할 점이 있었는데 #text요소가 나온다는 점이다.

아래 예시를 통해 설명하고자 한다.

<input type="checkbox" id="protein" value="meat" />
<label for="protein1">고기</label>

document.getElementById("protein").nextSibling;
//#text

document.getElementById("protein").nextSibling.nextSibling;
//<label for="protein1">고기</label>

 위의 예시 코드처럼 nextSibling을 한다고 바로 element가 출력 되지 않는다. 두 요소 사이 띄워쓰기(공백)이나 줄바꿈은 #text node이다. 그래서 함수를 통해서 따로 설정하거나, 두번씩 넣어서 요소를 찾으면 된다.