[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>

 

결과보기