예제 8-6. 태그 이름을 DOM 객체 찾기, getElementsByTagName()
WEB/JAVASCRIPT-CONCEPT 2017. 10. 31. 11:16 |plain
* 태그 이름으로 DOM 객체 찾기, getElementsByTagName()
- getElementsByTagName() 메소드를 호출하면 동일한 HTML 태그 이름을 가진 DOM 객체들을 모두 찾아 컬렉션을 만들어 리턴한다.
ex)
var divTags = document.getElementsByTagName("div");
var n = divTags.length; // 웹 페이지에 있는 <div>의 개수
* class 속성으로 DOM 객체 찾기, getElementsByClassName()
- getElementsByTagName() 메소드를 호출하면 동일한 class 이름을 가진 모든 DOB 객체들을 모두 찾아 컬렌션을 만들어 리턴한다.
ex)
<div class = "plain">...</div>
<div class = "important">...</div>
<div class = "plain">...</div>
var plainClasses = document.getElementsByClassName("plain");
var n = plainClasses.length; // 웹 페이지에 class = "plain" 속성을 가진 태그 개수, 2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>document.getElementsByTagName()</title> <script> function change() { var spanArray = document.getElementsByTagName("span"); // 4개 for(var i=0; i<spanArray.length; i++) { var span = spanArray[i]; span.style.color = "orchid"; span.style.fontSize = "20px"; } } </script> </head> <body> <h3>내가 좋아하는 과일 <button onclick="change()">누르세요</button> </h3> <hr> 저는 빨간 <span>사과</span>를 좋아해서 아침마다 한 개씩 먹고 있어요. 운동할 때는 중간 중간에 <span>바나나</span>를 먹지요. 탄수화물 섭취가 빨라 힘이 납니다. 또한 달콤한 향기를 품은 <span>체리</span>와 여름 냄새 물씬 나는 <span>자두</span>를 좋아합니다. </body> </html> | cs |
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
| 예제 8-8. document가 닫힌 후 document.write()를 잘못 사용하는 예 (0) | 2017.10.31 |
|---|---|
| 예제 8-7. write()와 writeIn()활용 (0) | 2017.10.31 |
| 예제 8-5. document 객체의 프로퍼티 출력 (0) | 2017.10.31 |
| 예제 8-4. this 활용 (0) | 2017.10.30 |
| 예제 8-3. innerHTML을 이용하여 HTML 콘텐츠 동적 변경 (0) | 2017.10.30 |