DOM
돔이 뭐지? 어디서 많이들어봤는데. 뭔가 건축물의 원형 돔 이런거 인줄 알았다 ;
HTML을 구조적으로 접근하는 DOM(Document Object Model)은 HTML을 단순한 문서 이상인 웹앱으로 만들어준 열쇠이다. 브라우저 환경에서 DOM은 자바스크립트를 이용해 조작할 수 있으며, 기존 엘리먼트에 대한 접근 혹은 새로운 엘리먼트 생성 및 삭제를 가능하게 한다.
음 ..
HTML,CSS 에 대한 접근이나 어떤 행동을 할때 DOM 이 그걸도와준다는건가? 아님 DOM이 그걸 대신해주는건가?
DOM이 뭔데 그래서?
자바스크립트를 사용하는 방법을 알고 있으면 DOM을 활용하여 HTML을 조작할 수 있다는 의미
어떤 HTML요소에 접근할때 사용하는 Document의 한 객체를 얘기하는것으로 보인다.
즉
내가만든 HTML의 각 div들 요소들에 대한 정보가
브라우저가 그것을 그리면서 객체화해서 js가 사용할수있는 객체형태로 저장해준다는거 아닐까 싶다.
그렇기때문에 html,css 와 연결점이 없는 js가 DOM을 통해서 접근할수있다는 얘기이다.
HTML에 CSS가 접근자(selector)를 통해서 접근했듯이. html,css에 js가 DOM을 통해서 접근할수있다.
이이상 ..뭘 더 설명할게있을까.
장황하게 무언가 말이많은데..
결론은 DOM을 이용해서 내가 HTML에 CRUD를 만들수있냐 이게 핵심인거같다.
Create - createElement
document.createElement('div') // <div></div>여기서 노드라는 표현이뜨는데.
쉽게생각하면 HTML전체를 트리구조로 보았을때 하나의 연결점이 될수있는 것 (태그들이겠지만)
그게 노드이며
뭔가 요소적인부분,이 강하다 그게 div냐, span이냐.. 등?
Node는 태그 노드와 텍스트 노드 전체를 가리키고, Element는 텍스트 노드를 제외하고, 흔히 생각하는 태그(
<a>같은)만 가리킵니다. 따라서 태그만 검색하고 싶을 때는 Element가 붙은 메소드를 선택해야합니다.
DocumentFragment
DocumentFragment 를 이용해서
내가 사용하는 Document , 즉 전체 파일말고 새롭게 관리할수있는 mini document 같은 느낌으로 사용할수있다.
사용예시를 봐야하지만 기본적으로 쉽게 생각하면 새로운 빈 HTML에 내가 요소들을 직접 넣어주어서
원하는 페이지를 만드는느낌이다. (거기에 DOM을 쓰는것이다.)
APPEND - append, appendChild
내가 createElement 매서드를 통해서 어떤 노드를 만들었다면 이제 연결해주면된다(해당 html의 위치에 추가해준다.)
document.body.append(tweetDiv)READ - querySelector, querySelectorAll
결국 내가 어떤 요소를 검색하려면 쿼리셀렉터를 써야한다.
그게 제일 빠르고 효율적이다.
내가생각하는 이상적인것은 CSS요소에 관련된 내용은 class로 접근해주는게 맞지만.
기능적인부분(JS에서 접근하는것도 솔찍히 ID로..) ID로 설계하는게 맞다.
JS에서 CSS를 변경하고싶다면 class로 접근하는게 맞을까 id로 접근하는게 맞을까.
둘다 접근은 되겠지만 뭔가 알수없는느낌이다.
(뭔가 고정관념이 박혀버린느낌 class는 CSS만의 것이다 ..이런 관념?..)
UPDATE - textContent, classList.add
좋다. 이렇게 결국 하나하나 요소추가는 되지만 결국 만든 요소라곤 div달랑 하나일것이다.
이쁘지가 않다. 클래스를 입혀보자. 혹은 내부에 텍스트값을 넣어줘보자.
그래서 이기능을쓴다.
oneDiv.classList.add('tweet')
console.log(oneDiv)뭔가 나는 setAttribute 를 썻던거같다.
방법은 여러가지겠지.
(하지만결국 스타일드컴포넌....읍읍)
Delete
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 엘리먼트를 삭제할 수 있다.
추가적으로 배우면 좋은것
- element와 node의 차이 (difference between element and node in javascript dom)
- children과 childNodes의 차이 (difference between children and childNodes in javascript dom)
- removeChild와 remove의 차이 (difference between removeChild and remove in javascript dom)
- tweets에 forEach는 되는데, reduce는 안되는 이유 (why array method is not working on nodelist)
- tweets를 유사 배열에서 배열로 바꾸는 방법 (how to convert nodelist into javascript array)
