DOM
DOM(Document Object Model) : html의 모든 디테일한 요소를 js로 접근할 수 있게 만들어준 모델, 웹 페이지에 대한 인터페이스(html과 js를 연결해주는 하나의 다리)
DOM으로 html조작
CRUD
CREATE - createElement : 개발자도구의 콘솔탭에서 새로운 태그를 생성 가능
const tweetDiv = document.createElement('div') //<div></div>
APPEND - append, appendChild : 새롭게 생성된 태그를 트리구조에 연결
document.body.append(tweetDiv)
READ - querySelector, querySelectorAll : 변수의 이름으로 html엘리먼트 조회
const oneTweet = document.querySelector('.tweet') // 클래스이름이 tweet인 엘리먼트 조회
const tweets = document.querySelectorAll('.tweet') // 클래스이름이 tweet인 모든 html엘리먼트를 유사배열로 받아옴
DELETE - remove, removeChild : 엘리먼트 삭제
삭제하려는 엘리먼트의 위치를 알고 있는 경우 : tweetDiv.remove()
모든 자식엘리먼트를 삭제하는 경우 : document.querySelector('#container').innerHTML = '';
단, innerHTML의 경우 보안에 문제가 있으므로 사용하지 않는 것이 좋음(문제 발생의 여지를 주지 말자)
추상화
추상화 : 복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 개념 또는 기능을 간추려 내는 것을 말함
=> 구체적이지 않게 표현하는 것, 복잡한 것을 단순하게 표현하는 것
추상화의 장점
모델링을 통해 코드를 추상화하면, 코드의 재사용성을 높일 수 있고, 가독성을 높여 코드를 이해하기 훨씬 더 쉽게 만들어주기도 함 그리고 추상화된 코드는 자연스럽게 일관성을 가지게 됨
여담 : 추상화 너무 어렵다.. 근데 여기 저기 좀 찾아보니까.. 추상화는 작명에서부터 시작한다고 얘기하시는 분이 계셨다 변수 이름 짓기.. 추상화 나름 자연스럽게 하고 있었던걸까..?
.jpeg)