document.getElementsByTagName
* 문서 내 해당 태그의 이름을 가진 객체를 반환한다.
* 인자로 전달된 태그명에 해당하는 객체들을 찾아서 그 리스트를 NodeList라는 유사 배열에 담아서 반환한다.
NodeList는 배열은 아니지만 length와 배열접근연산자를 사용해서 엘리먼트를 조회할 수 있다.
document.getElementsByTagName("태그이름")
- 예제
<html> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <script> var lis = document.getElementsByTagName('li'); for(var i=0; i < lis.length; i++){ lis[i].style.color='red'; } </script> </body> </html>
-결과
- HTML
- CSS
- JavaScript
☆ 조회 대상을 좁히려면
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<script>
var ul = document.getElementsByTagName('ul')[0];
var lis = ul.getElementsByTagName('li');
for(var i=0; lis.length; i++){
lis[i].style.color='red';
}
</script>document.getElementsByClassName
* class 속성 값 기준으로 객체를 반환
- 사용법
var obj = document.getElementsByClassName ("class");
- 예제
<!DOCTYPE html>
<html>
<body>
<ul>
<li>HTML</li>
<li class="active">CSS</li>
<li class="active">JavaScript</li>
</ul>
<script>
var lis = document.getElementsByClassName('active');
for(var i=0; i < lis.length; i++){
lis[i].style.color='red';
}
</script>
</body>
</html>
- 결과
- HTML
- CSS
- JavaScript
document.getElementById
* 해당 id 값을 가진 객체를 반환
- 사용법
var id = document.getElementById("아이디 이름");
- 예제
<!DOCTYPE html>
<html>
<body>
<ul>
<li>HTML</li>
<li id="act">CSS</li>
<li>JavaScript</li>
</ul>
<script>
var li = document.getElementById('act');
li.style.color='green';
</script>
</body>
</html>- 결과
- HTML
- CSS
- JavaScript
document.querySelector
* CSS 문법의 선택자 문법을 이용해서 객체를 조회한다.
* 클래스나 태그 이름으로 불러와도 배열을 반환하는 것이 아니기 때문에 맨 앞 객체 하나만 반환한다.
- 사용법
var container = document.querySelector(" CSS 선택자");
- 예제
<html>
<head>
<script type="text/javascript">
function changeColor(){
var box = document.querySelector(".box");
box.style.backgroundColor = "blue";
}
</script>
<style>
div.box{ display:inline-block; width:50px; height:50px; background-color:red; }
</style>
</head>
<body>
<div class="box">박스1</div>
<div class="box">박스2</div>
<div class="box">박스3</div>
<input type="button" value="색 변경" onclick="changeColor()"/>
</body>
</html>
- 결과
document.querySelectorAll
* document.querySelector와 기본적인 동작법은 같지만 모든 객체를 조회한다는 점이 다르다.
* 여러개의 태그 객체를 담는 배열을 반환한다.
- 사용법
var containerArr = document.querySelectorAll("#container"); //배열
- 예제
<html> <head> <script type="text/javascript"> function changeColor(){ var box = document.querySelectorAll(".box"); for(var i=0;i<box.length;i++){ //배열 box[i].style.backgroundColor = "green"; } } </script> <style> div.box{ display:inline-block; width:50px; height:50px; background-color:red; } </style> </head> <body> <div class="box">박스1</div> <div class="box">박스2</div> <div class="box">박스3</div> <input type="button" value="색 변경" onclick="changeColor()"/> </body> </html>
- 결과
'WEB > JavaScript' 카테고리의 다른 글
| Element 객체 정의 (0) | 2016.10.15 |
|---|---|
| DOM : HTMLElement, HTMLCollection (0) | 2016.10.14 |
| BOM : 창 제어 (0) | 2016.10.14 |
| BOM : Navigator 객체 (0) | 2016.10.14 |
| BOM : Location 객체 (0) | 2016.10.14 |