previousElementSibling 예제 - 지정요소 앞 형제요소의 내용 가져오기
<ul>
<li id="site">홈짱닷컴</li>
<li id="host">Homzzang.com</li>
</ul>
<button onclick="homzzang()">클릭</button>
<p id="demo"></p>
<script>
function homzzang() {
var x = document.getElementById("host").previousElementSibling.innerHTML;
document.getElementById("demo").innerHTML = x;
}
</script>
결과보기
결과값: 홈짱닷컴
※ previousSibling 속성과는 달리 <li>요소간 사이에 공백이 있어도 됨.
previousElementSibling 예제 - 버튼 클릭 시 버튼 앞 오디오 재생
<figure>
<figcaption>샘플 오디오 듣기:</figcaption>
<audio controls src="https://ccrma.stanford.edu/~jos/mp3/harpsi-cs.mp3">
<a href="https://ccrma.stanford.edu/~jos/mp3/harpsi-cs.mp3">
audio 다운로드
</a>
</audio>
<button onclick="this.previousElementSibling.play();">play</button>
</figure>
결과보기
