[UMC]DOM
Web 4주차 워크북
📝 실습 체크리스트
const $commentList = document.querySelector("#commentsList");
const commentItemTemplate = (newComment) => {
return `
<li class = "commentItem">
<img src="https://yt3.ggpht.com/ytc/AKedOLRUYX2BKmVYp8CvT7Gc657o8gKWwZzOEFzJ6ChWRKjk_Q=s88-c-k-c0x00ffffff-no-rj" class = "profileImg"/>
<div>
<p id = "commentName">Mary Shen</p>
<p>${newComment}</p>
<div class="flex">
<button class = "commentBtn">
<span class = "commentIcon">
<svg viewBox="0 0 16 16" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope yt-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope yt-icon"><path d="M12.42,14A1.54,1.54,0,0,0,14,12.87l1-4.24C15.12,7.76,15,7,14,7H10l1.48-3.54A1.17,1.17,0,0,0,10.24,2a1.49,1.49,0,0,0-1.08.46L5,7H1v7ZM9.89,3.14A.48.48,0,0,1,10.24,3a.29.29,0,0,1,.23.09S9,6.61,9,6.61L8.46,8H14c0,.08-1,4.65-1,4.65a.58.58,0,0,1-.58.35H6V7.39ZM2,8H5v5H2Z" class="style-scope yt-icon"></path></g></svg>
</span>
</button>
<button class = "commentBtn">
<span class = "commentIcon">
<svg viewBox="0 0 16 16" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope yt-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope yt-icon"><path d="M3.54,2A1.55,1.55,0,0,0,2,3.13L1,7.37C.83,8.24,1,9,2,9H6L4.52,12.54A1.17,1.17,0,0,0,5.71,14a1.49,1.49,0,0,0,1.09-.46L11,9h4V2ZM6.07,12.86a.51.51,0,0,1-.36.14.28.28,0,0,1-.22-.09l0-.05L6.92,9.39,7.5,8H2a1.5,1.5,0,0,1,0-.41L3,3.35A.58.58,0,0,1,3.54,3H10V8.61ZM14,8H11l0-5h3Z" class="style-scope yt-icon"></path></g></svg>
</span>
</button>
<button class = "commentBtn">
답글
</button>
</div>
</div>
</li>
`;
};
const newComment = commentItemTemplate("안녕하세요. 반갑습니다.");
$commentList.insertAdjacentHTML("afterbegin", newComment);
🔥 트러블 슈팅(실패한 경험도 성장을 위한 경험!)
- 트러블 슈팅 양식
[ 문제 원인 ]
[ 해결 방안 ]
[ 참고 자료 ]
핵심 키워드 🎯
-
DOM과 JavaScript
- DOM(Document Object Model) : 웹 페이지에 대한 인터페이스
- DOM은 JavaScript를 이용하여 조작할 수 있는 객체를 사용하여 원본 html 문서를 해석하는 방법
- DOM은 브라우저가 JavaScript를 이용해 웹 페이지를 조작할 수 있도록 제공해주는 요소일 뿐임
- Document Object Model의 Document는 html이지만 우리가 JavaScript를 이용해 웹 페이지를 조작하는 것은 엄밀히 말하면 원본 html 문서를 조작하는 것이 아니라 DOM을 조작하는 것
-
Element
예시<body>,<a>,<p>등과 같은 노드- window.document 등과 같은 Document 노드
- 줄바꿈과 공백을 포함한 텍스트인 Text 노드
- class=”cool”과 같은 Attribute 노드 주요 속성 : Element.classList, Element.id, Element.innerHTML, Element.outerHTML 등 주요 메소드 : EventTarget.addEventListener(), Element.insertAdjacentElement(), Element.insertAdjacentHTML(), Element.querySelector(), Element.remove() 등
-
HTML 요소에 접근
- getElement : 유사 배열(HTMLCollection) 형태로 출력됨
const $body = document.getElementsByTagName("body"); const $container = document.getElementsByClassName("container"); const $cityList = document.getElementById("cityList"); const $cities = $cityList.getElementsByTagName("li"); - querySelector : 조건에 만족하는 첫 번째 원소만 출력
querySelectorAll : 조건에 만족하는 모든 원소 출력, 유사 배열(NodeList) 형태const $cities = $cityList.querySelector("li"); const $cities = $cityList.querySelectorAll(".city"); const $city = $cityList.querySelector("#city");forEach : 배열이 아닌 NodeList 형태일 때 요소를 출력할 수 있음
$cities.forEach((city) => console.log(city.innerText));
- getElement : 유사 배열(HTMLCollection) 형태로 출력됨
-
유사 배열을 배열로 바꾸기
- spread operator
const newCities = [...$cities]; - Array.from
const newCities = Array.from($cities);
- spread operator
- 요소 출력
innerHTML & innerText
$body[0].innerHTML; $container[0].innerText; -
스타일 변경
Element.stlye.속성 = ‘값’;$body[0].style.backgroundColor = "teal"; $cityDiv.style.color = "grey"; -
JavaScipt로 리스트 만들기
-
document.createElement(‘태그’);
생성된 부모 Element.appendChild(생성된 자식 Element);const worstCity = document.createElement("ul"); const worstCityDiv = document.createElement("div"); const worstCitySubTitle = document.createElement("h2"); const worstCityArr = ["A", "B", "C", "D"]; worstCitySubTitle.innerText = "< Worst 5 >"; worstCityDiv.appendChild(worstCitySubTitle); worstCityArr.map((city) => { const worstCityItem = document.createElement("li"); worstCityItem.innterText = city; worstCity.appendChild(worstCityItem); }); worstCityDiv.append(worstCity); $container[0].appendChild(worstCityDiv); //class 추가 worstCityDiv.classList.add("city"); //class 삭제 //worstCityDiv.classList.remove('city'); //속성 추가 worstCity.setAttribute("name", "worstcity"); -
element.insertAdjacentHTML(position, text);
const worstCityList = ` <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> `; $cityDiv.insertAdjacentHTML("beforeend", worstCityList);
-
4주차 수업 후기 📢
- 4주차 수업을 듣고 서로 느낀 점을 이야기해주세요!
- 핵심 키워드에 대해 완벽하게 이해했는지? 혹시 이해가 안 되는 부분은 뭐였는지? 서로 이야기해주세요!
!주의사항
- 과제 피드백 기반 진행입니다 - 한명씩 본인의 과제를 발표하는 시간 그리고 해온 과제에 대한 피드백을 하는 시간 (ex:전 이렇게 생각해서 이런 부분 다르게 해왔는데 저것도 괜찮은 것 같아요!)이 무조건 기반이 되어야 합니다!
- 부가적으로 워크북에서 제공되는 키워드 혹은 강의에서 들은 디테일 적인 부분에서 더 토의해봐도 좋을 것 같습니다
논의해보면 좋은 것들 🔥
- JavaScript가 브라우저에서 동작하는 원리에 대해서 알아보기
- JavaScript가 HTML을 제어하는 과정에 대해서 알아보기
- appendChild와 insertAdjecentHTML의 차이 알아보기
댓글남기기