7월27일(목)
<!DOCTYPE html>
<html lang=“ko”>
<head>
<meta charset=“UTF-8">
<title>JavaScript DOM Element</title>
<script>
//HTML 태그 이름을 이용한 선택
console.log(‘aaa’)
var selectedItem = document.getElementsByTagName(“li”); // 모든 <li> 요소를 선택함.
console.log(selectedItem)
console.log(selectedItem.length)
for (var i = 0; i < selectedItem.length; i++) {
selectedItem.item(i).style.color = “red”; // 선택된 모든 요소의 텍스트 색상을 변경함.
console.log(selectedItem.item(i));
}
</script>
</head>
<body>
<h1>HTML 태그 이름을 이용한 선택</h1>
<ul>
<li>첫 번째 아이템이에요!</li>
<li>두 번째 아이템이에요!</li>
<li>세 번째 아이템이에요!</li>
<li>네 번째 아이템이에요!</li>
<li>다섯 번째 아이템이에요!</li>
</ul>
<script>
var selectedItem = document.getElementsByTagName(“li”); // 모든 <li> 요소를 선택함.
for (var i = 0; i < selectedItem.length; i++) {
selectedItem.item(i).style.color = “red”; // 선택된 모든 요소의 텍스트 색상을 변경함.
}
</script>
</body>
</html>html 문서에서 <스크립트> 태그 내에 작성한 코드는 html 문서가 로드되기 전에 실행된다.
이때 <스크립트> 태그 내에 작성한 코드에서 DOM 요소를 가져오려고 하면 해당 요소가 아직 로드되지 않았기 때문에 null이 반환된다.
만약 이 부분을 해결하려면
DOMContentLoaded 이벤트를 사용하여 DOM이 로드된 후에 코드를 실행하도록 해야한다.
document.addEventListener("DOMContentLoaded", function() {
코드
});
DOMContentLoaded 이벤트는 웹 페이지의 HTML 문서가 로드되고 파싱된 후에 발생하는 이벤트로
초기 HTML 문서가 완전히 로드되고 파싱된 후에 발생한다. 스타일시트, 이미지 및 하위 프레임 로딩이 완료되기를 기다리지 않고 발생하기 때문에 페이지가 로드되기 전에 DOM을 조작하는 자바스크립트 코드가 실행되어 원하지 않는 결과를 내는 것을 막을 수 있다.
