[JS] DOM

DOM은 쉽게말해서 HTML이 길어지면 찾기가 매우매우 어렵기 때문에 쉽게 찾아내고 작성하는 방법을 의미하는 것 같습니다.

HTML에 JavaScript를 적용하기 위해서는 <script> 태그를 이용합니다.

아래의 경우 HTML 파일과 같은 디렉토리에 존재하는 myScriptFile.js을 불러옵니다.

<script src="myScriptFile.js"></script>

HTML 문서에 포함되는 script 요소

1. <head> 안쪽에 삽입하는 경우

2. <body> 태그가 끝나기 전에 삽입하는 경우

'html도 위에서 아래로 읽어서 head에 넣어버리면 html을 실행시키기 전에 Javascript를 읽어서 body 맨 마지막에 넣어야 됩니다.'

DOM 구조를 조회할 때에는 console.dir 이 유용합니다.

console.dir(document.body), 또는 객체의 document.body.children 으로 바로 조회가능.

document : 웹 문서 자체를 가리키는 DOM 요소중 하나

1. 자식 엘리먼트를 찾기

자바스크립트에서 찾을 때에

var mother = document.getElementById('mother');

var every = mother.childNodes; // 모든자식

var one = mother.firstChild;// 첫번째 자식

2. 부모 엘리먼트를 찾기

특정 엘리먼트의 부모노드에 접근하고 싶을 때는 Node 객체의 기본 프로퍼티인 parentNode를 사용합니다.

let one = document.getElementById('one');

let mother = one.parentNode;

3. DOM 요소 접근 방법

1) id 선택자로 접근 : getElementByld()

2) calss 값으로 접근 : getElementsByClassName()

3) tag 이름으로 접근 : getElementsByTagName()

4. DOM 메소드

1. createElement, append

document.createElement('div') // div를 넣으려 한다면

const tweetDiv = document.createElement('div') // 변수에 선언을 하고

document.body.append(tweetDiv) // body에 append 메소드를 사용하여 집어 넣는다.

- append 와 다르게 prepend는 첫 번째 자식 앞에 넣습니다. (배열의 shift 개념 처럼)

- append 는 한 번에 여러 개의 자식 요소를, appendChild 는 한 번에 하나의 자식 요소만 추가

2. textContent, classList.add

기존에 생성한 빈 div 태그를 업데이트하여, 보다 다양한 작업을 할 수 있습니다. textContent 를 사용해서, 비어있는 div 엘리먼트에 문자열을 입력합니다.

console.log(oneDiv) // <div></div>

oneDiv.textContent = 'dev';

console.log(oneDiv) // <div>dev</div>

앞서 생성한 div 엘리먼트를 container에 append 했을 때, CSS 스타일링이 적용되지 않았습니다. CSS 스타일링이 적용될 수 있도록, div 엘리먼트에 class를 추가합니다.

oneDiv.classList.add('tweet')

console.log(oneDiv) // <div class="tweet">dev</div>

3. 요소 노드 외에 텍스트 노드와 속성 노드까지 접근 가능

1) querySelector()

'.tweet' 을 첫 번째 인자로 넣으면, 클래스 이름이 tweet 인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회할 수 있습니다.

const container = document.querySelector('#container') // id일 경우 .container

container.append(oneDiv)

2) querySelectorAll()

여러 개의 엘리먼트를 한 번에 가져오기 위해서는, querySelectorAll 을 사용합니다.

조회한 HTML 엘리먼트들은 배열처럼 for문을 사용하실 수 있습니다. 이렇게 조회한 HTML 엘리먼트들은 배열이 아닙니다! 이런 '배열 아닌 배열'을 유사 배열, 배열형 객체 등 다양한 이름으로 부릅니다. 정식 명칭은 Array-like Object 입니다.

4. remove, removechild (보안 문제)

onst container = document.querySelector('#container')

const tweetDiv = document.createElement('div')

container.append(tweetDiv)

tweetDiv.remove() // 이렇게 append 했던 엘리먼트를 삭제할 수 있다.

id가 container인 엘리먼트 아래에 tweetDiv를 추가하고, remove로 삭제합니다.

여러 개의 자식 엘리먼트를 지울때 innerHTML 을 이용하면, 아주 간단하게 모든 자식 엘리먼트를 지울 수 있습니다.

document.querySelector('#container').innerHTML = '';

간편하고 편리한 방식이지만, innerHTML은 보안에서 몇 가지 문제를 가지고 있습니다. 이 방법을 대신할 다른 메소드를 사용합니다. removeChild 는 자식 엘리먼트를 지정해서 삭제하는 메소드입니다. 모든 자식 엘리먼트를 삭제하기 위해, 반복문(while, for, etc.)을 활용할 수 있습니다.

removeChild 와 while 을 이용해 자식 요소를 삭제하면, 제목에 해당하는 H2 "Tweet List"까지 삭제됩니다. 이를 방지하기 위한 방법은 여러 가지가 있습니다. 자식 요소가 담고 있는 문자열을 비교해 "Tweet List"만 남기거나, 새로운 변수를 생성하고 Tweet List를 할당해뒀다가 반복문이 끝난 뒤에 새롭게 추가할 수도 있습니다. 또는 자식 엘리먼트를 하나만 남기게 할 수도 있습니다.

const container = document.querySelector('#container');

while (container.children.length > 1) {

container.removeChild(container.lastChild);

}

container의 자식 엘리먼트가 1개만 남을 때까지, 마지막 자식 엘리먼트를 제거합니다.

const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
tweet.remove();
})
// or for (let tweet of tweets){
tweet.remove()
}

클래스 이름이 tweet인 엘리먼트만 찾아서 제거합니다.

'JavaScript & TypeScript' 카테고리의 다른 글

[JS] 객체 지향 (1)	2021.06.14
[JS] 고차함수 (1)	2021.06.06
[JS] 복습(과제) 정리 (0)	2021.06.01
[JS] Spread, Rest, Destructing (2)	2021.05.31
[JS] 스코프, 클로저 (0)	2021.05.29