- 실습일 : 2023.11.20
실습 화면 및 설계
- 설계
- getElementById()에 대해 학습한다.
- console.log()와 console.dir()의 차이를 학습한다.
- innerText와 innerHTML의 차이를 학습한다.
소스 코드
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>vanillaJS</title>
</head>
<body>
<div>
<h1 id="idH1">hello H1</h1>
<h1 id="idH2">hello H2</h1>
</div>
<script src="app.js"></script>
</body>
</html>⇒ 추가
hello H1
hello H2
app.js
const varH1 = document.getElementById("idH1");
const varH2 = document.getElementById("idH2");
console.log(varH1); // <h1 id="idH1">hello H1</h1>
console.log(varH2); // <h1 id="idH2">hello H2</h1>
console.dir(varH1); // h1#idH1 ---- 상세정보
console.dir(varH2); // h1#idH2 ---- 상세정보
/* 해당 변수들의 ID 값 가져오기 */
console.log(varH1.id); // idH1
console.log(varH2.id); // idH2
/*
innerText vs innerHTML
> innerText
- get : element 안의 text 값들만을 가져옴
- set : element.innerText에 html을 포함한 문자열을 입력하면,
html코드가 문자열 그대로 element안에 포함
> innerHTML
- get : innerText와는 달리 innerHTML은 element 안의 HTML이나 XML을 가져옴
- set : element.innerHTML 속성에 html코드를 입력하면,
html element가 element안에 포함
*/
console.log(varH1.innerText); // hello H1
console.log(varH2.innerHTML); // hello H2- document.getElementById()를 통해 HTML에서 각각 id가 "idH1"과 "idH2"을 호출한다.
- console.log()
- 내용 출력
- console.dir()
- HTML 내부의 상세 정보 출력
- innerText와 innerHTML
-
여기서는 출력 결과가 동일. 하지만, 두 메서드가 존재한다는 것은 역할이 다르다는 것!
> innerText
-
get : element 안의 text 값들만을 가져옴
-
set : element.innerText에 html을 포함한 문자열을 입력하면,
html코드가 문자열 그대로 element안에 포함> innerHTML
-
get : innerText와는 달리 innerHTML은 element 안의 HTML이나 XML을 가져옴
-
set : element.innerHTML 속성에 html코드를 입력하면,
html element가 element안에 포함
-
#Software Engineer #IRISH