개발세발
자바스크립트 3️⃣ - DOM, 비교연산자 본문
렌더링
웹브라우저가 HTML 문서를 해석하고, 화면을 통해 해석된 결과를 보여주는 과정
DOM (Document Object Model)
: 자바스크립트를 사용해서 웹 콘텐츠를 추가, 수정, 삭제하거나 마우스 클릭, 키보드 타이핑 등 이벤트에 대한 처리를 정의할 수 있도록 제공되는 프로그래밍 인터페이스(interface)
- 렌더링 시 브라우저는 HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 문서(객체)를 생성한다 (DOM)
- 브라우저는 DOM 을 통해 화면에 웹 콘텐츠를 렌더링 한다
- DOM에 자바스크립트 기능을 추가하는 것.
(*) DOM의 종류
1. Core DOM : 모든 문서 타입을 위한 DOM 모델
2. HTML DOM : HTML 문서를 위한 DOM 모델
3. XML DOM : XML 문서를 위한 DOM 모델
window.document
- 현재 브라우저에 렌더링 되고 있는 문서를 의미
➡️ 이 속성을 이용하여 해당 문서에 접근할 수 있다
브라우저 객체 window의 documnet 속성은 창이 포함한 문서를 참조한다
- Window.document는 페이지 콘텐츠, 즉 DOM에 대한 진입점 역할을 하는 프로그래밍 인터페이스
➡️ 페이지 정보를 얻거나 웹 쇼오슬 새성 및 조작할 수 있다.
document.querySelector
document의 querySelector 메소드는 선택자를 인자로 전달받아, 전달받은 선택자와 일치하는 문서 내 첫 번째 요소(Element)를 반환한다. 일치하는 요소가 없으면 ‘없다’라는 의미의 null 데이터를 반환한다.
document.getElementById
document의 getElementById 메소드는 id를 인자로 전달받아, 전달받은 선택자와 일치하는 문서 내 요소(Element)를 반환한다. 일치하는 요소가 없으면 ‘없다’라는 의미의 null 데이터를 반환한다.
textContent
해당 노드가 포함하고 있는 텍스트 콘텐츠를 표현 (텍스트 읽기 또는 변경 시 사용)
<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>
<style>
p#first{
color : red;
}
</style>
</head>
<body>
<p id="first"> what is DOM </p>
<P id="second">Let's gooo </P>
<script>
const p = document.querySelector("#first")
p.textContent = "I do not know"
console.log(p);
const p2 = document.getElementById("second")
p2.textContent = "lalalal "
</script>
</body>
비교 연산자
- 비교 역시 '연산'의 일종
- 비교 연산식은 언제나 boolean 데이터를 반환 ➡️ 질문에 대한 답이 true/false로 나오므로
1. 대소 비교 (크냐 작냐)
| 의미 | 연산자 | 예시 |
| 크다 | > | A > B |
| 작다 | < | A < B |
| 크거나 같다 | >= | A >= B |
| 작거나 같다 | <= | A <= B |
2. 등가 비교(같냐 다르냐)
| 의미 | 연산자 | 사용형태 |
| 같다 | == | A == B |
| 같지 않다 | != | A != B |
| 완전히 같다 | === | A === B |
| 완전히 같지 않다 | !== | A !== B |
| == | 추상적(abstract) 같음 비교 | 자료형이 서로 다르더라도 같을 수 있음 |
| === | 엄격한(strict) 같음 비교 | 자료형과 데이터가 모두 일치해야만 같다 |
연습 1)
console.log( 1 >= 0); //true
console.log( 1 < 0); //false
console.log('1' == 1); //false
console.log('1' === 1 ); //true
연습2)
const pw = "1000"
const user_pw = prompt("what is your password")
alert(pw == user_pw)
'코딩공부 > Javascript' 카테고리의 다른 글
| 자바스크립트 6️⃣ - 이벤트 (0) | 2022.08.12 |
|---|---|
| 자바스크립트 5️⃣ - 함수 (0) | 2022.08.09 |
| 자바스크립트 4️⃣ - 제어문, 반복문 (0) | 2022.08.04 |
| 자바스크립트 2️⃣ - prompt, 템플릿 리터럴 (0) | 2022.07.31 |
| 자바스크립트 1️⃣ - 기초 개념 (0) | 2022.07.28 |
