[javascript] DOM 탐색하기

🧐DOM 탐색하기

<div id="body-container" class="container mt-5">
  <ul class="list-group mt-5 mb-5">
    <li class="list-group-item 1">An item</li>
    <li class="list-group-item 2">A second item</li>
    <li class="list-group-item 3">A third item</li>
    <li class="list-group-item 4">A fourth item</li>
    <li class="list-group-item 5">And a fifth one</li>
  </ul>
</div>

let val;
const list = document.querySelector('ul.list-group');
const listItem = document.querySelector('li.list-group-item:first-child');

val = listItem;
val = list;
console.log(val);

listItem( li 첫번째 요소가 리턴 )

list( ul 전체가 리턴 )

🔹 childNodes

child nodes 반환

val = list.childNodes;
console.log(val);

🔁 NodeList를 반환함

🙌잠깐, 이건 배열일까❓
👉 ✅Iterable( 반복 가능한 ) collection, 유사 배열 객체🔥

// 이게 배열인지 확인하기
console.log(list.childNodes.filter); // undefined 라고 출력됨

☝ 배열이 아니라는 것 ❌

이걸 배열로 만들어서 사용해보자❗

console.log(Array.from(list.childNodes).filter);

Array.from 메서드

유사 배열 객체( array-like object )나 반복 가능한 객체( iterable object )를
얕게 복사해 새로운 Array 객체를 만듦🧩✨

Node Type

1️⃣ Element( 요소 )
2️⃣ Attribute( 속성 )
3️⃣ Text Node
8️⃣ Comment
9️⃣ Document itself
🔟 Doctype

val = list.childNodes[0];
console.log(val);

val = list.childNodes[0].nodeName; 
console.log(val);  // #text 출력됨

val = list.childNodes[3];
console.log(val);

val = list.childNodes[3].nodeType;
console.log(val);  // 요소는 1번에 해당되니까 출력은 1

주석처리하면 comment로 나오는 걸 볼 수 있음

🔹 children

children element nodes 반환

val = list.children;
console.log(val);

아까완 달리 text nodeType인 라인브레이크는 출력 안 되는 걸 볼 수 있음

val = list.children[1];
console.log(val);

// 콘텐츠가 Hi로 바뀌는 걸 볼 수 있음
val = list.children[1].textContent = 'Hi';  

firstChild & firstElementChild

val = list.firstChild;
console.log(val);  // 출력 : #text

#text가 출력 됐다는건 전체 노드를 다 반환하는 것 == list.childNodes[0]

val = list.firstElementChild;
console.log(val);  // 출력 : li.list-group-item.1

실제 요소 노드만 반환하고 싶으면➡firstElementChild🙆‍♀️

val = list.childElementCount;
console.log(val);  // 출력 : 4

child에 요소가 몇가지 있는지 확인하고 싶으면➡childElementCount

지금까진 👩‍🦱부모에서 👩자식으로 접근한거임

---

이번엔 👩자식에서 👩‍🦱부모로 접근해보자❗

◽ parentNode

let val;
const listItem = document.querySelector('li.list-group-item:first-child');

val = listItem.parentNode;
// 출력 : ul.list-group.mt-5.mb-5 ( 부모 출력됨 )
console.log(val); 

◽ parentElement

val = listItem.parentElement;
console.log(val);  // 위와 똑같은 게 출력됨

parentElement 여러번 사용하기

val = listItem.parentElement.parentElement;
// 출력 : div#body-container.container.mt-5
console.log(val);

li item 1에서 부모 부모 했으니 div가 출력되는 걸 볼 수 있음

---

🦀이번엔 올라가는 게 아닌 옆으로 이동해보자
previous(이전) || next(다음) sibling(시블링)

val = listItem.nextSibling;
console.log(val);  // 출력 : #text

val = listItem.nextElementSibling;
console.log(val);  // 출력 : li.list-group-item.3

출력 item.2가 아닌 3이 나온 이유➡2가 현재 주석 처리 되어있기 때문

val = listItem.nextElementSibling.nextElementSibling;
console.log(val);  // 출력 : li.list-group-item.4

val = listItem.nextElementSibling.nextElementSibling.previousElementSibling;
console.log(val); // 출력 : li.list-group-item.3

val = listItem.previousSibling;
console.log(val);  // 출력 : #text

---

🎆JS로 요소( Element ) 생성하기

<div id="body-container" class="container mt-5">
  <ul class="list-group mt-5 mb-5">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
  </ul>
</div>

// element 생성
const li = document.createElement('li'); // li 태그를 생성한 것
// -> 지금은 <li></li> 이렇게만 생성한거임

// class 생성
li.className = 'list-group-item'; 
// -> <li class="list-group-itme"></li>

// id 추가
li.id = 'new-item';
// -> <li class="list-group-itme" id="new-item"></li>

// 속성 이름과 값 추가
li.setAttribute = ('name', 'New list item');
// -> <li class="list-group-itme" id="new-item" name="New lis t item"></li>

// 텍스트 추가
// 텍스트는 li의 child이기 때문에
li.appendChild(
  document.createTextNode('New list Item');
)
/*
<li class="list-group-itme" id="new-item" name="New lis t item">
	New list Item
</li> 
*/

// 생성은 됐자만 화면엔 아직 반영이 안 될거임

// 화면에 반영하기
document.querySelector('ul.list-group').appendChild(li);

JS 코드로 작성하지만 window.document 이건 브라우저에서 제공하는 것😎
👉 window는 생략 가능 🙆‍♀️

document 에서 제공해주는 메서드인 createElement 사용🤓

화면에 반영됨

// 링크 넣기 a 태그니까 요소 Element
const link = document.createElement('a');
// 클래스 추가
link.className = 'alarm-item';
// -> <a class='alarm-item'></a>

// i 이탤릭 태그 요소 Element 추가
link.innerHTML = '<i class="bi-alarm"></i>'
// appendChild로 li 태그 안에 link 넣어주기
li.appendChild(link);
// -> <a class='alarm-item'><i class="bi-alarm"></i></a>

🎆JS로 요소( Element ) 제거하기

1️⃣ removeChild - 삭제

👉 먼저 부모 노드에 접근해야함

// Remove 부모 Node
const listParent = document.querySelector('ul');  // 부모에게 접근

const list = document.querySelectorAll('li');  // 자식들 li 모두 접근

// listParent에서 removeChild 메서드 이용해서 원하는 자식 삭제하기
listParent.removeChild(list[1]);  // 인덱스 1번 자식 삭제
// 이렇게 하면 1번째인 A secode item이 삭제됨

2️⃣ replace - 교체

<div id="body-container" class="container mt-5">
  <ul class="list-group mt-5 mb-5">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
  </ul>
  <div id="A">Hello</div>
</div>

const oldElement = document.getElementById('A');

const newElement = document.createElement('span');
newElement.textContent = 'Hi';

// 어떤걸 교체할건지 -> replaceChild
oldElement.parentNode.replaceChild(newElement, oldElement);

원래 textConent가 Hello 였는데 Hi로 바뀐걸 볼 수 있음