<!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('<h3>재미있는 자바스크립트</h3>');
document.write('<h2>화면에 출력하기</h2>')
// 4. html DOM 요소안(태그의 시작부터 닫기까지) 내용으로 출력하기
// css = #test
document.getElementById('test').innerHTML = "내일은 화요일입니다.";
</script>
</body>
</html>
DomElement.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">
박스 1입니다.
</div>
<script>
// 1. id로 선택
// 하나의 요소를 택함
// console.log(document.getElementById("box1"));
// document.getElementById('box1');
// 2. tag, class로 선택
// 복수형태로 요소를 선택 → getElements → 순번을 정해줘야 선택이됨
// ★ [0] , 자바스크립트는 제로카운팅 ★
// console.log(document.getElementsByClassName("divbox")[1]);
// document.getElementsByClassName('divbox');
// console.log(document.getElementsByTagName('div')[0]);
// 3. querySelector
// document.log(document.querySelector('div'));
// document.querySelector('#box1').innerHTML = "아이디로 선택했습니다.";
// document.querySelector('div').innerHTML = "태그명로 선택했습니다.";
// document.querySelector('.divbox').innerHTML = "글래스명으로 선택했습니다.";
// ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// DOM 요소 선택
// 1. 단수 선택
// 01) document.getElementById("id명")
// 02) document.querySelector('css선택자 그대로') ★★ get 보다 더 편함 ★★
// 2. 복수 선택
// 01) document.getElementsByClassName('class명') → html 컬랙션(유사배열)
// 02) document.getElementsByTagName('tag명') → html 컬랙션(유사배열)
// 03) document.querySelectorAll('css선택자 그대로') → 노드리스트(유사배열) → ★★ 여러개를 묶음으로 선택 ★★
// Nodelist 유사배열 → 순번필요
console.log(document.querySelectorAll('.divbox'));
document.querySelectorAll('.divbox')[0].innerHTML = "안녕하세요.";
document.querySelectorAll('.divbox')[1].innerHTML = "여러분";
</script>
</body>
</html>
click.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>
<!-- 클릭하면 글자가 변경됨 " 안녕하세요 → 글자변경 " -->
<button onclick="chText()">클릭</button>
<!-- 위와 같은 기능을 함 -->
<!-- onclick="chText()" = 함수 호출 -->
<!-- ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ -->
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
</ul>
<button onclick="lich()">클릭해</button>
<!-- ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ -->
<script>
// ★ 함수 ★
// 프로그램을 구성하는 주요 구성요소
// 함수를 사용하면 같은 기능을 여러번 사용할 수 있음
// 함수는 기능.
// function = 함수를 만들어주는 키워드
// chText = 함수명, 임의로 만들어줌
// {} 안에 구문이 실행이됨, {} 여러개를 만들어줄 수 있음
// console document alert 다 가능 ↓
function chText () {
console.log(document.querySelector('div').innerHTML);
}
function lich () {
console.log(document.querySelectorAll('li')[0].innerHTML = "변경");
}
// <button onclick="chText()">클릭</button> →→ 글자변경시킴
function chText() {
document.querySelector('div').innerHTML='글자변경';
}
// function chText() {
// alert(document.querySelector('div').innerHTML);
// }
// function lich() {
// 두가지 같음
// // document.querySelector('li:nth-child(2)').innerHTML = "2번째 li 내용 변경";
// document.querySelectorAll('li')[1].innerHTML = "2번째 li 내용 변경";
// }
</script>
</body>
</html>
