[JS/브라우저] DOM 리뷰

소금·2021년 9월 2일

JavaScript

Chapter. DOM 이해

🐤 DOM

document object model, JavaScript를 이용하여 엘리먼트의 속성값을 CRUD 하는 법

자바스크립트로 문서내 요소를 선택하여 속성과 스타일을 적용할 수 있음
단, IE 이하 버전과 기타 브라우저 간의 호환성이 떨어짐

🐤 HTML에 javascript 적용

<head> 안쪽 또는 </body> 전에 삽입
<body> 내용이 읽힌 후 스크립트를 실행해야해서, 후자가 나음

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

🐤 자식 / 부모 엘리먼트

console.dir는 DOM을 객체의 모습으로 출력

document.body 객체의 키 중에서 children 속성을 찾아 자식 요소를 찾기

children.parentElement 또는 children.parentNode로 부모 요소를 찾기

Chapter. DOM으로 HTML 조작

🐥 CRUD

create
read
update
delete

🐥 create

const newDiv = document.createElement('div')

//newDiv에 div element 창조의 결과를 할당

🐥 append

document.body.append('newDiv')

//위에서 만든 변수(현재 허공을 떠돌고있음 ..)를 부모 요소에 연결해줌

🐥 querySelector

document.querySelector('.class'/'#id'/'<tag>')

//해당 요소 중 맨 처음 하나만 선택

documnet.querySelectorAll('.class'/'#id'/'<tag>')

//해당 모든 요소를 선택

🐥 update

newDiv.textContent = 'new!!'
// 식별자 내부 컨텐츠를 text/plain으로 파싱한 raw text

newDiv.innerText = 'new!!'
// text/plain으로 파싱한 프로퍼티의 값
다만 raw text가 렌더링 된 이후의 모습

newDiv.innerHTML = 'new!!'
// text/html로 파싱한 프로퍼티의 값
보안에 취약하며 파싱이 느리다

🐥 delete

newDiv.remove()
//해당 엘리먼트를 지움

const container = document.querySelector('#container');
while (container.children.length > 1){
  container.removeChild(container.lastChild);
}  
  
  선택자로 id가 container인 요소를 선택한 후,
  반복문으로 container의 children이 없을때까지
  container의 마지막 child를 지움