▶ DOM : Document Object Model -> 문서 html 객체 모델링
서로 다른 언어가 소통할 수 있도록 쪼개서 ‘객체화’ 시켜주는 것 !
HTML요소지만 JavaScript를 이용할 수 있도록 해준다
문서에서 => document
접근 => .
가지고와줘 => get
요소 =>Element
아이디를 통해 => ByID()
<!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>
// function innerFunc(){}
let innerFunc = ()=>{
let str = document.getElementById('text')
// 요소 = 태그 + 콘텐츠
// 요소 안의 내용만 수정 or 접근 : innerText
console.log(str.innerText)
// str.innerText = '<h1>Bye</h1>'
// 태그까지 적용하고 싶을때는? : innerHTML
str.innerHTML = '<h1>Bye</h1>'
}
</script>
</body>
</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>
<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(), minus()
// => 단 , 0밑으로는 minus()함수 사용 x
function plus(){
let spanNum = Number(span.innerText)
//console.log(spanNum)
span.innerText = spanNum+1
}
let minus = ()=>{
let spanNum = Number(span.innerText)
if(spanNum > 0){
span.innerText = spanNum-1;
}
}
</script>
</body>
</html>
'자바 스크립트' 카테고리의 다른 글
| querySelector 실습 (0) | 2022.05.18 |
|---|---|
| DOM 실습 (0) | 2022.05.17 |
| 객체(Object) (0) | 2022.05.13 |
| 함수 실습 (0) | 2022.05.13 |
| 함수 (0) | 2022.05.13 |