부트캠프교육중/DOM11 [DOM] Update update 변경, 갱신 DOM을 이용하여 HTML Element를 변경한다 const oneDiv = document.createElement('div'); console.log(oneDiv) // oneDiv라는 이름의 요소를 만들었다 1. 문자열을 입력한다 textContent를 이용해서 비어있는 div element에 문자열을 입력한다. oneDiv.textContent = 'dev'; console.log(oneDiv) // dev 2. class를 추가한다. css스타일링이 적용될수 있도록, div element에 class를 추가한다. oneDiv.classList.add('tweet') console.log(oneDiv) // dev 다시 append를 이용해 container의 자식요소로.. 2023. 1. 6. [DOM] Read DOM을 이용하여 HTML element를 조회하는 거다 DOM으로 HTML element의 정보를 조회하기 위해서는 querySelector의 첫번째인자로 셀렉터(Selector)를 전달하여 확인할수있다. 셀렉터로는 HTML요소("div"), id("#tweetList"), class(.tweet) 세가지가 가장 많이 사용된다. 1. querySelector querySelector에 '.tweet'을 첫번째인자로 넣으면 클래스이름이 tweet인 HTML element중 첫번째 엘리먼트를 조회할수 있다. querySelector로 클래스이름이 tweet인 HTML요소를 조회한다. const oneTweet = document.querySelector('.tweet') HTML 문서에는 클래스이름이 tw.. 2023. 1. 6. [DOM] Append append 포함 DOM을 이용하여 HTML Element를 부모노드에 포함하는 것 (공중부양하고있는걸 트리구조에 연결한다) 이전단계에서 여기까지 진행했다. const tweetDiv = document.createElement('div') 1. 생성한 tweetDiv를 트리구조에 연결한다. 변수 tweetDiv에 담긴 div요소를 body요소에 넣는다. document.body.append(tweetDiv) 개발자도구에서 확인하면 div가 body안에 담겨있는걸 확인할수있다 2. container의 맨 마지막 자식요소로 tweetDiv를 추가한다. ★★★★★★★ const container = document.querySelector('#container') const tweetDiv = documen.. 2023. 1. 6. [DOM] create DOM을 이용하여 HTML element를 추가한다 1. 새로운 div요소를 만든다 document.createElement('div') 2. 새롭게 생성한 div element를 변수에 할당한다. (변수를 tweetDiv로 정했다) const tweetDiv = document.createElement('div') 3. 현재 tweetDiv라는 요소는 공중부양중이다. 화면에도 변화가 없다. 트리구조에서 아무것도 연결되어있지않은 상태이다. 4. 공중부양중인걸 append에서 작업해서 트리구조에 연결한다. 2023. 1. 6. 이전 1 2 3 다음