자바스크립트의 꽃, DOM을 배우다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="text">안녕하세요</h1>
<p class="num">p태그1</p>
<p class="num">p태그2</p>
<script>
/*
DOM : Document Object Model
DOM 객체는 HTML 문서 내의 요소들을 전부 단일 요소로 하나하나 쪼개조는 개념
ex) <h1 id = "text"> 안녕하세요 <h1/>
=> h1 (태그), id(속성), text(속성값), 안녕하세요(컨텐츠)
쪼개주는 이유는 각각의 단일 요소들에 접근해서 JS 문법을 사용하기 위함
*/
// Mission 1) 아이디가 text인 요소의 컨텐츠를 "안녕히가세요"로 변경
// 1 - 1) id가 text인 요소를 가져오기
// - document.
// - getElementById
let h1Tag = document.getElementById("text") // h1Tag는 객체가됨
console.log(h1Tag)
// 1 - 2) 내가 가져온 요소에서 컨텐츠만 추출
// - 안에 있는(inner) + 텍스트 (Text) => .innerText
console.log("안에 있는 데이터", h1Tag.innerText)
// 1 - 3) 해당 컨텐츠 수정
h1Tag.innerText = "안녕히가세요"
// 1 - 4) 해당 컨텐츠의 태그값까지 변경
h1Tag.innerHTML = "<a href=#> 안녕히가세요 <a/>"
// Mission 2) class가 num인 요소를 살펴보자!
// 2 - 1) class가 num인 요소를 가져오기
// - document.
// - getElements
// - ByClassName()
// => HTMLCollection (유사배열) => 인덱스 활용
let pTag = document.getElementsByClassName("num")
console.log(pTag)
console.log(pTag[1])
// 2 - 2) 내가 가져온 요소의 값을 수정
pTag[1].innerText = "바뀐 값"
// 2 - 3) class가 num인 모든 데이터를 다 가져오기
for(i = 0; i <= pTag.length - 1; i++){
console.log(pTag[i].innerText)
}
</script>
</body>
</html>새로운 정보인 DOM을 배우다. 내가 이해하기 위해 생각한 DOM을 사용하는 이유는 바로 이거다. 우리는 지금 HTML과 JS를 함께 사용하고 있다. 그 두 개는 어딘가 연관되어야 하는데 그 둘의 다리 역할을 해주는 게 바로 DOM이다.
솔직히 프리트레이닝 기간에 DOM을 배울 때는 이해가 1도 안 됐는데, 왜 쓰는지를 생각하고 실습도 해 보고 이해하려고 노력해서 이해했다. HTML에 접근하기 위해서 노드의 개념도 이해해야한다.
최상위 노드인 문서노드에 접근하기 위해
// 1 - 1) id가 text인 요소를 가져오기
// - document.
// - getElementById
let h1Tag = document.getElementById("text") // h1Tag는 객체가됨
console.log(h1Tag)
document, 여기에서 얻겠다(get), 요소(Element)를, 무엇을통해 (ById, ByClass...)
→ document.getElementById(아이디이름) 이렇게 가져온 요소는 객체가 된다.
이렇게하면 HTML 문서에 있는 요소(태그, 속성, 컨텐츠)를 가져온다. 거기에 텍스트(컨텐츠)만 꺼내고 싶다면
// 1 - 2) 내가 가져온 요소에서 컨텐츠만 추출
// - 안에 있는(inner) + 텍스트 (Text) => .innerText
console.log("안에 있는 데이터", h1Tag.innerText)
// 1 - 3) 해당 컨텐츠 수정
h1Tag.innerText = "안녕히가세요"
// 1 - 4) 해당 컨텐츠의 태그값까지 변경
h1Tag.innerHTML = "<a href=#> 안녕히가세요 <a/>"innerText를 사용하면된다. 컨텐츠가 아닌 HTML의 다른 것을 건드리고싶으면 innerHTML을 사용한다.
가져오는게 여러개면
// 2 - 1) class가 num인 요소를 가져오기
// - document.
// - getElements
// - ByClassName()
// => HTMLCollection (유사배열) => 인덱스 활용
let pTag = document.getElementsByClassName("num")
console.log(pTag)
console.log(pTag[1])
// 2 - 2) 내가 가져온 요소의 값을 수정
pTag[1].innerText = "바뀐 값"
// 2 - 3) class가 num인 모든 데이터를 다 가져오기
for(i = 0; i <= pTag.length - 1; i++){
console.log(pTag[i].innerText)
}
배열의 형태가 되서 유사배열로 불린다. 배열처럼 인덱스로 접근 가능하다.
'Front-End > 3. JavaScript 실전' 카테고리의 다른 글
| [JS] Ex09_이벤트.html (0) | 2023.06.19 |
|---|---|
| [JS] Ex08_DOM예제.html (0) | 2023.06.19 |
| [JS] Ex05_객체실습.html (0) | 2023.06.19 |
| [JS] Ex04_객체.html (0) | 2023.06.19 |
| [JS] Ex03_햄버거실습.html (0) | 2023.06.19 |
