2021-04-30
자바스크립트를 사용하면서 dom 객체를 가져오는 경우가 정말 많은데, 그중에서 id와 class를 가져오는 방법을 알아보도록 하자.
- getElementById()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
onload = function(){
console.log(document.getElementById("div1"))
}
</script>
</head>
<body>
<div id="div1">Hello</div>
</body>
</html>
코드를 보면 div1아이디를 가진 태그를 추출하여 콘솔창에 출력하는 코드이다. 결과를 보면 아래와 같이 해당 div1의 정보가 출력된다.
- getElementsByClassName()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
onload = function(){
console.log(document.getElementsByClassName("div2"))
}
</script>
</head>
<body>
<div id="div1">Hello</div>
<div class="div2">Hello</div>
<div class="div2">Hello</div>
</body>
</html>
이번에는 getElementsByClassName()를 활용해 div2라는 클래스를 가진 태그들을 콘솔창에 출력해 보도록 하자. 그럼 아래와 같이 배열 형식을 해당 div2 클래스의 정보가 나타나게 된다.
- 응용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
onload = function(){
document.getElementById("div1").style.color = "red";
}
</script>
</head>
<body>
<div id="div1">Hello</div>
<div class="div2">Hello</div>
<div class="div2">Hello</div>
</body>
</html>
바로 추출된 id 로 직접적인 스타일 줄 수 있으며, 결과는 아래와 같이 나타난다.
- 축약문
사실 기존의 dom 객체를 추출하는 방법은 상당히 코드가 긴데 이를 축약하는 방법이 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
onload = function(){
div1.style.color = "red";
}
</script>
</head>
<body>
<div id="div1">Hello</div>
<div class="div2">Hello</div>
<div class="div2">Hello</div>
</body>
</html>
기존의 document.getElementById("div1")에서 div1 하나로 바로 추출이 가능하며, 결과 역시 동일하게 나타나게 된다. 하지만 이는 id에서만 가능하면 class는 불가하니 이점을 유의하자.
메인 이미지 출처: Photo by Sayan Nath on Unsplash