웹브라우저 자바스크립트 - 제어 대상을 찾기
제어 대상을 찾기 - https://opentutorials.org/course/1375/6656
자바스크립트로 문서를 제어하려면 제어의 대상을 찾고 대상에 대한 작업을 해야한다.
document.getElementsByTagName
<!DOCTYPE html>
<html>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<script>
var lis = document.getElementsByTagName('li'); //문서 전체에서 태그의 이름이 li인 엘리먼트들을 가져와서 그 결과를 lis변수에 담는다
for(var i=0; i < lis.length; i++){
lis[i].style.color='red';
}
</script>
</body>
</html>
[결과화면]
ul태그안에 있는 li태그들의 스타일을 제어한다.(조회의 대상 좁히기)
<!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>
var ul = document.getElementsByTagName('ul')[0]; //ul태그중에 첫번째 인덱스(첫번째에 있는 ul태그)를 ul변수에 넣음
var lis = ul.getElementsByTagName('li'); //ul변수에 담긴 ul태그 안에 있는 li태그들을 lis변수에 넣음
for(var i=0; i < lis.length; i++){
lis[i].style.color='red';
}
</script>
</body>
</html>
[결과화면]
document.getElementsByClassName
<!DOCTYPE html>
<html>
<body>
<ul>
<li>HTML</li>
<li class="active">CSS</li>
<li class="active">JavaScript</li>
</ul>
<script>
var lis = document.getElementsByClassName('active'); //active라는 class명을 가진 엘리먼트를 lis변수에 담는다.
for(var i=0; i < lis.length; i++){
lis[i].style.color='red';
}
</script>
</body>
</html>
[결과화면]
document.getElementById
element가 들어가므로 하나의 데이터만 조회가 가능하다.
html의 id값을 조회한다.
가장 많이 사용함.
<!DOCTYPE html>
<html>
<body>
<ul>
<li>HTML</li>
<li id="active">CSS</li>
<li>JavaScript</li>
</ul>
<script>
var li = document.getElementById('active'); //id값이 active를 조회에서 그값을 li값에 담는다.
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>HTML</li>
<li class="active">CSS</li>
<li>JavaScript</li>
</ol>
<script>
var li = document.querySelector('li'); //하나의 엘리먼트만 리턴하기 때문에 첫번째 li엘리먼트인 <li>HTML</li>이 선택됨.
li.style.color='red';
var li = document.querySelector('.active'); //어떤 엘리먼트이건간에 class의 속성값이 active인 엘리먼트들을 선택함.
li.style.color='blue';
</script>
</body>
</html>
[결과화면]
document.querySelectorAll
css 선택자를 인자로 받아서 선택자에 해당되는 엘리먼트들의 객체를 찾아서 리턴해주는 메소드.
하나의 엘리먼트가 아닌 모든 엘리먼트를 리턴해준다.
<!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>JavaScript</li>
</ol>
<script>
var lis = Array.from(document.querySelectorAll('li')); //배열만을 가져와서 lis에 넣는다.
//var lis = document.querySelectorAll('li'); for in문일 경우 배열값+쓸데없는값 이 함께 들어와서 에러가 나기때문에 이렇게 선언하면 페이지에러가 난다.
for(var name in lis){
lis[name].style.color = 'blue';
}
for(i=0 ; i<ul.length ; i++){
ul[i].style.color= 'red';
}
</script>
</body>
</html>
[결과화면]
