|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<h1 id="title">안녕</h1>
<ul>
<li>
</li>
</ul>
</div>
<form>
<input type="text"/>
</form>
</body>
</html>
|
cs |
Html에는 수많은 요소가 있습니다
body, div, h1, form, input....
이런 수많은 요소들을 Html에서 직접 변경하지 않고 JS에서 제공하는 메소드를 이용하여 바꿀 수 있습니다.
Document => 웹페이지 그자체, Html 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작하여야 합니다.
요소변경 ex) "<h1 id="title">안녕</h1>" 이라는 요소에 innerText="안녕"을 다른것으로 바꾸고 싶다면
|
1
2
3
4
5
6
7
|
const title = document.getElementById("title");
/*getElementById를 사용하여 Html의 요소중
title이라는 Id가진 요소를 변수 title에 넣어줍니다.*/
title.innerText = "와우";
//변수 title의 innerText를 "와우"로 변경합니다.
|
cs |
메소드를 이용해 이런식으로 바꿀 수 있습니다.
getElementBy -Id => 하나의값
-ClassName => 배열
-TagName => 배열
Id를 제외한 ClassName,TagName은 모두 배열을 들고 오기 때문에
title.innerText와 같은 방법은 사용할 수 없습니다.
(Id를 가진 태그의 하위 태그 선택불가)
그래서 Id를 제외한 다른 값을 불러올때에는
querySelector/querySelectorAll을 사용해 요소를 css selector방식으로 검색하여
불러오는게 더 편한 방법입니다.
ex)css selector 방식 => h1: first-child
|
1
2
|
const title = document.querySelector(".hello h1");
//hello 클래스의 h1요소를 가져온다(하위 태그 선택가능)
|
cs |
css요소 => .class명 (".hello") // #Id명 ("#hello")
querySelector를 이용한 하위태그 검색 ex)
|
1
2
3
4
5
6
7
8
9
10
11
|
<div class="Hello">
<h1>첫번째 h1</h1>
<h1>두번째 h1</h1>
</div>
//html
const title = document.querySelector("div.Hello:first-child h1");
//Hello클래스를 가진 div내에서 첫번째 h1요소를
console.log(title);
//JS
|
cs |
'코딩이야기 > JS 기초 문법정리' 카테고리의 다른 글
| #8. 자바스크립트(JavaScript) - event 만들기! (0) | 2022.07.09 |
|---|---|
| #7. 자바스크립트(JavaScript) - 조건문(switch문), 삼항연산자 (0) | 2022.06.25 |
| #6.자바스크립트(JavaScript) - 조건문(if문) (0) | 2022.06.25 |
| #5.자바스크립트(JavaScript) - 오브젝트(객체) 안에 function(함수) 넣기 (0) | 2022.06.24 |
| #4.자바스크립트(JavaScript) - 기본 함수(function, return) (0) | 2022.06.24 |
