●DOM
○DOM 구조
○Element 요소 접근
querySelectorAll(selector)
: 유사배열(추가,삭제,삽입x)
<!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> 금요일 </h1>
<h1> 토요일 </h1>
<script>
// 금요일은 파란색
// 토요일은 빨강색
let h1Array = document.getElementsByTagName("h1");
console.log(h1Array);
h1Array[0].style.color="blue";
h1Array[1].style.color="red";
</script>
</body>
</html>
○Element 요소 접근 실습
<!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>사과</li>
<li>멜론</li>
<li>파인애플</li>
</ul>
<script>
let fruits = document.getElementsByTagName("li");
fruits[0].style.color="red";
fruits[1].style.color="green";
fruits[2].style.color="yellow";
</script>
</body>
</html>○getElementById()
<!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>
</style>
</head>
<body>
<p id = "txt"> Hello JavaScript </p>
<!-- 버튼 태그의 onclick 속성 이용해서 JavaScript의 함수를 바로 적용 시킬 수 있다. -->
<button id="btn" onclick="change()">클릭</button>
<script>
// DOM(Document Object Model)
// html 코드 내에 있는 태그를
// JavaScript 코드로 사용할 수 있도록 객체형태로 가져오자
// 버튼이 클릭 됐을때 p태그의 글자색과 크기를 바꾸고 싶어요
// getElementById는 아이디를 불러오는거기 때문에 #안써도 됨
document.getElementById("btn").addEventListener("click",function(){
// 태그를 JavaScript에서 사용가능한 객체로 가져와서 변수에 저장 시켜주자
let p = document.getElementById("txt");
p.style.color="blue";
p.style.fontSize="25px";
})
function change(){
let p = document.getElementById("txt");
p.style.color="red";
p.style.fontSize="5px";
}
</script>
</body>
</html>
속성에 쓰인 style이 먼저 실행되지만 나중에 쓰여진 p.style.color ="blue" 로 인해 파란색이 나옴
○getElementById() 실습
<!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>
#shape{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id ="shape"></div>
<button onclick="rec()">사각형</button>
<button onclick ="cir()">원</button>
<script>
let div = document.getElementById("shape");
// 직사각형으로 바꾸는 기능
function rec(){
div.style.backgroundColor="red";
div.style.width = "400px";
div.style.borderRadius = "0%";
}
// 원으로 바꾸는 기능
function cir(){
div.style.backgroundColor="yellow";
div.style.borderRadius = "50%";
div.style.width = "200px";
}
</script>
</body>
</html>
코딩공부