반응형
DOM [Document Object Module]
DOM은 웹 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스임. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공
다른뜻으로는 document 객체와 관련된 객체의 집합을 의미함index.html
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1 id="title">Javascript 테스트</h1>
<script src="index.js"></script>
</body>
</html>- index.js
//Javascript로 선택된 부분은 모두 Object가 됨
const title = document.getElementById('title');
console.log(typeof title); //결과값 Object
// 즉 title은 Object 이며 title.*** 형태로 접근이 가능하다는 뜻
title.innerHTML = '변경된 title 내용';
console.log(title);
//결과값 <h1 id="title">변경된 title 내용</h1>
title.style.color = 'red';
console.log(title);
// 결과값 <h1 id="title" style="color: red;">변경된 title 내용</h1>
title Object 내용을 확인 할 수 있는 방법은 console.dir(title); 으로 확인이 가능함
querySelector
- Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환. 일치하는 요소가 없으면 null을 반환.
구문
document.querySelector(selectors);- selectors는 선택자
- ".myclass"는 myclass 라는 클래스를 사용하는 첫번째 요소를 반환하라는 의미
- "#myid"는 myid 라는 ID를 사용하는 첫번째 요소를 반환하라는 의미
//자바스크립에서 id로 선택하는 방법
const title = document.querySelector('#title');
//자바스크립에서 class로 선택하는 방법
const title = document.querySelector('.myClass');'javascript' 카테고리의 다른 글
| 9. if문(조건문) (0) | 2020.06.24 |
|---|---|
| 8. Event (0) | 2020.06.24 |
| 6. Function() (0) | 2020.06.24 |
| 5. Object (0) | 2020.06.23 |
| 4. Array (0) | 2020.06.23 |