JavaScript

[DOM_Document] JS - images 속성 - 모든 이미지태그 모음 (= 이미지즈 컬렉션 = 이미지스 집합)

목차

  1. images 집합 예제 - 모든 이미지 개수
  2. images 집합 정의
  3. images 집합 구문
  4. images 집합 속성
  5. images 집합 메서드
  6. images 집합 예제 - (index / id) 사용해 1번째 이미지 주소 얻기
  7. images 집합 예제 - 1번째 이미지에 테두리 씌우기
  8. images 집합 예제 - for 반복문 사용해 모든 이미지 주소 얻기

 

images 집합 예제 - 모든 이미지 개수

 

<img src="https://homzzang.com/aaa.jpg" alt="aaa" width="100" height="80">

<img src="https://homzzang.com/bbb.gif" alt="bbb" width="100" height="80">

<img src="https://homzzang.com/ccc.png" alt="ccc" width="100" height="80">


<button onclick="homzzang()">클릭</button>


<p id="demo"></p>


<script>

function homzzang() {

  var x = document.images.length;

  document.getElementById("demo").innerHTML = x;

}

</script>

 

결과보기

결과값: 3

 

images 집합 정의

 

문서의 모든 이미지 집합(= collection/컬렉션/모음) 의미.

 


 

1.

  • 컬렉션 요소는 소스 코드 표시순 정렬
  • type="image"인 <input> 요소 집합은 반환 X
  • <img> 객체도 참고 바람.

 

2.

모든 브라우저 지원.

 

 

images 집합 구문

 

document.images

 


[반환값]

 

문서의 모든 <img> 요소를 나타내는 HTMLCollection 객체 반환.
※ 컬렉션 요소는 소스 코드에 있는 순서대로 정렬됨.

 

 

images 집합 속성

 

length

이미지 집합의 이미지 개수 반환. (※ 읽기 전용)

 

 

images 집합 메서드

 

[index]

지정 색인번호의 <img> 요소 반환.

  • 색인번호는 0부터 시작
  • 색인번호 범위 이탈 시 null 반환.

 

item(index)

지정 색인번호의 <img> 요소 반환.

  • 색인번호는 0부터 시작
  • 색인번호 범위이탈 시 null 반환.

 

namedItem(id)

지정 id 갖는 <img> 요소 반환.

  • 지정 id 갖는 <img> 없으면 null 반환.

 

 

images 집합 예제 - (index / id) 사용해 1번째 이미지 주소 얻기

[예제1] - [index] 사용

 

<img src="https://homzzang.com/aaa.jpg" alt="aaa" width="100" height="80">

<img src="https://homzzang.com/bbb.gif" alt="bbb" width="100" height="80">

<img src="https://homzzang.com/ccc.png" alt="ccc" width="100" height="80">


<button onclick="homzzang()">클릭</button>


<p id="demo"></p>


<script>

function homzzang() {

  var x = document.images[0].src;

  document.getElementById("demo").innerHTML = x;

}

</script>

 

결과보기


[예제2] - item(index) 사용

 

<img src="https://homzzang.com/aaa.jpg" alt="aaa" width="100" height="80">

<img src="https://homzzang.com/bbb.gif" alt="bbb" width="100" height="80">

<img src="https://homzzang.com/ccc.png" alt="ccc" width="100" height="80">


<button onclick="homzzang()">클릭</button>


<p id="demo"></p>


<script>

function homzzang() {

  var x = document.images.item(0).src;

  document.getElementById("demo").innerHTML = x;

}

</script>

 

결과보기


[예제3] - namedItem(id) 사용.

 

<img id="hz" src="https://homzzang.com/aaa.jpg" alt="aaa" width="100" height="80">

<img src="https://homzzang.com/bbb.gif" alt="bbb" width="100" height="80">

<img src="https://homzzang.com/ccc.png" alt="ccc" width="100" height="80">


<button onclick="homzzang()">클릭</button>


<p id="demo"></p>


<script>

function homzzang() {

  var x = document.images.namedItem("hz").src;

  document.getElementById("demo").innerHTML = x;

}

</script>

 

결과보기 

 

images 집합 예제 - 1번째 이미지에 테두리 씌우기

 

<img src="https://homzzang.com/aaa.jpg" alt="aaa" width="100" height="80">

<img src="https://homzzang.com/bbb.gif" alt="bbb" width="100" height="80">

<img src="https://homzzang.com/ccc.png" alt="ccc" width="100" height="80">


<button onclick="homzzang()">클릭</button>


<p id="demo"></p>


<script>

function homzzang() {

  var x = document.images[0];

  x.style.border = "10px solid red";

}

</script>

 

결과보기

 

images 집합 예제 - for 반복문 사용해 모든 이미지 주소 얻기

 

<img src="https://homzzang.com/aaa.jpg" alt="aaa" width="100" height="80">

<img src="https://homzzang.com/bbb.gif" alt="bbb" width="100" height="80">

<img src="https://homzzang.com/ccc.png" alt="ccc" width="100" height="80">


<button onclick="homzzang()">클릭</button>


<p id="demo"></p>


<script>

function homzzang() {

  var x = document.images;

  var txt = "";

  var i;

  for (i = 0; i < x.length; i++) {

    txt += x[i].src + "<br>";

  }

  document.getElementById("demo").innerHTML = txt;

}

</script>

 

결과보기


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

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
1/89
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드
제작의뢰 1
Q&A
커뮤니티 5
웹유틸
회원센터
홈짱 PC버전 로그인