프도

const container = document.querySelector('#container') const tweetDiv = document.createElement('div') container.append(tweetDiv) tweetDiv.remove() // 이렇게 append 했던 엘리먼트를 삭제할 수 있다. removeChild 도 있는데 remove와 차이가 있다 따로 블로그 하겠습니다

console.log(tweetDiv)// tweetDiv.textContent = 'dev';//textContent를 이용해 문자열을 입력합니다. console.log(tweetDiv) // dev// 기존에 생성한 빈 div 태그를 업데이트하여, 보다 다양한 작업을 할 수 있습니다. textContent 를 사용해서, 비어있는 div 엘리먼트에 문자열을 입력합니다. 앞서 생성한 div 엘리먼트를 container에 append 했을 때, CSS 스타일링이 적용되지 않았습니다. CSS 스타일링이 적용될 수 있도록, div 엘리먼트에 class를 추가합니다. tweet.classList.add('tweet') console.log(oneDiv) // dev tweet 클래스를 추가합니다

DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의 첫 번째 인자로 셀렉터(Selector)를 전달하여 확인할 수 있습니다. const oneTweet = document.querySelector('.tweet') //이렇게하면 클리스 이름 tweet인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회할 수 있다. const tweets = document.querySelectorAll('.tweet') // HTML 문서에는 클래스 이름이 tweet 인 엘리먼트가 여러 개 있는 데, 변수 oneTweet 에 할당된 엘리먼트는 단 하나입니다. 여러 개의 엘리먼트를 한 번에 가져오기 위해서는, querySelectorAll 을 사용합니다 다음 코드를 입력하면 container의 ..

append는 여러 개의 자식 엘리먼트를 동시에 추가 기능 appendChild는 한 번에 하나의 자식 엘리먼트 추가 기능 remove는 반환 값 X, 자식 레벨에서 접근해도 노드 삭제 가능 removeChild는 반환 값 O, 부모 레벨에서 접근해야 노드 삭제 기능

이번주에 Dom으로 HTML을 조작하는 방법중 기초적인 새로운 element를 만들겠다 let newDiv = document.createElement('div') // 여기서는 div element를 변수 newDiv 에 할당합니다 근데 이렇게하면 화면에 어떤 변화도 나타나지 않습니다. 아직 화면에 변호가 없는 게 당연합니다. newDiv 라는 요소는 현재 공중부양 중입니다. 위 그림처럼 공중에 떠있는 엘리먼트를 확인하기 위해서는 APPEND 로 newDiv 트 리구조에 연결한다. 그러면 document.body.append(newDiv)//변수 newDiv에 담기 새로운 엘리먼트를 body 엘리먼트에 append 한다 그러면 태그에 안에 바로 자식으로 추가 가능 하다

DOM 구조에서도 회사의 조직도와 유사한 모습을 발견할 수 있습니다. body가 가장 상위에 있고, 아래에 여러 구성요소가 부모-자식 관계를 가지고 있습니다. 이 관계를 그려보면 아래와 비슷한 구조가 만들어집니다. [그림] DOM의 관계도 이런 자료 구조를 컴퓨터 공학에서는 트리 구조라고 합니다. 트리 구조의 가장 큰 특징은 부모가 자식을 여러 개 가지고, 부모가 하나인 구조가 반복되는 점입니다. 즉, 부모가 가진 하나 또는 여러 개의 자식 엘리먼트를 조회하는 코드를 작성한다면, 여러 번 반복해서 실행하는 코드가 필요합니다. function consoleLogAllElement(element){ // nav의 class 이름을 console.log 합니다. // nav의 자식 엘리먼트가 있는지 검색합니다..

d의 이름이 news-contents 인 div 엘리먼트의 부모 엘리먼트는 무엇인가요? [그림] id가 news-contents 인 div 엘리먼트와 body 엘리먼트의 관계 id가 news-contents 인 div 엘리먼트는 body 엘리먼트의 자식 엘리먼트입니다. 반대로 body 엘리먼트는 id가 news-contents div 엘리먼트의 부모 엘리먼트입니다. 이 관계를 자바스크립트에서 확인합니다. id가 news-contents 인 엘리먼트를 조회하려면, document.body.children 의 첫 번째 엘리먼트를 조회합니다. [그림] id가 news-contents인 div 엘리먼트 document.body 의 children을 조회할 때마다, 매번 document.body 로부터 찾아가는 ..

body 엘리먼트의 자식 엘리먼트(element)는 총 몇 개인가요? body 엘리먼트의 자식 엘리먼트는 총 3개입니다. id가 nav, news-contents, footer 인 3가지 엘리먼트입니다. [그림] body 요소의 자식 요소는 3개입니다. 그림으로 표현하면, 쉽게 이해할 수 있습니다. 그러나 컴퓨터에게는 이 사실을 어떻게 전달할까요? 자바스크립트에서 DOM은 document 객체에 구현되어 있습니다. 브라우저에서 작동되는 자바스크립트 코드에서는, 어디에서나 document 객체를 조회할 수 있습니다. 한번, body를 찾아보겠습니다. [그림] 크롬 개발자도구에서 document.body를 조회합니다. DOM 구조를 조회할 때에는 console.dir 이 유용합니다. console.dir 은..

[그림] HTML과 DOM의 구조 이번 유닛에서는 HTML을 바라보는 또 다른 관점, DOM(Document Object Model)을 학습합니다. DOM은 프로그래머 관점에서 바라 본 HTML 입니다. DOM을 이해하고 조작할 수 있으면, HTML을 단순한 문서에서 웹 앱으로 업그레이드할 수 있습니다. DOM은 브라우저 환경에서 자바스크립트를 이용해 HTML을 조작할 수 있습니다. HTML 문서에 이미 작성되어 있는 엘리먼트에 접근하거나, 새로운 엘리먼트를 생성 또는 삭제할 수 있습니다. 이번 유닛을 통해 DOM을 이해하고, HTML과 자바스크립트를 연결하는 방법을 알아봅니다. 처음으로 DOM을 학습할 때에는 코드로 DOM을 조작하는 일이 낯설 수밖에 없습니다. 이번 유닛의 콘텐츠를 따라 학습하면, 코..