📌 html 동적 제어
<body>
<ul class="list">
<li id="one">1</li>
<li id="two">2</li>
<li id="three">3</li>
</ul>
<script>
var one = document.querySelector('#one')
var list = document.querySelector('.list')
list.innerHTML = '<h1>안녕</h1>'
</script>- 그냥 덮어씌여진다.
추가하려면?
🔥 createElement, AppendChild
var listAdd = document.createElement('li')
listAdd.innerHTML="안녕"
list.appendChild(listAdd)🔥 getAttribute
<body>
<ul class="list">
<li id="one">1</li>
<li id="two">2</li>
<li id="three">3</li>
<a id="google" href="https://google.com">google</a>
</ul>
<script>
var one = document.querySelector('#one')
var list = document.querySelector('.list')
var google = document.querySelector('#google')
console.log(google.getAttribute('href'))
</script>📌 Event
🔥 addEventListener
<body>
<div id="title">임얼쑤</div>
<button class="btn">click</button>
<script>
var btn = document.querySelector('.btn')
var mainTitle = document.querySelector('#title')
function btnClicklHandler(){
mainTitle.style.color='dodgerblue'
}
btn.addEventListener('click',btnClicklHandler)
</script>
</body>- 그냥 event를 바로 추가해줌
🔥 파랑 -> 주황으로 바꾸기
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{font-size : 3rem;}
.btn{font-size : 10rem}
.menu-link{
background: dodgerblue;
}
.menu-active{
background: orange;
}
</style>
</head>
<body>
<nav class="menu">
<a href="#" class="menu-link">menu 1</a>
<a href="#" class="menu-link">menu 2</a>
<a href="#" class="menu-link">menu 3</a>
</nav>
<script>
function clickMenuHandler(){
this.classList.add('menu-active')
}
var menuLinks = document.querySelectorAll('.menu-link')
for(i in menuLinks){
menuLinks[i].addEventListener('click',clickMenuHandler)
}
</script>
</body>🔥 e.target / e.currentTarget
<body>
<nav class="menu">
<a href="#" class="menu-link">menu 1</a>
<a href="#" class="menu-link">menu 2</a>
<a href="#" class="menu-link">menu 3</a>
</nav>
<script>
var menu = document.querySelector('.menu')
function click(e){
console.log(e.target)
console.log(e.currentTarget)
}
menu.addEventListener('click',click)
</script>
</body>
💰 e.target = 현재 클릭
💰 e.currentTarget = this
🔥 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{font-size : 3rem;}
.btn{font-size : 10rem}
.menu-link{
background: dodgerblue;
}
.menu-active{
background: orange;
}
</style>
</head>
<body>
<nav class="menu">
<a href="#" class="menu-link">menu 1</a>
<a href="#" class="menu-link">menu 2</a>
<a href="#" class="menu-link">menu 3</a>
</nav>
<script>
var menu = document.querySelector('.menu')
var currentMenu;
function active(item){
item.classList.add('menu-active')
currentMenu = item;
}
function inActive(item){
item.classList.remove('menu-active')
}
function handler(e){
if(currentMenu){
inActive(currentMenu)
}
active(e.target)
}
menu.addEventListener('click',handler)
</script>
</body>
</html>
티스토리로 이사했습니다! https://imsfromseoul.tistory.com/ + https://camel-man-ims.tistory.com/