TIL - 21.07.05 👨‍💻 -Js. DOM

성훈·2021년 7월 5일

DOM JavaScript TIL

TIL

목록 보기

21/59

TIL - 21.07.05 👨‍💻

Document Object Model

자식 요소(노드) 찾기

console.dir 메소드는 DOM을 객체로 출력해주는 메소드이다.
console.dir(document.body)를 콘솔창에 입력하고 여러 키 중 children을 찾으면 객체로 body의 자식 요소로 정리되어 있는 것을 찾을 수 있다.
이후 이 키에 다시 접근하려면 객체에 닷 노테이션으로 해당 키 children을 입력하면 원하는 정보만 조회 할 수 있다.

<body>
  <div>division 1</div>
  <div>division 2</div>
  <div>division 3</div>
</body>

console.dir(document.body.children) // { 0: div, 1: div, 2: div }

부모 요소(노드) 찾기

부모 요소를 찾아내는 메소드는 두가지가 있는데, 하나는 node.parentElement 이고, 다른 하나는 node.parentNode이다.

node.parentElement 메소드는 부모의 요소 노드만 반환하는 메소드이지만 만약 부모 노드가 없거나 부모가 돔 요소가 아니라면 null을 반환한다.
node.parentNode 의 경우엔 부모 노드가 문서 노드라도 노드로 잘 반환한다.

DOM에서 HTML 조작하기

DOM에서 조작에 필요한 프로세스는 크게 4+1 가지이다.
C(A)RUD로 각각 Create, Append, Read, Update, Delete를 뜻한다.

Create 메소드로는 document.createElement가 있다.
Append 메소드로는 node.append와 node.appendChild, node.insertBefore등이 있다.
Read 메소드로는 document.querySelector와 document.querySelectorAll이 있고
구형 메소드로 document.getElementby~가 있다.
Update 메소드로는 대표적으로 node.textContent와 element.id, element.classList, 그리고 element.setAttribute 등이 있다.
Delete 메소드로는 node.delete, node.removeChild, node.innerHTML = '', node.textContent = '' 등이 있는데 이중 node.innerHTML을 이용한 메소드는 보안 취약점 문제로 잘 쓰이지 않는다.

Create - document.createElement()

해당 메소드는 document 객체의 createElement()메소드를 이용해서 요소를 생성하는 메소드이다.
생성하는 방법은 변수 하나를 선언하고 거기에 createElement메소드로 생성한 요소를 할당한다.
이때 요소를 생성한다고 HTML 태그에 바로 적용 되는 것이 아니라 DOM tree에 연결되지 못한, 즉, 붕 떠 있는 상태가 된다. 그래서 이 붕 떠있는 요소를 돔 트리에 연결 시키는 Append 과정이 필요한 것이다.

let addDiv = document.createElement('div')
console.log(addDiv) // <div></div>; 빈 div 엘리먼트가 변수 addDiv에 할당되었다.

Append - node.append vs node.appendChild

두 메소드들 전부 부모 노드에 자식 노드를 추가하는 메소드 이나 몇가지 주요한 차이가 있다.

append 메소드는 DOM String, 즉 문자열을 추가할 수 있으나 appendChild 메소드는 노드 요소만 추가할 수 있다.
append는 반환 값이 없으나 (undefined) appendChild는 추가된 노드를 반환한다.
append는 한번에 여러 노드와 문자열을 추가할 수 있으나 appendChild는 한번에 한 노드 씩만 추가 할 수 있다.

let addDiv = document.createElement('div');

addDiv.append('Hello!'); // undefined;
console.log(addDiv); // <div>Hello!</div>;
addDiv.appendChild('Hi, there!'); 
// TypeError: Failed to execute 'appendChild' on 'Node'
// appendChild 는 노드만 적용시킬 수 있으며 append는 문자열도 추가할 수 있다.

document.body.append(addDiv); // undefined;
document.body.appendChild(addDiv); // <div>Hello!</div>;

// append는 반환하는 값이 없지만 appendChild는 적용한 노드를 반환한다.

let addSpan = document.createElement('span');
let addP = document.createElement('p');

document.body.append(addDiv, addSpan, 'Yeah!', addP); // undefined
document.body appendChild(addDiv, addSpan, 'Yeah!', addP); 
// <div>Hello!</div>; 가장 처음 적은 변수만 적용된다.

node.insertBefore()

insertBefore 메소드는 appendChild와 굉장히 유사하다.
하나 차이 점은 appendChild로 노드를 적용시키게 되면 부모 노드 아래 형제 노드들 사이에서도 최후미에 추가되나, insertBefore 메소드를 사용하면 형제 노드 사이에서 어디에 추가할지 지정할 수 있다.

문법은 parentNode.insertBefore(newNode, referenceNode) 이며 newNode가 referenceNode 앞에 적용되게 된다.

만약 referenceNode자리에 null이 오면 append 와 형제 노드중 가장 마지막에 위치하게 된다.

<!--insertBefore 적용 전-->
<body>
  <div class='box'>division 1</div>
  <div>division 2</div>
  <div>division 3</div>
</body>

let addDiv = document.createElement('div');
addDiv.textContent = 'Hello!';
document.body.insertBefore(addDiv, document.body.children[0]);
//<div>Hello!</div>; appendChild와 같이 적용된 노드 반환된다.
// document.body.children[0] 대신 document.querySelector('.box')를 사용해도
// 같은 결과가 나온다.

<!--insertBefore 적용 후-->
<body>
  <div>Hello!</div>
  <div class='box'>division 1</div>
  <div>division 2</div>
  <div>division 3</div>
</body>

Read - .querySelector() vs .querySelectorAll()

document.querySelector()의 경우는 이전 포스팅에도 잠시 언급한 적이 있듯, CSS 셀렉터를 인자로 받으며 일치하는 것을 탐색하는데, 가장 처음 찾은 것을 반환하고 탐색을 중지한다.

document.querySelectorAll()의 경우는 인자에 해당하는 모든 요소를 부모 자식 관계 상관없이 탐색하고 Array-like Object, 유사 객체로 반환한다.
이 유사 객체와 for 문을 이용해 요소에 일괄적으로 적용시킬 수 있지만, 배열같이 보여도 배열은 아니라서 map과 같은 배열 전용 메소드가 작동하지 않는다.
(forEach()의 경우는 유사배열의 프로토에 기입되어 있기에 작동한다.)

배열 전용 메소드를 사용하기 위해선 이 유사 배열을 진짜 배열로 복사해야하는데 그 방법으로는, Array.from 메소드를 이용하는 방법, 전개 구문을 이용해 복사하는 방법, slice()를 이용해 복사하는 방법 등이 있다.

<body>
  <div class='box'>division 1</div>
  <div class='box'>division 2</div>
  <div class='box'>division 3</div>
</body>

console.log(document.querySelector('.box')) 
// <div class='box'>division 1</div>; 가장 먼저 찾은 요소를 반환한다.

console.log(document.querySelectorAll('.box'))
// [div.box, div.box, div.box]; 배열 같아 보이는 유사 객체로 반환한다.

let boxes = document.querySelectorAll('.box')
for( i = 0; i < boxes.length; i++) {
  boxes[i].style.color = 'red';
}
// 상술한 예제와 같이 탐색된 요소 전체에 적용시킬 수 있다.

getElementBy~

이 구시대 메소드들 역시 찾는 가장 첫번재 요소를 반환하고 중지하지만 querySelectorAll 같이 작동하는게 둘 있는데 바로 getElementByTagName과 getElementByClassName 이다.
이 두 메소드는 querySelectorAll 과 비슷하게 부모자식관계 상관없이 해당하는 것 전부 선택하며 선택한 요소를 유사 객체로 반환한다.

Update - textContent, classList, id, setAttribute

element.textContent는 요소에 문자열을 추가하는 메소드이고,
element.classList 요소에 클래스를 추가하는 메소드이며,
element.id 요소에 id를 추가하는 메소드이다.
setAttribute는 아이디와 클래스는 물론, 요소에 전반적인 속성을 부여하게 도와주는 메소드이다.
문법은 element.setAttribue('name', 'value') 이다.

classList 같은 경우 존재하지 않는 클래스를 추가하거나 제거해도 에러가 발생하지 않는다.

textContent vs innerHTML

두개 메소드 전부 HTML 내용에 간섭할 수 있으나
innerHTML 같은 경웨는 HTML을 직접 수정하는 점에서 보안 취약점이 발생하며 이를 노린 공격은 <script> 태그를 이용한 XSS Attack이 대표적이다.

Delete - remove vs removeChild

node.remove()와 node.removeChild()는 둘다 노드를 삭제하는 메소드이지만 차이 점이 몇가지 있다.

remove 같은 경우는 메소드를 실행할 경우 노드 데이터를 삭제한 후 반환 없이 (undefined) 메소드가 종료된다.
removeChild 같은 경우는 정확히 선택한 요소를 돔 트리에서 연결을 끊어내 접근이 안되게 하는 것이다.
이와 동시에 연결을 끊어낸 값을 반환해서 다른 변수에 할당할 수도 있다.
만약 할당하지 않는다면 가비지 컬렉션에 의해 자동적으로 정리된다.

<body>
  <div class='box'>division 1</div>
  <div class='box'>division 2</div>
  <div class='box'>division 3</div>
</body>

document.querySelector('.box').remove(); // undefined; 해당 노드를 삭제한다.
document.querySelector('.box').removeChild(); 
// <div class='box'>division 2</div>; 해당 노드와 돔 트리와의 연결을 끊어내고 
// 해당 노드를 반환. 이대로 둔다면 가비지 셀렉터에 의해 데이터는 삭제된다.

let div2 = document.querySelector('.box').removeChild(); 
// 이런 식으로 다른 변수에 할당한다면 가비지 컬렉터에 의해 삭제되지 않고 후에 
// 재사용 할 수 있다.

기타 메소드

node.cloneNode

cloneNode 메소드는 노드를 복제하는 메소드이다.
문법은 다음과 같으며 node.cloneNode(deep) 이 중 deep은 복사의 깊이를 결정하는 인자이다.
true를 넣으면 깊은 복사를 하며 false를 넣으면 얕은 복사를 하게 된다.

GOOD 😉

오늘은 DOM 구조 전반과 이를 수정하는 법을 익혔다.
유효성 검사 스플린트를 진행하며 이벤트 핸들러에 대한 감을 잡았다.

BAD 😥

페어프로그래밍하면서 혼자 폭주해서 처리해나갔다.

TO DO 🔥

DOM 숙련
이벤트
고차함수
React

Retrospect 🧐

오늘은 전반적으로 페어프로그래밍에 대한 후회가 많이 남는다.

이번 페어님도 아주 젠틀하신 분 이었는데 의견을 나눌 사이도 없이 나 혼자 폭주해서 과제를 처리해 나갔다.
중간 중간 너무 막나갔나 싶어서 형식적으로 의견도 여쭤봤지만 내가 다시 생각해도 너무 형식적이었어서 페어 분이 엄청 기운이 빠지셨을 것 같다.

서로 얻어가는게 많게 페어 프로그래밍하자.

Reference 🙇

https://developer.mozilla.org/

성훈

어떻게 이걸 풀어낼 수 있을까

이전 포스트

TIL - 21.07.04 👨‍💻 - Js. DOM

다음 포스트