최신 웹 개발 튜토리얼
 

HTML DOM getElementsByTagName() Method

<요소 개체

최초의 HTML 내용 변경 <li> 요소 (index 0) 목록에서를 :

var list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("LI")[0].innerHTML = "Milk";

텍스트를 변경하기 전에 :

  • Coffee
  • Tea

텍스트를 변경 한 후 :

  • Milk
  • Tea
»그것을 자신을 시도

정의 및 사용

getElementsByTagName() 메소드는 NodeList를 객체로, 지정된 태그 이름을 가진 요소의 자식 요소의 컬렉션을 반환합니다.

노드 목록의 객체는 노드의 컬렉션을 나타냅니다. 노드는 인덱스 번호로 액세스 할 수 있습니다. 인덱스는 0에서 시작한다.

팁 : 사용할 수있는 길이 다음 모든 노드를 통해 반복하고 원하는 정보를 추출 할 수 있습니다, 지정된 태그 이름으로 자식 노드의 수를 결정하는 노드 목록 개체의 속성을.

팁 :가 parameterValue "*" 요소의 자식 요소를 모두 반환합니다.


브라우저 지원

테이블의 숫자는 완전히 방법을 지원하는 최초의 브라우저 버전을 지정합니다.

방법
getElementsByTagName() 1.0 6.0 3.0 3.0 9.5

통사론

element .getElementsByTagName( tagname )

매개 변수 값

매개 변수 유형 기술
tagname String 필요합니다. 당신이 얻을하려는 자식 요소의 태그 이름

기술적 세부 사항

DOM 버전 코어 레벨 1 요소 개체
반환 값 : 지정된 태그 이름을 가진 요소의 자식 요소의 컬렉션을 나타내는있는 NodeList 객체. 그들은 소스 코드에 나타나는 반환 된 컬렉션의 요소는 분류되어 있습니다.

예

더 예

얼마나 많은 알아 <p> 돌며있다 요소를 <div> (노드 목록 객체의 길이 속성을 사용하여) 요소 :

var x = document.getElementById("myDIV").getElementsByTagName("P").length;

X의 결과는 다음과 같습니다

3
»그것을 자신을 시도

두번째의 배경색 변경 <p> 요소 (index 1) 돌며 <div> 요소 :

var x = document.getElementById("myDIV");
x.getElementsByTagName("P")[1].style.backgroundColor = "red";
»그것을 자신을 시도

모두의 배경 색상 변경 <p> 내부 요소를 <div> 요소를 :

var x = document.getElementById("myDIV");
var y = x.getElementsByTagName("P");
var i;
for (i = 0; i < y.length; i++) {
    y[i].style.backgroundColor = "red";
}
»그것을 자신을 시도

네번째 요소의 배경색 변경 (index 3) 돌며 <div> 요소 :

var x = document.getElementById("myDIV");
x.getElementsByTagName("*")[3].style.backgroundColor = "red";
»그것을 자신을 시도

은 Using "*" 매개 변수를.

내부의 모든 요소의 배경 색상 변경 <div> 요소를 :

var x = document.getElementById("myDIV");
var y = x.getElementsByTagName("*");
var i;
for (i = 0; i < y.length; i++) {
    y[i].style.backgroundColor = "red";
}
»그것을 자신을 시도

관련 페이지

자바 스크립트 참조 : 문서. getElementsByTagName()

자바 스크립트 튜토리얼 : 자바 스크립트 HTML DOM 노드 목록


<요소 개체