Develop record
[Javascript]document 본문
-창이 포함된 문서를 참조
-현재 브라우저에 렌더링되고 있는 문서
-document 속성을 이용하여 해당 문서에 접근 가능
-DOM에 대한 진입점 역할을 하는 프로그래밍 인터페이스
-페이지의 정보를 얻거나 웹 요소를 생성 및 조작 가능
-모든 종류의 문서에 대한 공통의 속성과 메소드를 제공 -> 다양한 API 제공
https://developer.mozilla.org/ko/docs/Web/API/Document
1. document.querySelector
-선택자를 인자로 전달받아, 전달받은 선택자와 일치하는 문서 내 첫번째 요소를 반환
-일치하는 요소가 없으면 null 반환
-인자로 전달되는 선택자는 문자열 타입의 '유효한 CSS 선택자'를 의미
//p 태그를 선택
document.querySelector("p");
//id가 text인 요소를 선택
document.querySelector("#text");
//class가 text인 요소를 선택
document.querySelector(".text");
//모든 class를 불러옴
document.querySelectorAll(".className")
2. document.getElementById
-id를 인자로 전달받아, 전달받은 선택자와 일치하는 문서 내 요소를 반환
-일치하는 요소가 없으면 null 반환
-인자로 전달되는 선택자는 문자열 타입의 'id'를 의미
-기호없이 id만 적으면 됨
//id가 text인 요소를 선택
document.getElemntById("text");
//id가 image인 요소를 선택
document.getElemntById("image");
=> 1,2 모두 요소(element)객체를 반환
3. textContent
-노드가 포함하고 있는 텍스트 콘텐츠를 표현하는 속성
-요소가 포함한 텍스트를 읽기, 수정 가능
//p 요소를 반환받아 상수로 이름을 붙임
const p = document.querySelector("p");
//p 요소의 textContent 속성을 콘솔에 출력
console.log(p.textContent)
//p 요소의 textContent 값을 변경
p.textContent = "텍스트를 이걸로 바꿔!!"
<!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>큰 제목입니다</h1>
<p>헬로우 이건 문단입니다</p>
<p id="text">아이디가 있는 문단입니다</p>
<p class="paragraph">클래스가 있는 문단입니다</p>
<script src="document.js"></script>
</body>
</html>console.log(document.querySelector("h1"))
console.log(document.querySelector("p"))
console.log(document.querySelector("#text"))
console.log(document.querySelector(".paragraph"))
//console.log(document.querySelector(".parag")) -> null 반환
console.log(document.getElementById("text"))
console.log(document.getElementById("p")) //null 반환
const h1 = document.querySelector("h1")
console.log(h1.textContent) //수정 전 문자열 콘솔에 출력
h1.textContent = "안뇽안뇽~~" //수정 -> 문자열 형태로 들어가야 함 => 변경 후 문자열 출력
const p = document.getElementById("text")
p.textContent = "겟엘리먼트바이아이디!!" //id가 text인 값을 수정
console.log(p.textContent) //수정된 문자가 콘솔에 출력
'Programming Language > Javascript' 카테고리의 다른 글
| [Javascript] Event (0) | 2024.01.14 |
|---|---|
| [Javascript]함수 (1) | 2024.01.11 |
| [Javascript] For (0) | 2024.01.10 |
| [Javascript] While (0) | 2024.01.10 |
| [Javascript] 조건문 (0) | 2024.01.10 |
'Programming Language/Javascript' Related Articles
more
