[JavaScript] 부모, 자식, 형제와 요소 찾기

보통 DOM을 조작할 때는 node를 탐색하기 보다는 element를 탐색하고 조작한다. element를 탐색하는 방법에는 다음과 같이 세 가지 방법이 있다.

• 부모(parent) 노드
• 자식(child) 노드
• 형제(sibling) 노드

1. element 탐색

node에는 text, element, 주석 등 여러가지 타입이 있는데 element는 여러 node 타입 중 한 종류이다. element는 <p>, <div>, <a>와 같은 태그를 사용해서 작성된 노드이다.

1-1. 부모(parent) 요소 탐색

• parentElement : 부모 요소를 리턴

1-2. 자식(child) 요소 탐색

• children : 자식 요소 목록을 HTML Collection 형태로 리턴
• firstElementChild : 자식 요소 중, 첫번째 자식 요소를 리턴
• lastElementChild : 자식 요소 중, 마지막 자식 요소를 리턴

1-3. 형제(sibling) 요소 탐색

• previousElementSibling : 같은 레벨의 요소 중, 이전 요소를 리턴
• nextElementSibling : 같은 레벨의 요소중, 다음 요소를 리턴

---

부모 요소 탐색해보기

- HTML

<div id="peach"> Hello World!
    <div id= "baby1">Hello 1</div>
    <div id= "baby2">Hello 2</div>
    <div id= "baby3">Hello 3</div>
</div>

- 자바스크립트

let find = document.getElementById("baby1");
    
console.log(find.parentElement);

/*
<div id="peach"> Hello World!
    <div id="baby1">Hello 1</div>
    <div id="baby2">Hello 2</div>
    <div id="baby3">Hello 3</div>
</div>
*/

부모 요소 조작해보기

- HTML

<div id="A1">
    <div id="A2">Hello 1</div>
    <div id="A3">Hello 2
      <div id="A4">Mini Hello</div>
    </div>
    <div id="A5">Hello 3</div>
</div>

- CSS

div {
  border: 1px solid black;
  padding: 5px 10px;
  margin: 5px;
}

.parent { border: 5px solid orange; }

- 자바스크립트

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

A2.parentElement.className = "parent";

=> 자바스크립트를 이용해서 A2의 부모 요소에 className 추가

자식 요소 탐색해보기

- HTML

<div id="peach">
    <div>Hello 1</div>
    <div>Hello 2</div>
    <div>Hello 3</div>
</div>

- 자바스크립트

let find = document.getElementById("peach");
    
console.log(find.children); // HTMLCollection(3) {"0": {},"1": {},"2": {}}
console.log(find.firstElementChild); // <div>Hello 1</div>
console.log(find.lastElementChild); // <div>Hello 3</div>

자식 요소 조작해보기

- HTML

<div id="A1">
    <div id="A2">Hello 1</div>
    <div id="A3">Hello 2
      <div id="A4">Mini Hello</div>
    </div>
    <div id="A5">Hello 3</div>
</div>

- CSS

div {
  border: 1px solid black;
  padding: 5px 10px;
  margin: 5px;
}

#A1 { border: 5px solid black; }

.child { border: 5px solid orange; }

- 자바스크립트

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

A1.firstElementChild.className = "child";
A1.lastElementChild.className = "child";

=> 자바스크립트를 이용해서 A1의 첫 번째 자식과 마지막 자식에 className 추가

형제 요소 탐색해보기

- HTML

<div id="peach"> Hello World!
    <div id= "baby1">Hello 1</div>
    <div id= "baby2">Hello 2</div>
    <div id= "baby3">Hello 3</div>
</div>

- 자바스크립트

let find = document.getElementById("baby1");
let find2 = document.getElementById("baby2");
    
console.log(find.previousElementSibling); // null
console.log(find2.previousElementSibling); // <div id="baby1">Hello 1</div>
console.log(find2.nextElementSibling); // <div id="baby3">Hello 3</div>

=> 이전 형제가 없는 첫 번째 자식 요소에 preveiousElementSibling()을 대입하니 null값 반환

형제 요소 조작해보기

- HTML

<div id="A1">
    <div id="A2">Hello 1</div>
    <div id="A3">Hello 2
      <div id="A4">Mini Hello</div>
    </div>
    <div id="A5">Hello 3</div>
</div>

- CSS

div {
  border: 1px solid black;
  padding: 5px 10px;
  margin: 5px;
}

.sibling { border: 5px solid orange; }

- 자바스크립트

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

A3.previousElementSibling.className = "sibling";
A3.nextElementSibling.className = "sibling";

=> 자바스크립트를 이용해서 두 번째 자식(중간 자식)의 이전 형제와 다음 형제에 className 추가

 

Manipulating Elements Practice

/*

  < Manipulating Elements basic 1 >
  
  화면에 "I am a paragraph"라는 텍스트가 나타날 수 있도록
  
  <p> 태그에 텍스트를 추가해주세요!
  
  🚨 HTML, CSS는 건드리지 않고 JS만 수정해주세요.

*/

const pElement = document.querySelector("p");

A : pElement.textContent = "I am a paragraph";

/*

  < Manipulating Elements basic 2 >
  
  "paragraph1"을 아래 "paragraph2"와 동일한 단어가 되도록
  
  폰트 사이즈는 100px, 색상은 #55ff00로 수정해주세요!
  
  🚨 HTML, CSS는 건드리지 않고 JS만 수정해주세요.

*/

const itemElement = document.querySelector(".item");

A :

itemElement.style.fontSize = '100px';
itemElement.style.color = '#55ff00';

/*

  < Manipulating Elements basic 3 >
  
  오른쪽 요소가 왼쪽 요소와 같이 "yellow" 색상을 가질 수 있도록
  
  배경색을 수정해주세요!
  
  🚨 HTML, CSS는 건드리지 않고 JS만 수정해주세요.

*/

const rightElement = document.querySelector(".right");

A : rightElement.style.backgroundColor = "Yellow";

/*

  < Traffic Lights >
  
  왼쪽 신호등을 오른쪽 신호등과 같이
  
  Stop, Pause, Go라는 텍스트를 추가해주시고
  
  red, orange, green 클래스를 추가하여
  
  빨간색, 주황색, 초록색 배경색을 가질 수 있도록 수정해주세요!
  
  🚨 HTML, CSS는 건드리지 않고 JS만 수정해주세요.
  
*/

const wrapperElement = document.querySelector(".lightWrapper");
const redLightElement = wrapperElement.children[0];
const orangeLightElement = wrapperElement.children[1];
const greenLightElement = wrapperElement.children[2];

A :

redLightElement.textContent = "Stop";
redLightElement.style.backgroundColor = "red";

orangeLightElement.textContent = "Pause";
orangeLightElement.style.backgroundColor = "orange";

greenLightElement.textContent = "Go";
greenLightElement.style.backgroundColor = "green";