📌 JS/브라우저 DOM
DOM 기초
1. DOM
DOM은 Document Object Model의 약자로 HTML 문서의 각 항목을 생성, 변형, 삭제 등으로 조작할 수 있도록 돕는 인터페이스이다.
2. HTML에 JavaScript 적용
HTML에 JavaScript를 적용하기 위해서는 <script>를 사용한다. 웹 브라우저가 작성된 코드를 해석하는 과정에서 <script>를 만나면 HTML 해석을 멈춘 뒤 <script> 요소를 먼저 실행한다.
<head> 안에 삽입된 경우 HTML의 parsing을 멈추고 JS를 가져와 실행 한 후 다시 HTML을 parsing 한다.
<body> 안에 삽입된 경우 HTML이 parsing을 마친 후 JS를 가져와 실행한다.
parsing : 어떤 문장을 분석하거나 문법적 관계를 해석하는 행위
3. DOM 구조 조회
자바스크립트에서 DOM은 document 객체로 구현되어있으며 자바스크립트 코드 내 어느곳에서나 document 객체를 조회할 수 있다.
console.log와 다르게 console.dir는 DOM을 객체 의 모습으로 출력한다.
또한 해당 객체의 자식 속성을 바로 조회 가능하다.
반대로 해당 객체의 부모 요소를 가리키는 속성 Node.parentNode 도 존재한다.
let newsContents = document.body.children[1];
let parent = newsContents.parentNode;//newsContents의 부모 요소를 변수에 할당
console.dir(parent); //body를 출력 -> newsContent의 부모 요소✨ Node.parentNode vs Node.parentElement
Node.parentNode: DOM에서 현재 다루고 있는 노드의 부모 노드를 반환하며, 이 parentNode는 읽기 전용 노드가 된다.Node.parentElement: parentNode와 동일하게 부모 노드를 반환하는데 이때 부모가 존재하지 않거나 부모가 DOM 요소가 아니라면 null을 반환한다.
DOM 다루기
document 객체에는 다양한 속성과 메서드가 존재한다. 각각은 document 객체를 통해 HTML 속성을 만들고, 읽고, 갱신하고, 삭제하는 기능을 한다.
1. Create
새로운 요소를 만드는 방법으로 createElement 메서드를 이용해 요소를 생성한다.
const tweetDiv = document.createElement('div')생성한 div element를 변수에 할당한다.
2. Append
생성한 요소를 document의 트리 구조에 연결한다.
document.body.append(tweetDiv) 변수 tweetDiv에 담긴 div 요소를 body 요소에 연결(append)한다.
3. Read
DOM에서 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의 첫번째 인자로 셀렉터를 전달해 확인 가능하다. 셀렉터로는 HTML 요소, id, class을 가장 많이 사용한다.
const oneTweet = document.querySelector('#container')querySelector로 클래스 이름이 tweet인 첫 번째 HTML 요소를 조회한다.
querySelectorAll 의 경우 조건을 만족하는 HTML 엘리먼트 요소를 배열 의 형태로 모두 조회한다.
✨ getElementByID 또한 동일한 기능을 한다.
4. Update
const oneDiv = document.createElement('div') //<div></div>
oneDiv.textContent = 'dev'; //<div>dev</div>
oneDiv.classList.add('tweet') //<div class="tweet">dev</div>여러 속성을 통해 속성값을 업데이트 가능하다.
✨ Element.setAttribute(name, value) : 지정된 이름과 값으로 새로 속성을 추가한다. 만약 이미 존재한다면 값을 업데이트한다.
5. Delete
먼저 삭제하려는 요소의 위치를 알고 있는 경우
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove()id가 container인 요소 아래에 tweetDiv를 추가하고 remove로 삭제한다.
여러 개의 자식 요소 한번에 지우는 경우
document.querySelector('#container').innerHTML = '';모든 자식 요소를 한 번에 지울 수 있지만 보안 측면에 이슈가 발생하기에 사용 하지 않음
자식 요소를 지우는 경우(removechild)
//container의 첫 번째 자식 요소가 존재하면, 첫 번째 자식 요소를 제거
const container = document.querySelector('#container');
while (container.firstChild) {
container.removeChild(container.firstChild);
}
//container의 자식 요소가 1개만 남을 때까지, 마지막 자식 요소를 제거
const container = document.querySelector('#container');
while (container.children.length > 1) {
container.removeChild(container.lastChild);
}
//클래스 이름이 tweet인 요소만 찾아서 제거
const tweets = document.querySelectorAll('.tweet') //tweets = array
for (let tweet of tweets){ //따라서 for ... of를 사용 가능
tweet.remove()
}마무리
