🎊학습한 내용

JavaScript
DOM

// Selector
var header = document.getElementsByTagName("header");
var services = document.getElementById("services");
var container = document.getElementsByClassName("container");

// 가장 먼저 나오는것만 반환
var header = document.querySelector("header");
var services = document.querySelector("#services");
var container = document.querySelector(".container");
var servicesContainer = document.querySelector("#services .container");

// innerHTML, outerHTML
header.innerHTML = "<h1>Hello World</h1>";
// textContent
heading.textContent = "Nice!";
// innerHTML 태그포함, textContent 순수글자
heading.innerHTML = "<em>Hello</em> World";
heading.textContent = "<em>Hello</em> World";
//innerText css포함, textContent html 문서 그대로

// createElement()
var h3Test = document.createElement("h3");
h3Test.textContent = "Hello World";

// appendChild(), 마지막 자식에게만 적용
var masthead = document.querySelector('.masthead');
masthead.appendChild(h3Test);

// insertAdjacentHTML();
// https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML 참조
heading.insertAdjacentHTML('afterend', txt);
heading.insertAdjacentHTML('beforeend', txt);
heading.insertAdjacentHTML('afterbegin', txt);
heading.insertAdjacentHTML('beforebegin', txt);

// removeChild(), remove()
headContainer.removeChild(heading);
heading.parentElement.removeChild(heading);
heading.remove();

// first-child, last-child
console.log(headContainer.firstElementChild);
console.log(headContainer.lastElementChild);

// style
heading.style.backgroundColor = "pink";
heading.style.cssText = "color: red; background-color: pink; font-size: 25px";
heading.setAttribute("style", "color: red; background-color: pink; font-size: 25px");
// 응용
heading.setAttribute("id", "heading-test");
document.querySelector("#heading-test").style.backgroundColor = "red";

// className, classList 주로 사용
var headingClass = heading.classList;
heading.classList.add("test1", "test2", "test3")
heading.classList.remove("text-uppercase")

// toggle, 없으면 추가 있으면 제거
heading.classList.toggle("test");
heading.classList.toggle("text-uppercase");

// contains 존재유무
console.log(heading.classList.contains("text-uppercase"));


// 1은 remove 제거 하면 실행되지 않는데 2는 제거해도 전에나온 addevent 실행, 2는 test 저장된 주소가 다름
// 1.
var heading = document.querySelector('.masthead-heading');

function test() {
	console.log("클릭");
}

heading.addEventListener('click', test);
// remove
heading.removeEventListener('click', test);

// 2.
// 참조타입 : 배열, 객체, 함수
// 
heading.addEventListener('click', function test() {
	console.log("클릭");
});

heading.removeEventListener('click', function test() {
	console.log("클릭");
});

// preventDefault();
// 별도의 브라우저 행동을 막기 위해

이하 내용은 github 업로드

🎁해결방법

https://www.w3schools.com/jsref/dom_obj_event.asp