WeSTUDY | 2주차 이미지 교체하기

Java Script에서 HTML문서의 특정 요소로 접근하는 방법

1. DOM의 트리구조를 통해서 특정 노드에 접근

element.children[0]

2. 특정 CSS선택자를 지정

document.querySelector(CSS선택자) //첫번째 요소 반환
document.querySelectorAll(CSS선택자) //모든 요소 반환

3. id, class, tag, name을 지정

document.getElementByID('ID속성') //한 요소 반환
document.getElementsByClassName('Class속성') //여러 요소 반환

이외에도 다양한 메서드가 있음.

여러개의 요소가 반환될 때는 배열의 형태로 반환되기때문에 []을 이용해서 인덱스를 지정해준다.

3번 방법을 사용해서 배경 img 교체하기

html

<div id='apple'></div>

css

#apple {background-image : url(apple.jpg);}

js

document.getElementByID('apple').background = 'url(apple3.jpg)'

img 교체하기

html에 <img>태그 자체로 삽입된 이미지도 이미지의 'src'를 다시 지정하는 방법으로 교체할 수 있다.

html

<img class='apple' src = 'apple2.jpg'>

js

document.getElementsByClassName('apple')[0].src = 'apple3.jpg'

여러개의 요소는 배열로 반환되기 때문에 []을 이용해서 인덱스를 지정해준다.