JS에서 내용 접근하기
in Programming on JavaScript
1. JS에서 ID로 HTML에 접근하기
사진에서 보는 것과 같이 JS에서 HTML 엘레멘트에 접근하는 방법은 크게 네가지 이다.
document.getElementsByClassName("ClassName");
document.getElementById("Id");
document.getElementsByName("Name");
document.getElementsByTagName("TagName");
내가 접근하고 싶은 요소의 타입에 따라서 적절히 사용하면된다.
자 본론! (Let’s get down to business)
html body안에 있는 아래 요소에 접근해 내용을 바꾸려고 한다. HTML 코드는 아래와 같다.
<!--body-->
<div id="htmlElement">
이것은 html element입니다.
</div>
이 요소는 id를 가지므로 위 네가지 경우 중 document.getElemetById(‘htmlElemet’) 를 사용해서 가져올 수 있다.
일단 진짜 되는지 찍어보면,
<!--head-->
<script>
window.onload = function(){
//window.onload 안쓰면 null이 나온다. 왜냐면 페이지가 로드 되기 전에 가져와지기 때문이다.
alert(document.getElementById('htmlElement'))
}
</script>
진짜 된다. Object로 가져와 진다.
이 이 object의 innerHTML이라는 속성이 객체의 내용을 가져와 준다.
<!--head-->
<script>
window.onload = function(){
//document.getElementById('htmlElement') 에서 .innerHTML 추가.
alert(document.getElementById('htmlElement').innerHTML)
}
</script>
단순하게 요소OBJECT.innerHTML = “새로운 내용” 하면 내용이 바뀐다. innerHTML 속성이 등호 좌측에 가면 html에 내용을 쓰는게 되고, 우측에 가면 내용을 가져오는게 된다. 따라서 아래와 같이 해주면 html 내용을 바꿀 수 있다.!
<!--head-->
<script>
window.onload = function(){
document.getElementById('htmlElement').innerHTML = "안녕" ; //요게 뽀인트
}
</script>
※ <input 태그에 접근하려면 innerHTML 이 아니라 value를 사용해야한다.
2. JS에서 CSS에 접근하기
가장 쉬운 방법
- html 태그에 onclick =”js함수” 를 넣는다. (html 안에 js가 섞여있으므로 그렇게 좋은 코드는 아니다. 그러나 이렇게 많이 사용되기 때문에 알아두면 좋다.)
배경을 클릭하면 배경색이 빨간색으로 바뀌도록 만들어 보자. (내용이 아니라 디자인이니까 css를 바꿔야한다.)
원래는 핑크색 배경을 가진 wrapper이다.
div.wrapper{
width : 800px;
height : 600px;
padding: 10px;
background-color: pink; //pink색!
}
이 wrapper을 클릭하면, change(‘red’) 가 실행되어서 색이 바뀌게 된다.
<div class="wrapper" onclick ="change('red');">
내용
</div>
change(‘red’) 는 다음과 같은 js 함수이다. wrapper class를 배열로 가져온다. 우리 코드에는 wrapper 클래스를 가진 요소가 하나므로, 하나만 가져오게되어 data[0]이 바로 우리가 접근하고 싶은 요소가 된다. (만약 wrapper 클래스가 여러개면 배열로 각각의 요소가 반환되고, 위에서 부터 0번방, 1번방, 2번방… 이렇게 들어가게 된다.)
data[0].style.backgroundColor = color; 이렇게 .style로 css 속성에 접근할 수 있다.! 더 많은 속성들이 있는데 그건 w3school에서 필요할 때마다 그때 그때 확인하면서 배우자.
<script>
function change(color){
var data = document.getElementsByClassName("wrapper");
data[0].style.backgroundColor = color;
}
</script>
style의 다른 요소에 접근하기. html 객체.style.바꿀것 = 값; 이렇게 해주면 된다. 그때 그때 W3SCHOOL보기.
document.getElementsById("wrapper").style.fontSize = "50px";
document.getElementsById("wrapper").style.color ="red";
document.getElementsById("wrapper").style.display = "none";
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Disappearing Circles</title>
<style type="text/css">
.circle {
width: 100px;
height:100px;
border-radius: 50%;
margin:50px;
}
#red {
background-color : red;
}
#green {
background-color : green;
}
#yellow {
background-color : yellow;
}
</style>
</head>
<body>
<div class="circle" id ="red"></div>
<div class="circle" id = "yellow"></div>
<div class="circle" id="green"></div>
</body>
<script type="text/javascript">
var circles= document.getElementsByClassName("circle");
for(i=0;i<circles.length;i++){
circles[i].onclick = function(){
this.style.display ="none"
}
}
</script>
</html>
