Javascript 특정 부모 요소 찾기 - Javascript teugjeong bumo yoso chajgi

Question

제이쿼리(jQuery)를 사용하여 부모요소를 선택하거나 찾는 방법을 알아봅니e다. 어떻게 해야할까요? 부모 요소에 접근하는 다양한 방법에 대하여 알아보고자 합니다.

목차 Show

주어진 요소에 접근하여 부모와 자식 요소 찾기

# 제이쿼리를 사용하여 부모요소 선택, 찾는 방법
먼저 부모 요소를 선택하는 방법은 제이쿼리에도 몇 가지가 있습니다. 그 중에서 가장 자주 사용되는 방법으로 아래의 세가지 메소드가 대표적입니다.

parent()
parents()
closest()

이와같이 위 메소드를 사용하면 간단하게 부모요소를 선택할 수 있습니다. 그럼 어떻게 사용하고 각각의 메소드의 차이점은 무엇인지 알아봅니다.

모두 부모형제를 찾기 위한 방법이나 그 차이점이 존재합니다. 먼저 parent()의 경우부터 알아봅니다.

! parent() 메소드 알아보기먼저 parent()는 가장 많이 사용되는 아주 간단한 방법입니다. parent()는 해당 요소의 바로 위에 존재하는 하나의 부모 요소를 반환합니다. 위 예제에서는 실행할 경우 p태그를 반환할 것입니다. parent()는 인접한 하나의 요소를 반환하는 것이 특징입니다.

! parent() 예제소스 보기그렇다면 예제를 통해 자세히 알아볼까요? 아래 예제는 현재 태그 요소의 바로 위 부모 요소를 가져오는 예제입니다.
@ parent.html

<div>
<p>
<span>How to find parent elements?</span>
</p>
</div>

위 html은 예제에 사용된 html입니다. 아래는 스크립트 코드입니다.

@parent.js

var tagName = $('span').parent().prop('tagName');
console.log(tagName);

// P를 출력함

위 코드를 실행하면 span 태그에 사용된 parent() 메소드로 바로 위의 부모 요소인 p 태그를 가져와 출력합니다.

! parents() 메소드 알아보기
만약 하나가 아닌 모든 부모 요소를 반환할 필요가 있다면 parents() 메소드를 사용합니다. 모든 요소를 반환한다는 점을 빼고는 parent()와 동일합니다. 아래 예제를 봐주세요.

@parents.js

var parents = $('span').parents();

// parents 변수는 p와 div를 모두 가짐

이번에는 바로 위의 부모 요소인 p 뿐만 아니라 그 상위 부모인 div 역시 가지고 있습니다. 즉 모든 부모 요소를 가져와 함께 반환하는 것이 parent()와의 차이입니다.

! closest() 메소드 알아보기
이번에 알아볼 closest() 메소드 역시 가장 많이 사용되는 메소드 중 하나입니다. closest()는 모든 부모 요소를 대상으로하여 원하는 요소만 선택자로 가져올 수 있습니다. 예를들어 아래처럼 span 태그의 부모 요소중 div 태그를 가져올 수 있습니다.

@ closest.js

var tagName = $('span').closest('div').prop('tagName');

// div를 출력

이처럼 부모 요소들 중에서 원하는 요소만 선택하여 가져올 수 있습니다.

# 마치면서
여기까지 제이쿼리에서 부모요소에 접근하는 다양한 방법을 알아보았습니다. 이처럼 많은 메소드를이 존재하며 부모 요소 중에서도 원하는 요소만 선택.. 접근하는 것 역시 가능합니다. 매우 중요하며 자주 사용되므로 꼭 알아둘 필요가 있습니다.

주어진 요소에 접근하여 부모와 자식 요소 찾기

문제

특정 document 요소에 접근하여 그 요소의 부모와 자식 요소를 찾고 싶다.

해결

주어진 요소에 아이디를 부여하고 document.getElementById 메서드를 사용한다.

<div id="demodiv">
...

var demodiv = document.getElementById("demodiv");

부모는 parentNode 속성을 통해 접근한다.

var parent = demodiv.parentNode;

자식은 childeNodes 속성을 통해 접근한다.

var children = demodiv.childNodes;

설명

요소가 포함하고 있는 자식 요소를 찾고 싶을 때는 childNodes 속성을 통해 자식 노드 컬렉션을 탐색할 수 있다.

if (demodiv.hasChildNodes()){
    var children = demodive.childNodes;
    for(var i=0; i<children.length; i++){
        outputString += "자식노드: " + children[i].nodeName + "<br />";
    }
}

각 노드의 요소 종류는 nodeName 속성을 통해 확인할 수 있다.

var type = parent.nodeName;     //BODY

그런데 간혹 예상하지 못한 것도 자식노드로 나타난다. 예를 들어 요소 앞뒤에 있는 공백도 '#text'라는 nodeName을 가진 자식 노드이다.

<div id="demodiv" class="demo">
    <p>텍스트</p>
    <p>다시 텍스트</p>
</div>

위 코드에서 demodiv 요소에는 두개가 아닌 다섯 개의 자식 노드가 있다.

자식 노드 : #text
자식 노드 : P
자식 노드 : #text
자식 노드 : P
자식 노드 : #text

그러나 IE8에서는 두 개의 문단 요소만 자식 요소로 나타난다. 그래서 어떤 노드에 정확하게 접근하려면 nodeName을 통해 확인하는 과정이 필요하다.

순수 자바스크립트로 상위요소 찾는 코드입니다.

jquery로 하면 쉽게할 수 있지만 그렇지 못한 환경에서는

이러한 코드가 필요할 수 있습니다.

<html>
<head>

</head>

<body>

<div class="parent_node">
    <div id="my_elm">test</div>
</div>



<script>
function collectionHas(a, b) { //helper function (see below)
    for(var i = 0, len = a.length; i < len; i ++) {
        if(a[i] == b) return true;
    }
    return false;
}

function findParentBySelector(elm, selector) {
    var all = document.querySelectorAll(selector);
    var cur = elm.parentNode;
    while(cur && !collectionHas(all, cur)) { //keep going up until you find a match
        cur = cur.parentNode; //go up
    }
    return cur; //will return null if not found
}

var my_elm = document.getElementById("my_elm"); //
var selector = ".parent_node";
var parent = findParentBySelector(my_elm, selector);

console.log(parent);
</script>
</body>



</html>

let element = document.elementById("mySpan");

element.parentNode; // 바로 위 부모(요소,주석,줄바꿈 포함)
element.parentElement; // 바로 위 부모 요소
element.closest(); // 조상 요소 중 제일 가까운 요소 (Id,Class,속성값 등을 이용)

element.childNodes; // 바로 아래 자식(요소,주석,줄바꿈 포함) 배열
element.children; // 바로 아래 자식 요소 배열
element.querySelectorAll(); // 자손 요소 전체 배열 (Id,Class,속성값 등을 이용)

element.nextSibling; // 다음 형제(요소,주석,줄바꿈 포함)
element.nextElemnetSibling; // 다음 형제 요소

element.previousSibling; // 이전 형제(요소,주석,줄바꿈 포함)
element.previousElementSibling; // 이전 형제 요소

const getSiblings = elm => elm && elm.parentNode && [...elm.parentNode.children].filter(node => node != elm);
getSiblings(element);
// 모든 형제(요소,주석,줄바꿈 포함) 배열

자바스크립트 부모요소 자바스크립트 부모 선택자