#3.0 The Document Object
#3.1 HTML in Javascript
#3.2 Searching For Elements
오늘은 html Elements에 자바스크립트로 접근하고, 변경하는 법에 대해 알아보겠다.
console 창에 "document.title" 처럼 입력하면 html 파일의 <title> Element를 가져온다.
엘리먼트에 접근할 수 있을 뿐만 아니라 값을 변경할 수도 있다.
document.title = "asdfasdf" 이와 같이 입력하면
html의 title 엘리먼트에 어떻게 입력 돼 있든 자바스크립트로 변경한 값으로 나타난다.
다음으로는
getElementById()에 대해 알아보자.
쉽게 얘기하면 html 엘리먼트에 부여한 id값에 접근하는 것이다.
|
1
2
3
4
|
<body>
<h1 id="title">Grab me!</h1>
<script src="app.js"></script>
</body>
|
cs |
이런 html코드가 있을 때 id가 title로 지정된 h1엘리먼트에 접근하기 위해서
|
1
|
const title = document.getElementById("title");
|
cs |
이와 같이 작성하면 h1 엘리먼트에 접근할 수 있다.
만약 h1의 innerText를 변경하고 싶다면
title.innerText = "블라블라" 와 같이 적으면
h1태그 안에 있는 "Grab me!"가 > "블라블라"로 변경된다.
-----------------------------------------------------------
getElementById()와 비슷한 것으로는 querySelector()가 있다.
전자의 경우는 괄호 안에 접근하고자하는 엘리먼트의 "아이디"로 적어주면되고
후자의 경우는 괄호 안에 "#아이디"를 적어주어야 한다. "#"은 ID를 의미한다.
'웹개발 > Javascript' 카테고리의 다른 글
| Javascript - 7 - querySelecor() / Event(addEventListener) (0) | 2022.12.24 |
|---|---|
| Javascript - 5 (0) | 2022.12.22 |
| Javascript - 4 (0) | 2022.12.21 |
| Javascript - 3 (0) | 2022.12.20 |
| Javascript - 2 (0) | 2022.12.19 |