-
BEB Section 1 - 웹개발 기초 : DOM2nd of BEB/Codestates 2021. 11. 22. 02:47
DOM이란? HTML 요소를 Object처럼 조작할 수 있는 모델이다.
.. 라고 하니까 사실 무슨 말인지 몰라서 난 그림으로 이해했다. 그림으로 이해하는 부분이 더 쉽다!
출처 : 코드스테이츠 urclass HTML에 Javascript를 적용하기 위해선 <script> 태그를 사용한다.
<script src="Script.js"></script><script> 태그를 삽입하는 위치도 아주 중요하다. 만약 <head> 태그가 마무리되기 직전에 적어서 넣으면 null 값이 보이고, <body> 태그가 마무리되기 직전에 넣으면 그에 해당되는 태그와 메세지가 확연하게 보인다. 내 의견을 조금 덧대어 보자면
<html> <body> <head> ...보통 HTML 코드는 코드블록에 적혀있는 방식으로 틀을 잡아 코딩을 하게 된다. <head> 엘리먼트에 넣는 코드들은 해당되는 조건이 필수적으로 발생해야하는 코드들을 넣는게 필수적이기 때문에 쓰는 것이라고 생각한다. 물론 <body> 엘리먼트에 들어가는 코드들이 중요하지 않다는 것은 아니다. 하지만 전체적인 틀을 잡아주는 것이라고 생각하기 때문에 <body> 엘리먼트가 끝나기 직전에 <script> 엘리먼트를 넣어주는 것이라고 생각하고 있다.
CREATE, READ, UPDATE, DELETE 이 4개를 모두 합해서 함축적으로 부르는 단어가 있는데 이것을 CRUD라고 한다.
- CREATE - createElement
영어 단어를 그대로 해석하면 새롭게 '만드는' 것이다. 쓰인다고 한다면 아래와 같이 쓰인다.
document.createElement('div');이걸 이제 Javascript 문법과 함께 쓰이게 된다면 아래와 같이 쓰인다.
let firstDiv = document.createElement('div'); const firstSpan = document.createElement('span');이렇게 됐으면 firstDiv와 firstSpan은 아직 아무것도 연결되어있지 않기 때문에 붕떠있는 요소가 되어버린다. 그러기에 우리는 여기서 APPEND하여 구조에 연결해준다.
- APPEND - append, appendChild
앞에 요소 2개를 만들어줬으니까 연결해줄 일이 생겼다.
document.body.append(firstDiv); document.body.append(firstSpan);append 문법은 python 문법과 비슷한 맥락으로 요소를 위해 추가시켜주는 문법이다. 그리고 이제 연결했기 때문에 그에 대한 내용을 UPDATE 해야한다.
- READ - querySelector, querySelectorAll
UPDATE 하기 전에 READ 해줘야한다.
// id를 위해 (#queryLists), class를 위해 (.tweet)을 사용하겠다는 가정 const listsFirst = document.querySelector(".tweet");내가 <div class="tweet"...>...</div> 이라고 썼다고 가정하면 tweet에 해당되는 정보를 listsFirst 요소에 담는다.
const forTweets = document.querySelectorAll(".tweet");이건 모든 것을 받아오는 것이라고 생각하면 쉽다.
- UPDATE - textContent, classList.add
기존에 생성한 빈 태그를 업데이트하는 것이다. 아래 코드르 보면 textContent를 사용해 문자열을 입력할 수 있다.
console.log(firstDiv) // <div></div> firstDiv.textContent = 'lights'; console.log(firstDiv) // <div>lights</div>아래 코드는 classList.add를 사용해 tweet 클래스에 문자열을 입력하는 것이다.
firstDiv.classList.add("tweet"); console.log(firstDiv) // <div class="tweet">lights</div>'2nd of BEB > Codestates' 카테고리의 다른 글
BEB Section 1 - React 1 (1) 2021.11.30 BEB Section 1 - 고차함수 (2) 2021.11.25 BEB Section 1 - 웹개발 기초 : CSS 레이아웃, Selector (0) 2021.11.22 BEB Section 1 - 웹개발 기초 : CLI(Command Line Interface) (1) 2021.11.21 BEB Section 1 - 웹개발 기초 : HTML/CSS (0) 2021.11.18