(기초)그래서 뭘 배운거야?/JavaScript
JS-16-DOM : 자바스크립트 이용 디자인 먹이기
Soheny.P
2021. 9. 13. 21:43
728x90
<!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>
<p>tag</p>
<p class="cl1">class tag</p>
<p id="id1">id tag</p>
<button id="btn">버튼</button>
<script>
// DOM (Document Of Model)
/*
- elements, node, attribute 등 다양한 엘리먼트의 속성 또는 엘리먼트 자체 조작 위해 브라우저에서 제공하는 객체
- 이 객체 통해 자바스크립드 내에서 다양한 핸들링 가능
- 자바스크립트는 dom 아용해 이벤트 제작, 엘리먼트 및 노드 추가, 수정, 삭제 가능
*/
// p태그. 0번째. 스타일. 배경컬러 = 옐로
document.getElementsByTagName("p")[0].style.backgroundColor = "yellow";
// 클래스이름, (클래스 중)0번째
let a = document.getElementsByClassName("cl1")[0];
// a의 스타일을 블루로 = 텍스트 컬러
a.style.color = "blue";
// id이름 (번째 안씀!!!! 쓰지마!!1)
let b = document.getElementById("id1");
b.style.border = "1px dotted green";
// 버튼이름 .이벤트추가("클릭하면",기능수행한다(){스타일});
document.getElementById("btn").addEventListener("click",function(){
b.style.fontWeight = "bold";
b.style.fontSize = "3.5rem";
});
</script>
</body>
</html>
여러 요소에 한 번에 디자인 먹이기
<!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>
<p id="id1">이건 id 태그 문장임</p>
<p class="cl1">이건 class 태그 문장임</p>
<p class="cl1">이건 class 태그 문장임</p>
<p class="cl1">이건 class 태그 문장임</p>
<p class="cl1">이건 class 태그 문장임</p>
<button id="btn1">버튼임</button>
<button id="btn2">버튼임</button>
<script>
const id1 = document.querySelector("#id1");
const cl1 = document.querySelectorAll(".cl1");
document.querySelector("#btn1").addEventListener("click",function(){
id1.style.fontSize = "3.5rem";
});
// 여러개 셀렉터 받을 때 querySelectorAll
document.querySelector("#btn2").addEventListener("click",function(){
cl1[0].style.backgroundColor = "cyan";
cl1[1].style.backgroundColor = "cyan";
cl1[2].style.backgroundColor = "cyan";
cl1[3].style.backgroundColor = "cyan";
});
</script>
</body>
</html>
728x90