핵심 키워드 🎯
- DOM과 JavaScript
- querySelector
- appendChild
- insertAdjacentHTML
DOM 이란?
문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스
이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.
JavaScript는 브라우저가 읽고 어떤 작업을 할 수 있는 언어
DOM은 바로 이 작업이 이루어지는 장소
사실 우리가 "JavaScript로 하는 것" 이라고 생각하는 것은 정확히는 "DOM API" 입니다.
정리하자면, DOM은 브라우저에 의해 기록되는 모든 것입니다. JavaScript는 이를 조작할 수 있는 문법이고 언어일 뿐이며, 이는 Node.js 등의 브라우저 밖의 DOM API가 없는 환경에서도 동작할 수 있습니다.
출처
querySelector
DOM 객체에 접근할 수 있는 Javascript객체 중 하나
-
document.getElementById("id명")
해당 id명을 가진 요소 하나를 반환합니다. -
document.querySelector("선택자")
해당 선택자를 만족하는 요소 하나를 반환합니다. -
document.getElementsByClassName("class명")[순서]
해당 class명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환합니다. -
document.getElementsByTagName("태그명")[순서]
해당 태그명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환합니다. -
document.querySelectorAll("선택자명")[순서]해당 선택자를 만족하는 모든 요소들을 배열에 인덱스에 맞는 요소를 반환합니다.
여러가지 접근 메서드가 있으며
//querySelector은 유사배열, 노드리스트로 받아옴
//노드리스트는 forEach 지원
const $citys = document.querySelector('li');
$citys.forEach(city => console.log(city.innerText));
//html collection은 forEach 지원 X map으로 접근
const $citys = document.getElementsByTagName('li');
newCities.map(city => console.log(city.innerText));
// spread operator, Array.from를 사용 유사배열을 배열로 전환
let newCities = [...$citys]
console.log(newCities)
newCities.map(city => console.log(city.innerText));
newCities = Array.from($citys);
newCities.map(city => console.log(city.innerText));
//자바스크립트에서의 스타일변환
const $body = document.getElementsByTagName('body');
$body[0].style.backgroundColor = 'teal';
let $cityDiv = document.querySelector('#cityList');
$cityDiv.style.color = 'gray'
//Why $body[0], $cityDiv 접근을 다르게 하는가?
appendChild 로 태그, 요소 추가하기.
let worstCity = document.createElement('ul');
const worstCityArr = ["카이로","런던","리스본","시드니"];
//ul태그를 생성하고, li태그를 생성 및
//innerText 변환한 객체 만들고 넣기
worstCityArr.map(city => {
const worstCityItem = document.createElement('li');
worstCityItem.innerText = city;
worstCity.appendChild(worstCityItem);
})
$cityDiv = document.querySelector('.city');
$cityDiv.appendChild(worstCity);
//ClassName으로 받아와서 배열취급
$container = document.getElementsByClassName('container');
const worstCityDiv = document.createElement('div');
const worstCitySubTitle = document.createElement("h2");
worstCitySubTitle.innerText = "< Worst 5 > ";
worstCityDiv.appendChild(worstCitySubTitle);
worstCityDiv.appendChild(worstCity);
//해당 요소의 맨 마지막 자식 노드로 추가함.
$container[0].appendChild(worstCityDiv);insertAdjacentHTML
appenChild, beforechild와 비슷하게 작동
MDN 사이트
- 특정 위치에 DOM tree 안에 원하는 node들을 추가 한다. 이미 사용중인 element 는 다시 파싱하지 않는다. 그러므로 element 안에 존재하는 element를 건드리지 않는다.
element.insertAdjacentHTML(position, text);position과 text 둘다 String형으로 집어넣기
//insertAdjacentHTML를 사용하여 자식 추가
worstCityList = "<ul><li>카이로</li><li>런던</li></ul>";
$cityDiv.insertAdjacentHTML('beforeend',worstCityList);JS로 DOM에 클래스와 속성 추가하기
//클래스 추가
worstCityDiv.classList.add("city");
worstCityDiv.classList.remove("city");
//속성추가
worstCityDiv.setAttribute('name','worstCity');
console.log(worstCityDiv);실습 체크리스트
- document
- getElementsByTagName, getElementsByClassName, getElementById 를 사용하여 코드를 아래에 작성해주세요
- innerText :
- spread operator :
- Array.from :
- element
- classList :
- setAttribute :
- appendChild :
- insertAdjacentHTML :
유투브 html, css 클론 코딩
클론 코딩한 쵸단유투브
댓글추가 JS로 구현하기
// dom 조작은 $붙임
const $commentList = document.querySelector("#commentsList");
const commentItemTemplate = (newId, newComment,Imgurl) => {
return `
<li class="commentItem">
<img src="${Imgurl}"
class="profileImg" />
<div>
.....
</div>
</li>`
;
}
const newComment = commentItemTemplate("이해찬","너무 좋아요..!","https://yt3.ggpht.com/yti/APfAmoFjoi5B8bE0j5805xHwq1nnfHaRErC54Tcwrre3=s88-c-k-c0x00ffffff-no-rj-mo");
console.log(newComment);
// 댓글은 최신댓글이 맨 위로 올라옴, 최신부터 오래된 순으로 정렬
$commentList.insertAdjacentHTML("afterbegin",newComment);논의해보면 좋은 것들 🔥
- JavaScript가 브라우저에서 동작하는 원리에 대해서 알아보기
- JavaScript가 HTML을 제어하는 과정에 대해서 알아보기
- appendChild와 insertAdjecentHTML의 차이 알아보기
