목차
- document.getElementsByTagName() 예제 - 태그명으로 요소 얻기
- document.getElementsByTagName() 정의
- document.getElementsByTagName() 구문
- getElementsByTagName() 예제 - 지정 태그명 갖는 요소 개수
- getElementsByTagName() 예제 - 지정 태그명 갖는 첫 번째 요소의 내용 변경
- getElementsByTagName() 예제 - 지정 태그명 갖는 요소의 배경색 변경
- getElementsByTagName() 예제 - 모든 요소 중 색인번호 3 (= 4번째 요소)의 내용 얻기
document.getElementsByTagName() 예제 - 태그명으로 요소 얻기
<h3>홈짱닷컴 Homzzang.com</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<button onclick="homzzang()">클릭</button>
<p id="demo"></p>
<script>
function homzzang() {
var x = document.getElementsByTagName("LI");
document.getElementById("demo").innerHTML = x[1].innerHTML;
}
</script>
결과보기
document.getElementsByTagName() 정의
지정 태그명 가진 문서의 모든 요소 컬렉션을 HTMLCollection 객체로 반환.
1.
- HTMLCollection의 객체는 노드의 컬렉션 나타냄.
- 노드는 인덱스 번호로 접근 가능.
- 인덱스는 0부터 시작.
2.
매개변수 값 '*' 의미 : 문서의 모든 요소 가리킴.
3.
HTMLCollection 갹채의 length 속성 사용해 반복문 사용해 각 태그에 접근해 원하는 정보 추출 가능.
4.
주요 브라우저 모두 지원.
document.getElementsByTagName() 구문
document.getElementsByTagName(tagname)
[매개변수]
tagname
필수. 얻고자 하는 요소의 태그명.
※ 모든 요소 경우, * (Asterisk: 아스테리크) 특수문자 사용.
[반환값]
지정 태그명 갖는 요소로 구성된 HTMLCollection 반환.
※ 반환된 컬렉션의 요소는 소스 코드에 나타나는 대로 정렬.
getElementsByTagName() 예제 - 지정 태그명 갖는 요소 개수
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<button onclick="homzzang()">클릭</button>
<p id="demo"></p>
<script>
function homzzang() {
var x = document.getElementsByTagName("LI");
document.getElementById("demo").innerHTML = x.length;
}
</script>
결과보기 (결과값: 3)
getElementsByTagName() 예제 - 지정 태그명 갖는 첫 번째 요소의 내용 변경
<p>코딩 강의 사이트</p>
<p>Homzzang.com</p>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
document.getElementsByTagName("P")[0].innerHTML = "홈짱닷컴";
}
</script>
결과보기
getElementsByTagName() 예제 - 지정 태그명 갖는 요소의 배경색 변경
<p>홈짱닷컴</p>
<p>Homzzang.com</p>
<p>홈페이지 제작관리 강의</p>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var x = document.getElementsByTagName("P");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "yellow";
}
}
</script>
결과보기
getElementsByTagName() 예제 - 모든 요소 중 색인번호 3 (= 4번째 요소)의 내용 얻기
<!DOCTYPE html>
<html>
<body>
<p>홈짱닷컴 Homzzang.com</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<p>코딩언어 무료 강의</p>
<button onclick="homzzang()">클릭</button>
<p id="demo"></p>
<script>
function homzzang() {
var x = document.getElementsByTagName("*");
document.getElementById("demo").innerHTML = x[3].innerHTML;
}
</script>
</body>
</html>
결과보기 (결과값: 홈짱닷컴 Homzzang.com)
PS. 주의: 예제 코드엔 <head> 태그가 없지만, 있는 걸로 간주함.
x[0].tagName - HTML
x[1].tagName -HEAD
x[2].tagName - BODY
x[3].tagName - P
x[4].tagName - UL
x[5].tagName - LI
...
