재밌는 이벤트의 세계, JavaScript
<!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>
</head>
<body>
<h1>JavaScript</h1>
<script>
let c = [1, 2, 3, 4, 5];
console.log(c.toString());
console.log("indexOf() =================>");
console.log(c.indexOf(1).toString());
// 해당 값을 인덱스에서 찾을 수가 없음
console.log(c.indexOf(6).toString());
console.log(c.lastIndexOf(4).toString());
// 해당 값을 인덱스에서 찾을 수가 없음
console.log(c.lastIndexOf(10).toString());
</script>
</body>
</html>
HTML문서를 제어하는 내장 객체
let element = document.getElementById("id속성값");
<!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>
</head>
<body>
<div id="box"></div>
<script>
let element = document.getElementById("box");
</script>
</body>
</html>
객체화된 HTML 요소의 innerHTML 속성을 사용하면 해당 태그에 속해있는 내용을 새롭게 설정 할 수 있다.
element.innerHTML = "<h1>Hello</h1>";
<!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>
</head>
<body>
<div id="box"></div>
<script>
document.getElementById("box").innerHTML = "<h1>Hello</h1>";
</script>
</body>
</html>
element.style.CSS대응속성 = "CSS적용값";
document.getElementsByTagName('태그');
document.getElementsById('아이디이름');
let element = document.getElementsByClassName("클래스이름");
<!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>
</head>
<body>
<ul>
<li>HTML</li>
<li class="active">CSS</li>
<li class="active">JAVASCRIPT</li>
</ul>
<script>
let lis = document.getElementsByClassName('active');
for(let i = 0; i < lis.length; i++){
lis[i].style.color = "tomato";
}
</script>
</body>
</html>
출처
https://media.giphy.com/media/qqtvGYCjDNwac/giphy.gif
https://media.giphy.com/media/26tPplGWjN0xLybiU/giphy.gif