제어 대상을 찾기
document.getElementsByTagName
- 문서에서 태그의 이름을 통해 여러개의 엘리먼트를 가져온다.
- 찾는 태그의 이름에 대한 엘리먼트를 모두 조회 하기 때문에 유의 해야함.
<!DOCTYPE html>
<html>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>javascript</li>
</ul>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>javascript</li>
</ol>
<script>
// 태그이름이 li인 여러개의 엘리먼트를 가져온다.
var lis = document.getElementsByTagName('li');
// lis에 담긴 개수만큼 for문을 순회 하며 빨간색으로 바꾼다.
for(var i=0; lis.length; i++){
lis[i].style.color = 'red';
}
</script>
</body>
</html>document.getElementsByClassName
- 문서에서 클래스의 이름을 통해 여러개의 엘리먼트를 가져온다.
<!DOCTYPE html>
<html>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>javascript</li>
</ul>
<ol>
<li>HTML</li>
<li class="active">CSS</li>
<li class="active">javascript</li>
</ol>
<script>
// 클래스 이름이 active인 여러개의 엘리먼트를 가져온다.
var lis = document.getElementsByClassName('active');
for(var i=0; i < lis.length; i++){
// ol의 CSS, javascript는 빨간색으로 바뀐다.
lis[i].style.color = 'red';
}
</script>
</body>
</html>document.getElementById
- id 값을 기준으로 하나만 가져옴
<!DOCTYPE html>
<html>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>javascript</li>
</ul>
<ol>
<li>HTML</li>
<li id="active">CSS</li>
</ol>
<script>
// id 값이 activedls 엘리먼트 한개를 가져온다.
var li = document.getElementById('active');
li.style.color = 'red';
</script>
</body>
</html>document.querySelector
- CSS 선택자를 만족하는 첫 번째 엘리먼트 객체를 반환한다.
<!DOCTYPE html>
<html>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>javascript</li>
</ul>
<ol>
<li class="active">HTML</li>
<li class="active">CSS</li>
</ol>
<script>
// ol의 HTML만 빨간색으로 바뀐다.
var li = document.querySelector('li');
li.style.color = 'red';
</script>
</body>
</html><html>
<script defer src="./app.js"></script>
<body>
<button class="reset">button</button>
</body>
</html>const resetbutton = document.querySelector('.reset'); //이름이 reset인 첫번째 요소를 선택한다.
resetbutton.addEventListener('click', () => { // resetbutton을 클릭 하면 함수 안의 이벤트가 발생한다.
alert('안녕하세요')
})document.querySelectorAll
- CSS 선택자를 만족하는 모든 엘리먼트 객체를 반환한다.
<!DOCTYPE html>
<html>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>javascript</li>
</ul>
<ol>
<li>HTML</li>
<li>CSS</li>
</ol>
<script>
// 모든 li의 색이 빨간색으로 바뀐다.
var lis = document.querySelectorAll('li');
for (var name in lis){
lis[name].style.color = 'red';
}
</script>
</body>
</html>
https://github.com/jaewon1676