[DOM_Element] JS - previousElementSibling 속성 - 바로이전 형제요소 (= previousElementSibling속성 = 프리비어스엘러먼트시블링속성) (IE9 이상

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>

 

결과보기