반응형
<!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 id ="title">
여기를 변경해주세요
</h1>
<script>
var title = document.getElementById("title");
title.style.color = "white";
title.style.background = "orange";
title.innerHTML = "JavaScript로 문서를 조작";
</script>
</body>
</html>이런식으로 자바스크립트로 HTML 태그의 id값으로 접근해 조작할 수 있습니다.
📝document.getElementById
일단 태그에 id값을 주고 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>
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
<script>
var li = document.querySelector("li");
li.style.color = "red";
li.style.background = "blue";
</script>
</body>
</html>CSS 선택자를 사용해 접근할 수 있습니다.
📝document.querySelector
document.querySelector("CSS선택자")로 접근할 수 있습니다. 가장 편하지만 첫 번째 요소만 선택할 수 있습니다.
<!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>first</li>
<li>second</li>
<li>third</li>
</ul>
<script>
var li = document.getElementsByTagName('li');
li[1].style.backgroundColor = "red";
li[1].style.color ="white";
</script>
</body>
</html>📝document.getELementsByTagName
document.getElementsByTagName으로 태그명으로 접근 가능합니다 이와 같은 경우 인덱스로 다른 요소에 접근이 가능합니다.
<!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>first</li>
<li>second</li>
<li>third</li>
</ul>
<button onClick = "setColor()"> click</button>
<script>
function setColor(){
var li = document.querySelectorAll("li");
for(var i = 0; i < li.length ; i++){
li[i].style.color = "green";
li[i].style.backgroundColor ="orange";
}
}
</script>
</body>
</html>📝onClick, document.querySelectorAll
onClick 이란 클릭시 setColor()라는 메소드가 실행됩니다.
document.querySelectorAll(CSS선택자)로 선택자 각각 다 접근이 가능합니다.
그리고 배열로 잡히게됩니다. 각 인덱스를 for문으로 돌아서 적용시키는 문입니다.
<!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 class="a">first</li>
<li class="a">second</li>
<li class="a">third</li>
</ul>
<button onClick = "setColor()"> click</button>
<script>
function setColor(){
var li = document.getElementsByClassName("a");
for(var i = 0; i < li.length ; i++){
li[i].style.color = "green";
li[i].style.backgroundColor ="orange";
}
}
</script>
</body>
</html>📝getElementsByClassName
위와 동일하지만 class이름으로 가져옵니다 getElementsByClassName을 이용해 같은 클래스 이름으로 배열로 가져옵니다.
반응형