<!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>
<p id="text">Hello, World!</p>
<button onclick="innerFunc()">Click!</button>
<script>
// DOM (Document Object Model)
// 문서(HTML)지만 Javascript를 이용할 수 있도록 객체화
// -> 모든 HTML 문서는 tree의 형태로 쪼개진다
// -> *** 가장 최상위의 객체는 document 객체다 ***
// == function innerFunc(){}
let innerFunc = () => {
//요소 = 태그 + 컨텐츠
let str = document.getElementById('text')
console.log('요소:', str)
//요소 안에 내용만 접근 or 수정
//.innerText
console.log('내용만: ' + str.innerText)
str.innerText = '<h1>bye bye~~</h1>'
// 태그까지 적용하고 싶을 때
// .innerHTML
str.innerHTML = '<h1>bye bye~~</h1>'
}
</script>
</body>
</html>
DOM 실습1
- "+1"을 누르면 1씩 늘어나고, "-1"을 누르면 1씩 감소하고 "0" 이하일 때는 로직이 돌아가지 않도록 한다.
<!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>
<span id="span1">0</span>
<br>
<button onclick="plus()">+1 증가</button>
<button onclick="minus()">-1 감소</button>
<script>
// 1. 수정해야하는 span태그의 글자를 가져오기
let span = document.getElementById('span1')
// 2. plus라는 함수를 선언
// +1 씩
// function plus(){}
let plus = ()=>{
let spanNum = Number(span.innerText)
// Case 1
span.innerText = spanNum + 1
// Case 2
spanNum++
span.innerText = spanNum
console.log(spanNum)
}
// 3. minus라는 함수를 선언
// -1 씩 + 0 밑으로는 로직이 X
// function minus(){}
let minus = ()=>{
let spanNum = Number(span.innerText)
if(spanNum > 0){
// Case 1
span.innerText = spanNum - 1
// Case 2
spanNum--
span.innerText = spanNum
}
}
</script>
</body>
</html>
DOM 실습2
<!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>
<h1>클릭 한번 해볼까요?</h1>
<button onclick="mkH1()">h1태그 생성</button>
<button onclick="mkA()">a태그 생성</button>
<button onclick="mkUl()">ul태그 생성</button>
<!-- div는 생성한 태그를 누적할 공간-->
<div id="div1"></div>
<script>
// 1. 글자를 누적해줄 공간인 div1 가져오기
let div = document.getElementById('div1')
// 2. 함수별로 가지고 온 div태그 안에 태그 생성하기
// 단 누적의 형태로 생성
// mkH1 함수 <h1>오점먹?</h1>
let mkH1 = () => {
div.innerHTML += '<h1>오점먹?</h1>'
}
// mkA 함수 <a href="#">구글로 이동</a>
let mkA = () => {
div.innerHTML += '<a href = "www.google.com">구글 페이지로 이동!</a>'
}
// mkUl 함수 <ul><li> 먹고싶은 메뉴 </li><ul>
let mkUl = () => {
div.innerHTML += '<ul><li> 라면 </li></ul>'
}
</script>
</body>
</html>
DOM 실습3
<!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>
ID : <input type="text" id="id"><br>
PW : <input type="password" id="pw"><br><br>
<button onclick="login()">클릭</button>
<script>
function login(){
// 1. 사용자가 id, pw 입력 후 버튼 클릭
let id = document.getElementById('id')
let pw = document.getElementById('pw')
// 2. alert 창에 사용자에 대한 정보를 띄울것
// => id님 환영합니다 라고 띄워주기
alert(id.value + "님 환영합니다")
}
</script>
</body>
</html>
728x90
반응형
'언어 > JavaScript' 카테고리의 다른 글
| JS_DOM_이미지 변경 (0) | 2022.07.11 |
|---|---|
| JS_element 스타일 변경 (0) | 2022.07.11 |
| JS_조건문 (0) | 2022.07.07 |
| JS_형변환 (0) | 2022.07.06 |
| JS_연산자 (0) | 2022.07.06 |