<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/*
getElement 와 queryselector의 차이
1) 둘다 DOM의 제어가 가능하다
2) 처리속도는 getElement 가 훨씬 빠르다
3) 리턴값은getElement(HTMLCollection),queryselector(Nodelist)로 접근 항목이 다르다
4) getElement는 id값, 태그명들 정해져있고 queryselector는 여러 선택자를 포함한다
```
*/
onload = function() {
/*
1. id="heading1" 요소의 글자를 "안녕"으로 변경
2. id="heading2" 요소의 글자를 "hello"으로 변경
3. 첫 번째 box의 글자 색을 "빨간색"으로 변경
4. 두 번째 box의 글자 색을 "파란색"으로 변경
queryselector(단수) , queryselectorAll(다수) 사용
*/
var box = document.querySelectorAll(".box"); //배열
box[0].style.color = "red";
box[1].style.color = "blue";
document.queryselector("#heading1").innerHTML = "안녕";
document.queryselector("#heading2").innerHTML = "Hello";
}
```
</script>
</head>
<body>
<h1 id="heading1">Hello</h1>
<div class="box">Everyone</div>
```
<h1 id="heading2">안녕</h1>
<div class="box">여러분</div>
```
</body>
</html>
