보통 태그에 접근하여 그 값을 사용하거나 속성을 변경할 때 이 방법을 이용하는데
변수를 선언하여 document.getElement~~~~ 와 같이 document의 메소드를 이용한다.
Id의 경우는 var 변수 이름 = document.getElementById("지정한 Id");
태그를 이용할 땐 var 변수 이름 = document.getElementsByTagName("태그 명");
name을 이용할 땐 var 변수 이름 = document.getElementsByName("지정한 name 명");
태그를 이용하여 불러오면 그 태그를 사용하는 모든 항목들이 배열 형태로 변수에 입력된다.
이 변수를 출력하면 태그가 어떤 속성들을 가지고 있는지 확인할 수 있고
속성은 매우 많기 때문에 암기하여 쓰기 보다는 이 기능을 통해서 원하는 속성을 불러오거나 변경하면 된다.
다음 예제를 확인해보자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.area {
border:1px solid red;
height:100px;
}
</style>
</head>
<body>
<h1>HTML 태그에 접근하기</h1>
<h3>아이디로 접근</h3>
<div id="area1" class="area"></div>
<!-- 보통 개발자가 id, 퍼블리셔가 class를 쓴다. -->
<!-- id는 개발자들 끼리의 암묵적 약속으로 고유하게 단 하나의 대상만 가르킴 -->
<button onclick="accessId();">아이디로 접근</button>
<script>
function accessId() {
var area1 = document.getElementById("area1");
area1.style.backgroundColor = "yellow";
area1.innerHTML += "아이디로 접근 성공!<br>"
}
</script>
<h3>태그명으로 접근</h3>
<ul>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
<li>목록4</li>
<li>목록5</li>
</ul>
<button onclick="accessTagName();">태그명으로 접근</button>
<script type="text/javascript">
function accessTagName() {
var list = document.getElementsByTagName("li");
// li 태그는 여러개이기 때문에 getElements, s를 써서 복수형
console.log(list);
// F12의 브라우져 관리자 모드로 콘솔에 태그명 하나하나의 속성들을 확인하고
// 이용해보자
var changeColor = 50;
/*
for(var i in list){
list[i].style.backgroundColor = "rgb(130, 220, " + changeColor + " )";
changeColor += 50;
// 이 반복을 사용하면 list 배열의 0~4번방의 li 값 뿐만 아니라 length라는 속성도 저장되어 있기 때문에
// 마지막에 접근하려 하면 오류가 발생한다.
}
*/
// 그러므로 일반 for문을 사용하여 해결해야 한다.
for(var i = 0; i< list.length; i++){
list[i].style.backgroundColor = "rgb(130, 220, " + changeColor + " )";
changeColor += 50;
}
}
</script>
<hr>
<h3>name으로 접근</h3>
<form>
<fieldset>
<legend>취미</legend>
<table>
<tr>
<td>
<input type="checkbox" name="hobby" value="game" id="game">
<label for="game">게임</label>
<!-- for 속성을 맞춰서 설정하면 체크박스를 누르지 않고 글자를 눌러도 선택이 된다. -->
</td>
<td>
<input type="checkbox" name="hobby" value="music" id="music">
<label for="music">음악</label>
</td>
<td>
<input type="checkbox" name="hobby" value="movie" id="movie">
<label for="movie">영화</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="hobby" value="money" id="money">
<label for="money">돈벌기</label>
</td>
<td>
<input type="checkbox" name="hobby" value="running" id="running">
<label for="running">뛰기</label>
</td>
<td>
<input type="checkbox" name="hobby" value="walk" id="walk">
<label for="walk">걷기</label>
</td>
</tr>
</table>
</fieldset>
</form>
<div id="area2" class="area"></div>
<button onclick="accessName();">name으로 접근</button>
<script type="text/javascript">
function accessName() {
var hobby = document.getElementsByName("hobby");
console.log(hobby);
// 출력한 배열 값의 속성 중 checked가 현재 체크가 되어있는지 상태를 알려줌
var checkItem = "";
for(var i = 0; i < hobby.length; i++){
if (hobby[i].checked == true) {
checkItem += hobby[i].value + "선택함<br>";
}
}
document.getElementById("area2").innerHTML = checkItem;
}
</script>
</body>
</html>