03_요소가져오기(접근하기).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>요소가져오기(접근하기)</title>
<style>
.area{
border : 1px solid black;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<h1>HTML 요소에 접근하기 (해당 요소객체 가져오기)</h1>
<h3>1) 아이디로 접근하기</h3>
<div id="area1" class="area"></div>
<button onclick="accessId();">아이디로 접근</button>
<script>
function accessId(){
// 아이디로 요소에 접근할 때
// document.getElementById('접근할 요소의 아이디 속성 값');
// 요소 객체라고 부른다.
var area1 = document.getElementById('area1');
console.log(area1);
console.dir(area1);
// 선택된 요소의 속성들에 접근해서 값을 가져온다거나 변경 가능
// 속성에 접근하고자 한다면 -> 선택된요소객체.접근하고자하는속성명
area1.innerHTML = '아이디로 접근 성공!<br>';
area1.innerHTML += '<mark>안녕하세요!</mark>';
// 선택된 요소의 스타일 변경
// area1.style = 'background-color:pink; color:skyblue; width:100px'
// 개발자 도구로 확인 시 인라인 방식으로 스타일이 부여됨.
area1.style.background = 'pink';
area1.style.color = 'skyblue';
area1.style.width = '100px';
}
</script>
<br><br>
<div id="area2" class="area" style="background: red;"></div>
<button onclick="accessId2();">실습시간</button>
<script>
function accessId2(){
var divEl = document.getElementById('area2');
if(divEl.style.background == 'red'){
divEl.style.background = 'orange';
}
else if(divEl.style.background == 'orange'){
divEl.style.background = 'yellow';
}
else if(divEl.style.background == 'yellow'){
divEl.style.background = 'green';
}
else if(divEl.style.background == 'green'){
divEl.style.background = 'blue';
}
else if(divEl.style.background == 'blue'){
divEl.style.background = 'navy';
}
else if(divEl.style.background == 'navy'){
divEl.style.background = 'purple';
}
else{
divEl.style.background = 'red';
}
}
</script>
<hr>
<h3>2) 태그명으로 가져오기</h3>
<!-- ul>li{목록$}*5 -->
<ul>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
<li>목록4</li>
<li>목록5</li>
</ul>
<button onclick="accessTagName();">태그명으로 접근</button>
<script>
function accessTagName(){
// 태그명으로 요소에 접근
// document.getElementsByTagName('접근하고자 하는 태그명');
// => 선택된 여러 개의 요소객체들이 배열에 담겨서 반환
// 자바스크립트에서 배열은 []로 표현
var list = document.getElementsByTagName('li');
console.log(list);
console.log('배열의 크기 : ' + list.length)
// list[0].style.background = 'rgb(100, 150, 170)';
// list[1].style.background = 'rgb(100, 150, 190)';
// list[2].style.background = 'rgb(100, 150, 210)';
// list[3].style.background = 'rgb(100, 150, 230)';
// list[4].style.background = 'rgb(100, 150, 255)';
// 반복문으로 그라데이션 주기
// rgb(r, g, b)
var blueColor = 50;
for(var i=0; i<list.length; i++){
list[i].style.background = 'rgb(100, 250,'+ blueColor+')';
blueColor += 50;
}
}
</script>
<hr>
<h3>3) name속성값으로 접근하기</h3>
<form action="test.do">
<fieldset>
<legend>취미</legend>
<input type="checkbox" name="hobby" value ="mounting" id="mounting"><label for="mounting">등산</label>
<input type="checkbox" name="hobby" value="reading_book"id="reading_book"><label for="reading_book">독서</label>
<input type="checkbox" name="hobby" value="listening_music"id="listening_music"><label for="listening_music">음악감상</label>
<input type="checkbox" name="hobby" value="breathing"id="breathing"><label for="breathing">숨쉬기</label>
<input type="checkbox" name="hobby" value="exercising"id="exercising"><label for="exercising">운동</label>
<input type="checkbox" name="hobby" value="cooking"id="cooking"><label for="cooking">요리</label>
</fieldset>
</form>
<button onclick="accessName();">name으로 접근</button>
<script>
function accessName(){
// name 속성값으로 요소를 접근할 때
// document.getElementsByName('접근하고자 하는 name속성값');
// => 선택된 요소객체들이 배열에 담겨서 반환
var hobby = document.getElementsByName('hobby');
// console.log(hobby);
// 체크가 되었는지 안되었는지 확인하는 로직 짜보기
var checkedItem ='';
for(var i=0; i<hobby.length; i++){
if(hobby[i].checked){
checkedItem += hobby[i].value;
checkedItem += ' ';
}
}
console.log(checkedItem);
// 자바스크립트에서의 boolean 형태
// true, false
// 0, null, undefined, NaN, '' <= false
alert(checkedItem);
}
</script>
<hr>
<h3>4) 클래스명으로 접근하기</h3>
<div class="test"></div>
<p class="test"></p>
<ul class="test">
<li></li>
<li></li>
</ul>
<pre class="test test2"></pre>
<button onclick="accessClass();">class로 접근</button>
<script>
function accessClass(){
// class 속성으로 요소를 가져올 때
// document.getElementsByClassName('접근하고자 하는 class 속성 값');
// => 선택된 요소 객체들을 배열에 담아 반환
var arr = document.getElementsByClassName('test');
console.log(arr);
}
</script>
</body>
</html>
'개발 관련 > JavaScript' 카테고리의 다른 글
| [JavaScript] 변수와 자료형 (0) | 2022.10.04 |
|---|---|
| [JavaScript] 데이터 입출력 (0) | 2022.10.04 |
| [JavaScript] 스크립트 언어란? (0) | 2022.10.04 |
| [JavaScript] 자바스크립트란? (0) | 2022.10.04 |
