[JS] DOM

DOM (Document Object Model)

문서 객체 모델이라고도 하는 DOM은 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 이를 통해 자바스크립트로 html 요소를 객체처럼 조작할 수 있다.

document 객체의 요소

CREATE

document.createElement('div')
const tweetDiv = document.createElement('div')

javascript로 html 요소를 생성. 이를 활용하기 위해선 변수를 선언하고 변수에 할당함.

APPEND

document.body.append(tweetDiv)

요소를 원하는 부모 노드에 포함시킬 수 있다.

노드란?

• HTML DOM은 노드(node)라고 불리는 계층적 단위에 정보를 저장
• 요소, 속성 등 html 문서의 모든 것은 노드.

READ

DOM으로 html 요소의 정보를 읽기 위해선 querySelector에 셀렉터를 전달해서 사용하면 된다. (쿼리를 날리다 = ~을 조회한다)
HTML 요소("div"), id("#아이디이름"), class(.클래스이름) 등이 셀렉터이다.

const oneTweet = document.querySelector('.tweet')

클래스 이름이 tweet인 요소를 가져와서 변수 oneTweet에 저장함.

이렇게 하면 tweet이 클래스명인 요소가 여러 개가 있어도 맨 처음에 발견한 한 개만 가져오게 된다. tweet이 클래스명인 모든 요소를 가져오고 싶으면 querySelectorAll을 사용한다. 조회한 요소들은 배열처럼 for문을 사용할 수 있지만, 배열이 아닌 유사 배열, 배열형 객체(Array-like Object)이다!

const getOneTweet = document.getElementById('container')

getElementById와 getElementsByClassName도 querySelector와 각각 같은 기능을 하지만, 예전에 사용됐던 메서드이다.

UPDATE

const oneDiv = document.createElement('div');
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>

textContent 메서드로 div에 dev라는 내용을 추가함.

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

classList.add 메서드로 변수 oneDiv에 tweet 클래스 추가.

button.setAttribute("disabled", ""); // setAttribute(name, value)

setAttribute()로는 속성 추가 가능.

REMOVE

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.

삭제하려는 요소의 위치를 알 경우엔 remove 메서드로 삭제.

const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

removeChild는 자식 요소를 지정해서 제거하는 메서드다.
모든 자식 요소를 삭제하기 위해, 반복문을 활용할 수 있다. 위 코드는 자식 요소가 남아있지 않을 때까지, 첫 번째 자식 요소를 계속 삭제한다.