📝 JavaScript
🖥️ 1. document
1-1. 가져오기
document 객체는 HTML 문서를 제어하기 위해 특정 HTML 태그 요소를 id 값에 의하여 객체 형태로 가져오는 기능을 제공한다.
이외에도 class 값, name 값, tagname 값 등을 사용할 수 있다.
EX) class 값
<body>
<ul>
<li>HTML</li>
<li class="active">CSS</li>
<li class="active">JavaScript</li>
</ul>
<script>
let lis = document.getElementsByClassName('active');
for( let i = 0; i < lis.length; i++ ){
lis[i].style.color = "tomato";
}
</script>
</body>EX) id값
<body>
<ul>
<li>HTML</li>
<li id="active">CSS</li>
<li>JavaScript</li>
</ul>
<script>
let li = document.getElementById('active');
li.style.color = "tomato";
</script>
</body>EX) tag값
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<script>
let lis = document.getElementsByTagName('li');
// for, 모든 lis 태그 글자를 tomato 바꾸기
for( i = 0; i < lis.length; i++ ){
lis[i].style.color = 'tomato';
}
</script>
</body>EX) tag값
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<script>
let ul = document.getElementsByTagName('ul')[0];
let lis = ul.getElementsByTagName('li');
for( i = 0; i < lis.length; i++ ){
lis[i].style.color = 'tomato';
}
</script>
</body>1-2. 내용 제어
- 객체화된 HTML요소의
innerHTML속성을 사용하면 해당 태그에 속해 있는
내용을 새롭게 설정하거나, 현재의 내용을 읽어올 수 있다EX) htag.innerHTML = "<h1>Hi</h1>"
1-3. 요소 선택
- DOM에서 HTML 요소를 선택하는 방법
getElementById(),getElementsByClassName(),getElementsByTagName(): HTML 요소(element) 또는 요소들을 반환
