<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>아이디 속성 선택</title>
</head>
<body>
<h1>아이디 속성 선택</h1>
<div id="first">
<strong>첫 번째 DIV입니다.</strong>
</div>
<div id="second">두 번째 DIV입니다.</div>
<textarea id="third" cols="25">세 번째 TEXTAREA입니다.</textarea>
</body>
<script>
const first = document.getElementById("first");
const second = document.getElementById("second");
const third = document.getElementById("third");
// value는 항상 입력된 값을 답아준다.
// 미리 작성한 값ㄷ은 value가 알 수 없다.
console.log(first.value); //undefined
console.log(second.value); //undefined
// innerText는 [ 미리 작성한 값 ]을 담아준다.
// 접근한 객체에 텍스트가 없어도 자식 태그까지 모두 검사하여 텍스트를 찾은 뒤 가져와준다.
console.log(first.innerText);
console.log(second.innerText);
first.innerText = "안녕하세요!";
second.innerText = "안녕히가세요!"
만약에
first.innerText = "안녕하세요!";
second.innerText = "안녕히가세요!"
// innerHTML은 텍스트를 가져올 수도 있지만,
// 내부 HTML태그를 전부 가져온다.
console.log(first.innerHTML)
console.log(second.innerHTML);
first.innerHTML = "<strong>안녕하세요</strong>";
second.innerHTML = "안녕히가세요!";
Console창에는
이렇게 나오고 , innerText를 주석처리한다면
// first.innerText = "안녕하세요!";
// second.innerText = "안녕히가세요!"
// innerHTML은 텍스트를 가져올 수도 있지만,
// 내부 HTML태그를 전부 가져온다.
console.log(first.innerHTML)
console.log(second.innerHTML);
first.innerHTML = "<strong>안녕하세요</strong>";
second.innerHTML = "안녕히가세요!";
// textarea는 작성한 텍스트가 value에 들어가기 때문에,
// 항상 value를 사용해야 한다.
console.log(third.value);
third.value = "반가워~!"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>아이디 속성 선택 실습</title>
</head>
<body>
<h1>아이디 속성 선택 실습</h1>
<p id = "message"></p>
</body>
<script>
// "안녕하세요" 문구를 굵게 표시해서 p태그 안에 넣는다.
const message = document.getElementById("message");
message.innerHTML = "<strong>안녕하세요</strong>"
const data = "이것은 두 번재 인사"
const message2 = document.getElementById("message");
message2.innerHTML += `<p><strong>${data}</strong></p>`;
</script>
</html>
'front-end > javascript' 카테고리의 다른 글
| Javascript DOM - CSS선택자로 가져오기 (0) | 2024.04.05 |
|---|---|
| Javascript DOM - name으로 가져오기 (0) | 2024.03.30 |
| Javascript DOM - class로 가져오기 (0) | 2024.03.29 |
| Javascript 모듈화 + 비동기 처리 3 (0) | 2024.03.29 |
| Javascript 모듈화+비동기 처리 2 (0) | 2024.03.28 |
