2024-10-15
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<!--
웹 문서의 특정한 선택자에 접근하는 방법.
1. querySelector() : 선택자 하나에 접근하는 방법
형식) document.querySelector(선택자)
2. querySelectorAll() : 여러 개의 선택자에 접근하는 방법.
형식) document.querySelectorAll(선택자)
3. querySelector(선택자).innerText
==> 웹 브라우저 창에 보이는 내용을 가져오는 속성.
4. querySelector(선택자).innerHTML
==> 선택자 안에 있는 태그와 내용을 함께 가져오는 속성.
5. querySelector(선택자).textContent
==> 선택자 안에 있는 내용을 가져오되, 소스에 있는대로 가져오는 속성.
3 ~ 5번의 경우
* 웹 요소의 내용을 가져올 경우에는 innerText나 textContent 속성을 사용하고,
* 요소 안에 있는 태그까지 같이 가져올 경우에는 innerHTML 속성을 사용하면 됨.
-->
<h1 id = "title">My Profile</h1>
<div id = "profile">
<img src="../images/images/pf.png" alt="이미지">
<div id="desc">
<p class="user"> 이 름 : 홍길동</p>
<p class="user"> 주 소 : 서울시 마포구</p>
<p class="user"> 연락처 : 02)123-1234</p>
</div>
</div>
<script src = "../js/test.js"></script>
</body>
</html>
'JavaScript > 기초 내용 정리' 카테고리의 다른 글
| JavaScript(DOM)_04 (0) | 2024.10.15 |
|---|---|
| JavaScript(DOM)_03 (0) | 2024.10.15 |
| JavaScript(DOM)_01 (0) | 2024.10.15 |
| JavaScript(BOM)_03 (0) | 2024.10.15 |
| JavaScript(BOM)_02 (0) | 2024.10.15 |