• Q&A
  • 회원가입
  • 로그인

[DOM_Document] JS - getElementsByTagName() 메서드 ★ - 태그선택자 (= 요소선택자 = getElementsByTagName메서드 = 겟엘러먼츠바이태그네임 메서드) (IE6)

목차
  1. document.getElementsByTagName() 예제 - 태그명으로 요소 얻기
  2. document.getElementsByTagName() 정의
  3. document.getElementsByTagName() 구문
  4. getElementsByTagName() 예제 - 지정 태그명 갖는 요소 개수
  5. getElementsByTagName() 예제 - 지정 태그명 갖는 첫 번째 요소의 내용 변경
  6. getElementsByTagName() 예제 - 지정 태그명 갖는 요소의 배경색 변경
  7. 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

...

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012