Stack/JavaScript
[JS] print / DomElement / click 기초
7ingout
2022. 4. 25. 15:41
JavaScript 출력
1. 경고창에 출력 alert('내용');
2. 콘솔창에 출력 console.log('내용');
3. html body에 출력 document.write('내용');
4. DOM요소 안에 출력 innerHTML = '내용';
DOM요소 선택
1. 단수 선택
document.getElementById('id이름');
document.querySelector('css선택자');
2. 복수 선택
document.getElementsByClassName('class이름'); html 컬랙션
document.getElementsByClassName('class이름')[0] // 첫번째 요소 선택
document.getElementsByTagName('tag이름'); html 컬랙션
document.querySelectorAll('css선택자'); 노드리스트
innerHTML
1. 값을 반환 innerHTML;
2. 값을 변경 innerHTML = '변경내용';
src <img src="images/img.jpg" alt="이미지">
1. src값을 반환 src;
2. src값을 변경 src = '변경내용';
onclick 클릭이벤트
01print.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="test">
오늘은 월요일입니다.
</div>
<script>
// 자바스트립트 출력
// 1. 경고창에 출력 alert('내용')
// alert('안녕하세요');
// 2. 콘솔에 출력 console.log('내용')
console.log('그린컴퓨터');
// 3. html body에 출력하기
document.write('<h1>재미있는 자바스크립트</h1>');
document.write('<h2>화면에 출력하기</h2>');
// 4.html DOM 요소 안 내용으로 출력하기
document.getElementById('test').innerHTML = "내일은 화요일입니다.";
</script>
</body>
</html>
02DomElement.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box1" class="divbox">
박스1입니다.
</div>
<div id="box2" class="divbox">
박스2입니다.
</div>
<script>
// document.getElementsByClassName("divbox");
// console.log(document.getElementsByClassName("divbox")[1]);
// console.log(document.getElementsByTagName('div')[0]);
/* Dom 요소 선택
1. 단수 선택
01) document.getElementById('id명')
02) document.querySelector('css선택자 그대로')
2. 복수 선택
01) document.getElementsByClassName('class명') - html컬랙션(유사배열)
02) document.getElementsByTagName('tag명') - html컬랙션(유사배열)
03) document.querySelectorAll('css선택자 그대로') - 노드리스트(유사배열) */
// document.querySelector('.divbox').innerHTML = "태그명으로 선택했습니다.";
console.log(document.querySelectorAll('.divbox'));
document.querySelectorAll('.divbox')[0].innerHTML="안녕하세요";
document.querySelectorAll('.divbox')[1].innerHTML="여러분";
</script>
</body>
</html>
03click.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <div>안녕하세요</div>
<button onclick="document.querySelector('div').innerHTML='글자변경'">클릭하세요</button>
<script>
function chText() {
document.querySelector('div').innerHTML='글자변경'
}
</script> -->
<div><h1>큰제목</h1></div>
<button onclick="chText()">클릭하세요</button>
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
</ul>
<button onclick="lich()">클릭하세요</button>
<script>
// 함수
// 프로그램을 구성하는 주요 구성요소
// 함수를 사용하면 같은 기능을 여러번 사용할 수 있음.
// 기능.
// function chText() {
// document.querySelector('div').innerHTML='글자변경';
// }
// function chText() {
// document.querySelector('div').innerHTML='글자변경';
// }
// function chText() {
// alert(document.querySelector('div').innerHTML);
// }
function chText() {
console.log(document.querySelector('div').innerHTML);
}
// function lich() {
// document.querySelector('li:nth-child(2)').innerHTML = "2번째 li내용 변경";
// }
// function lich() {
// document.querySelectorAll('li')[0].innerHTML = "1번째 li내용 변경";
// }
// function lich() {
// console.log(document.querySelectorAll('li')[0].innerHTML="변경");
// }
function lich() {
document.querySelectorAll('li')[0].innerHTML="변경";
}
</script>
</body>
</html>
04src.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./images/pic_bulboff.gif" alt="">
<div>
<button onclick="bulon()">불켜기</button>
<button onclick="buloff()">불끄기</button>
</div>
<script>
function buloff() {
document.querySelector('img').src='./images/pic_bulboff.gif'
}
function bulon() {
document.querySelector('img').src='./images/pic_bulbon.gif'
}
</script>
</body>
</html>