자바 스크립트의 출력
자바스크립트는 여러 방법을 통해 결과물을 HTML 페이지에 출력할 수 있습니다.
자바스크립트에서 사용할 수 있는 출력 방법은 다음과 같습니다.
1. window.alert() 메소드
window alert() 메소드는 자바스크립트에서 가장 간단하게 데이터를 출력할 수 있는 방법 입니다.
window.alert() 메소드는 브라우저와는 별도의 대화 상자를 띄워 사용자에게 데이터를 전달해 줍니다.
alert() 메소드는 콘솔을 학습할 때 같이 확인했었습니다.
https://blue-dot.tistory.com/137
자바 스크립트(js) 입문 공부 1. 자바 스크립트, 콘솔이란?
자바 스크립트(js)란? 자바 스크립트는 로직을 구현할 수 있는 프로그래밍 언어입니다. 자바 스크립트는 서버 개발, 어플리케이션 개발 등 다양한 목적을 위해 사용할 수 있지만 주된 목적은 웹
blue-dot.tistory.com
2. HTML DOM 요소를 이용한 innerHTML 프로퍼티
실제 자바스크립트 코드에서 출력을 위해 가장 많이 사용되는 방법은 HTML DOM 요소를 이용한 innerHTML 프로퍼티를 이용하는 방법입니다.
우선 document 객체의 getElementByID()나 getElementsByTagName() 등의 메소드를 사용하여 HTML 요소를 선택합니다.
DOM 에 대해서는 하단에서 같이 공부해볼게요.
3. document.write() 메소드
document.write() 메소드는 웹 페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력합니다.
따라서 document.write() 메소드는 대부분 테스트나 디버깅을 위해 사용됩니다.
해당 내용은 나중에 같이 학습하겠습니다.
4. console.log() 메소드
해당 내용은 첫 번째 학습 때 같이 배웠었습니다.
https://blue-dot.tistory.com/137
자바 스크립트(js) 입문 공부 1. 자바 스크립트, 콘솔이란?
자바 스크립트(js)란? 자바 스크립트는 로직을 구현할 수 있는 프로그래밍 언어입니다. 자바 스크립트는 서버 개발, 어플리케이션 개발 등 다양한 목적을 위해 사용할 수 있지만 주된 목적은 웹
blue-dot.tistory.com
DOM 이란?
웹브라우저는 HTML 문서를 해석하고, 화면을 통해 해석된 결과를 보여줍니다.
해석한 HTML 코드를 화면을 통해 보여주는 과정을 ‘렌더링’이라 합니다.
코드를 해석해주는 중간단게에서는 렌더링이 있습니다.
브라우저는 HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 문서(객체)를 생성합니다.
이를 DOM이라 하며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링합니다.
HTML DOM은 노드(node) 라고 불리는 트리 형식의 구조 단위에 정보를 저장합니다.
DOM은 이러한 노드들을 정의하고, 그들 사이의 관계르 설명해주는 역할을 합니다.
각각의 요소 요소 아래로 트리처럼 뻗어나가는 문서의 구조가 보입니다.
이러한 노드 트리는 최상위에 있는 루트 노드(root node)로부터 시작해서 가장 낮은 레벨인 텍스트 노드까지 내려갑니다.
자바스크립트에서는 HTML DOM 을 이용해서 노드 트리에 포함된 모든 노드에 접근할 수 있습니다.
즉, DOM은 이런 형태로 자료 구조를 형성을 해서 브라우저가 보관하고, 그것을 토대로 화면을 보여줍니다.
DOM은 자바스크립트를 사용해서 웹 콘텐츠를 추가, 수정, 삭제하거나마우스 클릭, 키보드 타이핑 등 이벤트에 대한 처리를 정의할 수 있도록 제공되는 프로그래밍 인터페이스(interface 입니다.
화면에 보여주기 위해서 데이터를 한 결과가 DOM 이고 그것을 화면으로 보여줍니다.
DOM에서 추가적인 기능을 넣게 될 때 HTML 에 렌더링 되어 기능이 수행됩니다.
즉 DOM은 문서의 데이터를 토대로 만들어진 별도의 데이터 입니다.
문서 인터페이스
브라우저 객체 window의 document 속성은 창이 포함한 문서를 참조합니다.
window.document은 현재 브라우저에 렌더링되고 있는 문서를 의미하며, 이 속성을 이용하면 해당 문서에 접근할 수 있습니다.(DOM에 대한 진입점 역할을 하는 프로그래밍 인터페이스)
즉, 문서 인터페이스로 만들어진 DOM 객체가 문서로 표현이 됩니다. document를 이용하면 DOM 객체에 접근할 수 있습니다.
document는 문서(HTML, XML, SVG 등)에 대한 공통의 속성과 메소드를 제공합니다.
즉, 다양한 API(Application Programming Interface)를 제공해요.
요소를 선택하는 대표적인 메소드 몇 개를 먼저 알아볼게요.
document.querySelector
document.getElementById
(두 메소드는 모두 요소(Element) 객체를 반환)
document.querySelector
document의 querySelector 메소드는 선택자를 인자로 전달받아, 전달받은 선택자와 일치하는 문서 내 첫 번째 요소(Element)를 반환합니다.
일치하는 요소가 없으면 ‘없다’라는 의미의 null 데이터를 반환합니다.
인자로 전달되는 선택자는 문자열 타입의 ‘유효한 CSS 선택자’를 의미합니다.
document.getElementById
document의 getElementById 메소드는 id를 인자로 전달받아, 전달받은 선택자와 일치하는 문서 내 요소(Element)를 반환합니다.
일치하는 요소가 없으면 ‘없다’라는 의미의 null 데이터를 반환하며, 인자로 전달되는 선택자는 문자열 타입의 ‘id’를 의미합니다.
textContent
textContent 속성은 해당 노드가 포함하고 있는 텍스트 콘텐츠를 표현하는 속성입니다.
textContent를 통해 요소가 포함한 텍스트를 읽을 수도, 변경할 수도 있습니다.
이에 대한 예시를 한번 같이 살펴볼게요.
<body>
<h1> 이 또한 지나가리라 </h1>
<p class="text"> 나와 같은 고통의 길을 걷고 같은 꿈을 바라봐 주는 믿음 </p>
<p class="text" id="center"> 너의 손을 붙잡고 끝없는 폭풍 속을 이 거친 파도 속을 뛰어들 자신이 있어 </p>
<p class="text">눈물도 초라함도 이 또한 지나가리라 너와 함께 내 마지막까지 </p>
<script src="./script04.js"></script>
</body>//유효한 css선택자로 선택하기)
let h1 = document.querySelector("h1")
console.log(h1)
각각의 textContent 를 활용해볼게요.
//유효한 css선택자로 선택하기)
let h1 = document.querySelector("h1")
console.log(h1.textContent)
let text = document.querySelector("p.text")
console.log(text.textContent)
//id로 선택하기
let center = document.getElementById("center")
console.log(center.textContent)
중간에 DOM 이 브라우저 내부에 있기 때문에 문서 조작은 DOM 에 대한 조작입니다.
그렇기 때문에 중간에 textContent로 제목을 바꾼다고 하더라도 실제 코드가 바뀌지 않습니다.
let h1 = document.querySelector("h1")
console.log(h1.textContent)
h1.textContent = "원래 제목이 있었던 곳"
여기까지 텍스트 요소에 대한 사항을 살펴보았어요.
다음에는 비교 연산에 대해서 확인해볼게요.
'자바스크립트 JS > JS 입문 공부일지' 카테고리의 다른 글
| 자바 스크립트(js) 입문 공부 6. 조건문, 반복문 while (0) | 2022.11.16 |
|---|---|
| 자바 스크립트(js) 입문 공부 5. 비교 연산, 조건문 if문 , if~ else 문 (0) | 2022.11.16 |
| 자바 스크립트(js) 입문 공부 3. 연산, null, undefined, boolean (0) | 2022.11.16 |
| 자바 스크립트(js) 입문 공부 2. 변수 let, 상수 const, 템플릿 리터럴 Template Literals (0) | 2022.11.16 |
| 자바 스크립트(js) 입문 공부 1. 자바 스크립트, 콘솔이란? (0) | 2022.11.16 |