section1/unit11/DOM(9/13)

블로깅 주제

JS/브라우저 DOM

1. 지금 현재, 당신의 기분이나 느낌을 표현해 주세요.

연휴를 보내고 오니 아침에 잠 깨는데 애를 먹었다. 벌써 unit1이 끝나가는게 보인다. unit1 끝날 때까지 최선을 다해서 공부한 후 뿌듯하게 회고록을 작성하고 싶다! 조바심 가지지 말자. 차근차근!

2. 오늘 무엇을 학습한 내용 중 지금 떠올릴 수 있는 단어를 모두 나열해 주세요.

DOM, CRUD(Create, Read, Update and Delete)

3. 2에서 작성한 단어를 가지고, 오늘의 학습 내용을 설명해 보세요.

- DOM

HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model

DOM을 활용하여 HTML을 조작할 수 있다.

뷰 포트에 무엇을 렌더링 할지 결정하기 위해 사용
페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용

DOM은 트리 구조를 갖는다. document 객체를 통해 HTML(root document)에 접근할 수 있다.

- <script> 요소는 등장과 함께 실행된다

웹 브라우저가 작성된 코드를 해석하는 과정에서 <script> 요소를 만나면, HTML 해석을 잠시 멈추고 <script> 요소를 먼저 실행

- console.dir()

console.log 와 달리 DOM을 객체의 모습으로 출력

- 자식 요소 조회

document.body.children

따로 변수 선언을 해서 이 정보를 저장해두면, 주소를 참조하기 때문에 언제든지 접근 가능

- 노드의 부모 요소 조회

Node.parentElement

- DOM의 트리구조

부모가 가진 하나 또는 여러 개의 자식 엘리먼트를 조회하는 코드를 작성한다면, 여러 번 반복해서 실행하는 코드가 필요

- DOM 다루기 = CRUD(Create, Read, Update and Delete)

DOM을 JavaScript로 조작하여 HTML Element를 추가하거나 삭제, 혹은 내용을 변경할 수 있다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Document</title>
    </head>
    <body>
        <div id="container">
            <h2>Tweet List</h2>
            <div class="tweet">hello</div>
            <div class="tweet">world</div>
            <div class="tweet">code</div>
            <div class="tweet">states</div>
        </div>
    </body>
</html>

1. CREATE

document.createElement(HTML요소)
지정된 HTML 요소를 생성한다.

document.createElement('div')
<div></div>

div element를 변수 tweetDiv 에 할당

const tweetDiv = document.createElement('div')

2. APPEND

.append()
해당 노드에 새로운 요소를 부여한다.

CREATE에서 만든 tweetDiv 라는 변수는 아직 "공중부양" 중. append를 사용해 변수 tweetDiv 를 <body> 에 넣기

document.body.append(tweetDiv)

안에 내용 넣기

tweetDiv.textContent = 'study'

새롭게 만든 div를 body에 넣었기 때문에 다른 요소들처럼 container에 포함되지 않은 형태로 출력됨

-> 어떻게 해야 container 엘리먼트에 div를 넣어 다른 엘리먼트처럼 출력시킬 수 있을까?

3. READ

document.querySelector()
특정 선택자(id나 class)를 가진 첫번째 요소를 선택한다.

id 태그를 조회할 때는 이름 앞에 #을 붙힌다.
ex) document.querySelector('#tweet')
class 태그를 조회할 때는 이름 앞에 .을 붙힌다.
ex) document.querySelector('.tweet')

document.querySelectorAll()
특정 선택자(id나 class)를 가진 모든 요소를 선택한다.

id 태그를 조회할 때는 이름 앞에 #을 붙힌다.
ex) document.querySelectorAll('#tweet')
class 태그를 조회할 때는 이름 앞에 .을 붙힌다.
ex) document.querySelectorAll('.tweet')

querySelector 에 '.tweet' 을 첫 번째 인자로 넣으면, 
클래스 이름이 tweet 인 HTML 엘리먼트 중 '첫 번째' 엘리먼트를 조회할 수 있다
const oneTweet = document.querySelector('.tweet')

여러 개의 엘리먼트를 한 번에 가져오기 위해서는, querySelectorAll 을 사용한다
클래스 이름이 tweet 인 '모든' HTML 엘리먼트를 유사 배열로 받아온다
const tweets = document.querySelectorAll('.tweet')

* 유사 배열(Array-like Object) = 배열 아닌 배열 느낌..

생성한 div엘리먼트를 body가 아닌 container 엘리먼트에 넣기

id가 container인 엘리먼트를 조회하여 변수에 할당하고
그 변수에 append 메소드를 통해 생성한 div엘리먼트를 연결한다
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)

새롭게 추가된 tweetDiv 는 별도의 class 가 지정되어 있지 않아, CSS를 이용한 스타일링이 적용되지 않음

-> 어떻게 해야 다른 엘리먼트처럼 스타일링 된 상태로 출력시킬 수 있을까?

4. UPDATE

text.Content

console.log(oneDiv) // <div></div>
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>

classList.add()

css를 적용하기 위해 div엘리먼트 class 속성을 추가하기

oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>

setAttribute()

비슷한 방법으로 id나 class이외의 다른속성을 추가할 수 있는 setAttribute 함수가 있다

element.setAttribute('attribute_name','attribute_value');
함수의 인자로 속성의 키와 값을 입력받아 엘리먼트에 속성을 추가한다

ex)oneDiv.setAttribute( 'href', 'https://velog.io' );

- innerHTML vs innerText vs textContent
innerHTML은 요소 내에 있는 HTML과 XML 모두를 의미
innerText는 요소 내에서 사용자에게 보여지는 text를 의미
textContent는 script나 style 태그와 상관없이 해당 노드가 가지고 있는 text를 의미

https://velog.io/@kim_unknown_/JavaScript-Difftext

[JavaScript] innerHTML, innerText, textContent 차이

innerHTML, innerText, textContent 속성은 텍스트를 읽어오고 설정할 수 있다는 점에서 비슷해보이지만, 조금씩 다른 차이가 있고 이 차이를 잘 알고 써야한다.먼저 innerHTML은 'Element'의 속성으로, element내

velog.io

5. DELETE

.remove()
태그를 삭제한다.

let container = document.querySelector('#container')
let tweetDiv = document.createElement('div') // <div></div>
container.append(tweetDiv) // 부모인 container 에 tweetDiv 를 넣는다.
tweetDiv.remove() // 이렇게 append 했던 엘리먼트를 삭제할 수 있다.

여러개의 엘리먼트 삭제시 innerHTML 로 간단하게 모두 삭제

document.querySelector('#container').innerHTML = '';

innetHTML은 간편하지만 보안상의 문제가 있다.

.removeChild()
태그의 자식만 삭제한다. 반복문을 통해 모든 자식엘리먼트를 삭제한다.

자식 요소가 남아있지 않을 때까지, 첫 번째 자식 요소를 삭제

const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

제목에 해당하는 H2 "Tweet List"까지 삭제됨.

이를 방지하기 위해,

container의 자식 요소가 1개만 남을 때까지, 마지막 자식 요소를 제거하거나

const container = document.querySelector('#container');
while (container.children.length > 1) {
  container.removeChild(container.lastChild);
} =

직접 클래스 요소가 "tweet"인 요소만 제거한다.

const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
    tweet.remove();
})

document.querySelectorAll('.tweet').forEach(e => e.remove());

// or
for (let tweet of tweets){
    tweet.remove()
}

- remove() vs removeChild()

remove() : 노드를 메모리에서 삭제하고 종료
removeChild() : 노드를 삭제하는 것이 아니라 메모리에 해당 노드는 그대로 존재하며, 부모 노드와의 부모-자식관계를 끊어 DOM 트리에서 해제하는 것

- element vs node

node는 element의 상위 개념이다.

element는 node의 한 종류로, html 문서에서 <div>, <p>, <title>과 같은 태그를 사용해서 작성된 node이다.

https://hianna.tistory.com/711

[Javascript] node와 element의 차이

Javascript에서 DOM을 다루다 보면 node와 element가 자주 등장합니다. 이 2가지를 다루는 방법이 조금 달라서 헷갈리는 경우가 많은데, 이번 포스팅에서는 node와 element의 차이점을 정리해 보도록 하겠

hianna.tistory.com

- children vs childNodes

children은 현재 요소의 자식 요소가 포함된 HTML Collection을 반환한다.(자식 요소에 접근)
childNodes는 현재 요소의 자식 노드가 포함된 NodeList를 반환한다.(자식 노드에 접근)

https://about-tech.tistory.com/entry/Javascript-Element%EC%99%80-Node-%EC%B0%A8%EC%9D%B4%EC%A0%90

[Javascript] Element와 Node 차이점?

What is diffrence between Element and Node in DOM? Element vs Node 차이점 HTML을 구성하는 요소를 Element 혹은 Node 라고 부른다. 비슷하게 들리지만 Element와 Node는 분명히 다른 개념이다. Element와 No..

about-tech.tistory.com

저작자표시 비영리 변경금지

'코드스테이츠 SEB FE 41기 > Section 별 내용 정리' 카테고리의 다른 글

section1/unit12/Coz’ Mini Hackathon(9/15~16) (0)	2022.09.16
section1/unit11/DOM(9/14) (0)	2022.09.14
section1/unit10/Javascript 핵심 개념과 주요 문법(9/8) (0)	2022.09.08
section1/unit10/Javascript 핵심 개념과 주요 문법(9/7) (0)	2022.09.06
section1/unit10/Javascript 핵심 개념과 주요 문법(9/6) (0)	2022.09.06

코린이 삐약이의 성장일기

section1/unit11/DOM(9/13)

블로깅 주제

1. 지금 현재, 당신의 기분이나 느낌을 표현해 주세요.

2. 오늘 무엇을 학습한 내용 중 지금 떠올릴 수 있는 단어를 모두 나열해 주세요.

3. 2에서 작성한 단어를 가지고, 오늘의 학습 내용을 설명해 보세요.

'코드스테이츠 SEB FE 41기 > Section 별 내용 정리' 카테고리의 다른 글

티스토리툴바

section1/unit11/DOM(9/13)

블로깅 주제

1. 지금 현재, 당신의 기분이나 느낌을 표현해 주세요.

2. 오늘 무엇을 학습한 내용 중 지금 떠올릴 수 있는 단어를 모두 나열해 주세요.

3. 2에서 작성한 단어를 가지고, 오늘의 학습 내용을 설명해 보세요.

'코드스테이츠 SEB FE 41기 > Section 별 내용 정리' 카테고리의 다른 글

'코드스테이츠 SEB FE 41기/Section 별 내용 정리' Related Articles

티스토리툴바