티스토리 뷰
Selector (선택자)
🙾 selector의 스타일 변경하는 방법
- 대상.style.css속성명 = '값';
▏Id명 선택하는 방법
- document.getElementById('아이디명')
/*
선택하는 방법(아이디명)
document.getElementById('아이디명')
*/
//list1 -> 글씨색 blue
document.getElementById('list1').style.color = 'blue';▏Tag명 선택하는 방법
- document.getElementsByTagName('태그명')
- JS에서 무조건 복수로 인식되어 배열로 잡히기 때문에 인덱스 필수 (= 유사배열)
/*
선택하는 방법(태그명)
document.getElementsByTagName('태그명')
*/
<body>
<h1>Basic Selector</h1>
<section class="container">
<h2>Section title</h2>
<ul id="list1" class="list">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
</section>
<section class="container">
<h2>Section title</h2>
<ul id="list2" class="list">
<li class="red">list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
</section>
</body>
// h1 -> 배경색 silver
document.getElementsByTagName('h1')[0].style.backgroundColor='silver';▏Class명 선택하는 방법
- document.getElementsByClassName('클래스명')
- JS에서 무조건 복수로 인식되어 배열로 잡히기 때문에 인덱스 필수 (= 유사배열)
/*
선택하는 방법(클래스명)
document.getElementsByClassName('클래스명')
*/
<body>
<section class="container">
<h2>Section title</h2>
<ul id="list2" class="list">
<li class="red">list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
</section>
<section class="container">
<h2>Section title</h2>
<ul id="list3" class="list">
<li class="red">list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</section>
</body>
// 클래스명 list의 배경색을 #ebebeb로 변경
var list = document.getElementsByClassName('list');
console.log(list);
for(var i=0; i<list.length; i++){
list[i].style.backgroundColor='#ebebeb';
}
/*
list[0].style.backgroundColor='#ebebeb';
list[1].style.backgroundColor='#ebebeb';
list[2].style.backgroundColor='#ebebeb';
list[3].style.backgroundColor='#ebebeb';
*/▏선택자를 이용하여 선택하는 방법
- document.querySelector('css선택자')
⇨ JS에서는 단일 요소로 인식 (복수 X)
- document.querySelectorAll('css선택자')
⇨ 무조건 복수로 인식 (= 유사배열)
/*
선택하는 방법(선택자를 이용)
document.querySelector('css선택자')
document.querySelectorAll('css선택자)
*/
<body>
<section class="container">
<h2>Section title</h2>
<ul id="list2" class="list">
<li class="red">list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
</section>
<section class="container">
<h2>Section title</h2>
<ul id="list3" class="list">
<li class="red">list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</section>
</body>
// id list3가 감싸는 class red의 배경색을 red로 변경
document.querySelector('#list3 .red').style.backgroundColor='red';
// class list 안의 클래스 red의 배경색을 red로 변경
var redList = document.querySelectorAll('.list .red');
for(var j=0; j<redList.length; j++){
redList[j].style.backgroundColor='red';
}<section class="container">
<h2>Section title</h2>
<div id="box">
box level 1
<div>
box level 2
<div>
box level 3
</div>
</div>
</div>
</section>
<article>
<p> hello, world! </p>
<p> hello, world! </p>
<p> hello, world! </p>
</article>
// id box안의 3번째 div 요소의 배경색 silver로 변경
document.querySelector('#box > div > div').style.backgroundColor='silver';
// article p 태그 폰트를 14px로 변경 (변수명 mypara)
var mypara = document.querySelectorAll('article p');
for (var t=0; t<mypara.length; t++){
mypara[t].style.fontSize='14px';
}
// 위의 문장을 forEach문으로 구현 (변수명 mypara)
var mypara = document.querySelectorAll('article p');
mypara.forEach(function(item){
item.style.fontSize='14px';});
// 위의 문장을 for of문으로 구현 (변수명 mypara)
for(item of mypara){
item.style.fontSize='14px';
'JavaScript' 카테고리의 다른 글
| accordion / modal / back to top (0) | 2023.06.14 |
|---|---|
| event & tab (0) | 2023.06.08 |
| Timer & Math (0) | 2023.06.05 |
| 문자열 (IndexOf, Search / concat / replace / slice / split / length) (0) | 2023.06.05 |
| 반복문 (for / while / do while / forEach / for in / for of ) (0) | 2023.06.05 |