자바스크립트 부모,자식,형제 찾기

게시자: 대문 demun 카테고리: 퍼블리셔/javascript 2012.12.22 09:00

이전에는 아이디나 클래스로 찾는 방법을 알아봤는데요. 오늘은 부모, 자식, 형제를 찾는 방법을 알아보겠습니다.

아이디나 클래스로 찾는 가장 기본적인 방법을 모르시면 어려우니 이전 글을 먼저 보시고 오세요.

자바스크립트 요소찾는 방법 -> http://demun.tistory.com/2254


1. 자식노드 childNodes 찾기.

2. 부모노드 parentNode 찾기.

3. 형제노드 Sibling 찾기.


먼저 자식노드를 찾는 방법부터 보겠습니다.

이전글에서 본것처럼 html 요소는 같다고 생각하고 진행해보겠습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>요소찾기</title>
</head>
<body>
<div id="container">
	<p id="one" class="pClass">p id="one"</p>
	<p id="two" class="pClass">p id="two"</p>
	<p id="three" class="pClass">p id="three"</p>
</div>
</body>
</html>

1. 자식노드 childNodes 찾기.

순서는 이렇습니다. 자식을 찾을려면 자식을 포함하고 있는 부모를 먼저 찾아야 합니다.


// 자식을 포함하고 있는 부모를 찾아서 변수수에 담습니다.
var container = window.document.getElementById("container");

// container 안에 있는 자식을 childNodes 로 모두 찾아서 변수 child 에 담습니다.
var child = container.childNodes;

// 자식중에서 첫번째 자식을 찾아 변수에 담는 예제.
var firstChild = page.firstChild;

// 자식중에서 마지막 자식을 찾아 변수에 담는 예제.
var lastChild = page.lastChild;

2. 부모노드 찾기

여기서의 예제는 p 태그의 부모인 container 가 아이디가 잇기 때문에 그냥 elementById 로 찾으면 되지만 모른다고 가정하고 진행합니다.

예를들어 html 순서상 자식인 p 태그를 찾고 부모를 찾는 방법을 알아보겠습니다.


// 자식태그인 p태그를 찾고 변수에 담습니다.
var pTag = window.document.getElementsByTagName("p");

// pTag의 부모노드에 스타일을 주려면 parentNode 를 사용합니다.
pTag.parentNode.style.border = "1px solid #ccc";


// 그냥 단순하게 부모노드만 찾는다면? 
// 부모를 찾아서 변수 parent에 담는예제.
var parent = pTag.parentNode;

// 여기서 부모태그에 스타일을 지정하면 아래처럼 하면 됩니다.
parent.style.border = "1px solid #ccc";


형제 노드 찾기

형제 노드를 찾으려면 우선 기준이 되는 노드를 찾아야 합니다.

여기서 예제로 두번째에 위치하고 있는 p id"two" 를 기준으로 사용해보겠습니다.

// 아이디가 two를 찾아 변수 two에 넣습니다.
var two = window.document.getElementById("two");

// 이전 형제를 찾아서 one 변수에 담기만 합니다.
var one = two.previousSibling.previousSibling;

// 다음 형제 찾아서 three 변수에 담기만 합니다.
var three = two.nextSibling.nextSibling;

// 예를들어 형제를 찾아서 변수에 담는 과정을 생략하고 바로 적용하려면 
// 아래처럼 프로퍼티인 previousSibling, nextSibling 를 사용하면 됩니다.
two.previousSibling.previousSibling.style.border = "1px solid #0066ff";


여기서 설명이 좀 필요합니다.

왜 형제 프로퍼티인 previousSibling 와 nextSibling 을 두번씩 사용했느냐???

개행문자때문입니다. 

노드에는 눈에 보이지 않는 개행문자(\n) 텍스트노드가 있습니다. 

이것도 익스플로러 9이전버젼과는 또 다릅니다.


테스트로 여기에 소스를 올려놧으니 왼쪽 하단에 RUN 을 클릭해서 보더가 파랑색으로 보이면 9 이상 웹표준 브라우져라고 보시면 됩니다.

신고

댓글

  1. 2012.12.23 20:48 신고 밍구  댓글주소  수정/삭제  댓글쓰기

    포스팅 잘 봤습니다~~~
    좋은 정보로 많은 도움이 되었네요~~~
    저도 님과 같이 블로그 갖고 싶네요!!
    저 초대장 좀 주시면 안될까요?

    infomg@hanmail.net

    부탁할께요~~~

  2. 2015.09.02 23:07 신고 감사  댓글주소  수정/삭제  댓글쓰기

    덕분에 해결 5시간만....감사합니다.