• Q&A
  • 회원가입
  • 로그인

[DOM_Element] JS - firstElementChild 속성 - 첫번째 자식요소 (IE9 이상)

firstElementChild 예제

 

<ul id="hz"><li>홈짱닷컴</li><li>Homzzang.com</li></ul>


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


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


<script>

function homzzang() {

  var site = document.getElementById("hz").firstElementChild.innerHTML;

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

}

</script>

 

결과보기

 

 

[참고] firstElementChild vs. firstChild

 

firstElementChild
첫번째 자식요소이기 때문에, 첫 번째 <li> 앞에 공백이 와도 상관 없음.

firstChild

첫번째 자식노드이기 때문에, 첫 번째 <li> 앞에 공백이 오면 절대 안 됨.

 

 

 

firstElementChild 속성은 아래처럼, 첫 번째 <li> 앞에 줄바꿈해서 공백이 와도 상관 없음.

 

<ul id="hz">

  <li>홈짱닷컴</li>

  <li>Homzzang.com</li>  

</ul>


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


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


<script>

function homzzang() {

  var site = document.getElementById("hz").firstElementChild.innerHTML;

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

}

</script>

 

결과보기


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

찾아주셔서 감사합니다. Since 2012