Javascript 입문식을 거하게 치르도록 해준 개념이 있었으니..
그것은 바로 DOM 객체를 이해하는 것!
아래의 예제에서 1)id="text"인 태그에 style을 적용하고
2) 3개의 li태그에 style을 한번에 적용해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>HTML</li>
<li id="test">CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>1트 : 루트 개체 및 for문을 활용한 속성정의
다음과 같이 코딩한다면 trial_1)만 성공하고 trial_2)는 실패한다
...
</ul>
<script type="text/javascript">
/* trial_1) 두번째 <li>의 테두리색 변경 >> 성공 */
var li_2th = document.getElementById('test');
li_2th.style.border="1px solid red";
/* trial_2) 모든 3개의 <li> 글자색상 변경 >> 실패 */
var ul_tg = document.getElementsByTagName('ul');
var li_tg = ul_tg.getElementsByTagName('li');
for (var x of li_tg){
x.style.color="blue";
}
</script>
...
2트 : indexing 추가
trial_2)번 오류는 인덱싱으로 해결할 수 있다.
<script>
...
/* trial_2) 모든 3개의 <li> 글자색상 변경 */
var ul_tg = document.getElementsByTagName('ul')[0]; //'[0]' 입력하여 indexing 기능 추가
...
</script>
응애 코린이