요소 가져오기
요소 가저오기 2단계
1. 변경하고 싶은 HTML 태그와 콘텐츠 요소를 가져온다
2. 가져온 요소의 콘테츠를 변경한다
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>2-04_html</title>
<link href="../../_common/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="header-contents">
<h1>HTML 변경하기</h1>
<h2>요소 가져오기</h2>
</div><!-- /.header-contents -->
</header>
<div class="main-wrapper">
<section>
<p id="choice">여기에 일시를 표시한다</p>
</section>
</div><!-- /.main-wrapper -->
<footer>JavaScript Samples</footer>
<script>
console.log(document.getElementById('choice'));
</script>
</body>
</html>
핵심 자바스크립트는 알파벳 대문자, 소문자를 구분한다
가져온 요소의 콘텐츠 변경
<section>
<p id="choice">여기에 일시를 표시한다</p>
</section>
<script>
document.getElementById('choice').textContent = new Date();
console.log(document.getElementById('choice').textContent);
</script>
textContent = new Date(); // 현재 일시 표시
요소의 콘테츠를 변경하는 textContent
document.getElementById(ID명).textContent = 변경하고 싶은 문자열;
Ex) String
document.getElementById('choice').textContent = '테스트입니다';
Ex) 가져온 요소의 콘텐츠만 끍어와서 콘솔에 출력한다.
<script>
document.getElementById('choice').textContent = new Date();
console.log(document.getElementById('choice').textContent);
</script>
textContent는 프로퍼티 ~ 객체의 상태를 나타낸다
window나 document 같은 모든 객체는 메스 외에도 프로퍼티(property)를 가지고 있다.
○○객체의 □□는 ☆☆이다
○○객체의 □□를 ☆☆로 한다
□□를 프로퍼티, ☆☆를 프로퍼티 값 이라고 할수 있다
일반적으로 프로퍼티 값은 읽고/쓰기가 가능하다(읽기 전용인 프로퍼티 존재)
<p id="choice"></p>의 textContent를 newDate()으로 한다
<p id="choice"></p>의 textContent 프로퍼티를 변경하고 있는 것이다.
** Element 객체
document.getElementById('ID명') 으로 가져온 요소는 Element 객체라는 독자적인 메서드와 프로퍼티를 가진 객체로 취급
textContent는 사실 Element 객체의 프로퍼티 중 하나
** 객체 정리
자바스크립트 프로그램을 작성하거나 코드를 이해하기위해서 ' 객 체 ' 가 무엇인지 이해하는 것이 매우 중요하다
브라우저를 구성하는 부품이나 HTML문서 그리고 이번에 사용한 일시 나 몇 번이고 등장한 문자열은 자바스크립트에서 모두 객체로 취급된다
객체에는 window 객체, console 객체, document 객체 등이 있으며 각각 고유의
메서드(객체에 xx해라, 하고 지시한다)
프로퍼티(객체의 상태를 나타낸다)
메서는 반드시 뒤에 ()를 붙여야한다. (0안에 매개변수를 지정할 수 있는것도 있다.
또한 프로피티는 객체가 가지고 있는 값을 일거나 변경할 수가 있다
요소변경 메소드 한개더
write // 가독성과 유지보수 어려움때문에 사용안함
<section>
<p id="choice">
<script>
document.write(new Date());
</script>
</p>
</section>
'Front-End > JavaScript' 카테고리의 다른 글
| 입력 내용에 따라 동작 변경하기 - 변수 (0) | 2017.03.11 |
|---|---|
| 자바스크립트 문법 - IF 문 (0) | 2017.03.08 |
| JS 소스코드 작성방법 (0) | 2017.03.07 |
| JS 기본 문법 (0) | 2017.03.07 |
| 자바스크립트 정체 (0) | 2017.03.04 |
