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>
결과보기
