라라리라
2023.08.30 / Step 1 [DOM_태그선택2] - 코딩 42 일차 본문
_0107_innerText1.html
<!DOCTYPE html>
<html lang="ko">
<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>innerText</title>
</head>
<body>
<!--
[개념]
(1) innerText : 사용자에게 보여지는 텍스트만 가져옴
(2) innerHTML : html 전체를 다 가져옴
(3) textContent : 숨겨진 텍스트까지 포함해서 텍스트만 모두 다 가져옴
(4) value : <select>, <input>태그의 값을 가져옴
-->
<p id="target">텍스트 지우기</p>
<script>
let element = document.querySelector("#target");
element.innerText = "";
</script>
</body>
</html>
텍스트 지우기
_0107_innerText2.html
<!DOCTYPE html>
<html lang="ko">
<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>
</head>
<body>
<!--
[개념]
(1) innerText : 사용자에게 보여지는 텍스트만 가져옴
(2) innerHTML : html 전체를 다 가져옴
(3) textContent : 숨겨진 텍스트까지 포함해서 텍스트만 모두 다 가져옴
(4) value : <select>, <input>태그의 값을 가져옴
-->
<h4>학생 명단</h4>
<p>이름 : <span id="name"></span></p>
<p>나이 : <span id="age"></span></p>
<script>
document.querySelector("#name").innerText = "김철수"; //이름 : 김철수
document.querySelector("#age").innerText = 10; //나이 : 10
</script>
</body>
</html>
학생 명단
이름 :
나이 :
_0108_innerHTML1.html
<!DOCTYPE html>
<html lang="ko">
<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>innerHTML</title>
</head>
<body>
<!--
[개념]
(1) innerText : 사용자에게 보여지는 텍스트만 가져옴
(2) innerHTML : html 전체를 다 가져옴
(3) textContent : 숨겨진 텍스트까지 포함해서 텍스트만 모두 다 가져옴
(4) value : <select>, <input>태그의 값을 가져옴
-->
<p id="target">
<span style="color: red;">텍스트</span> 지우기
</p>
<script>
let element = document.querySelector("#target");
console.log(element.innerText); // 텍스트 지우기
console.log(element.innerHTML); // <span style="color: red;">텍스트</span> 지우기
element.innerHTML = '<span style="color:blue;font-weight:bold">텍스트</span>지우기';
</script>
</body>
</html>
텍스트 지우기
_0108_innerHTML2.html
<!DOCTYPE html>
<html lang="ko">
<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>
</head>
<body>
<!--
[개념]
(1) innerText : 사용자에게 보여지는 텍스트만 가져옴
(2) innerHTML : html 전체를 다 가져옴
(3) textContent : 숨겨진 텍스트까지 포함해서 텍스트만 모두 다 가져옴
(4) value : <select>, <input>태그의 값을 가져옴
-->
<h4>학생 명단</h4>
<p id="name"></p>
<p id="age"></p>
<script>
document.querySelector("#name").innerHTML = "이름 : <span style='color:blue'>김철수</span>";
document.querySelector("#age").innerHTML = "나이 : <span>10</span>";
</script>
</body>
</html>
학생 명단
_0109_textContent.html
<!DOCTYPE html>
<html lang="ko">
<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>textContent</title>
</head>
<body>
<!--
[개념]
(1) innerText : 사용자에게 보여지는 텍스트만 가져옴
(2) innerHTML : html 전체를 다 가져옴
(3) textContent : 숨겨진 텍스트까지 포함해서 텍스트만 모두 다 가져옴
(4) value : <select>, <input>태그의 값을 가져옴
-->
<div id="content">
<span style="display: none">숨겨진 텍스트</span>
</div>
<script>
let element = document.querySelector("#content");
console.log(element.innerText); //
console.log(element.innerHTML); // <span style="display: none">숨겨진 텍스트</span>
console.log(element.textContent); // 숨겨진 텍스트
</script>
</body>
</html>
_0110_value1.html
<!DOCTYPE html>
<html lang="ko">
<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>value</title>
</head>
<body>
<!--
[개념]
(1) innerText : 사용자에게 보여지는 텍스트만 가져옴
(2) innerHTML : html 전체를 다 가져옴
(3) textContent : 숨겨진 텍스트까지 포함해서 텍스트만 모두 다 가져옴
(4) value : <select>, <input>태그의 값을 가져옴
-->
<input type="text" id="name" value="김철수">
<script>
let element = document.querySelector("#name");
console.log(element.value);
</script>
</body>
</html>
_0110_value2.html
<!DOCTYPE html>
<html lang="ko">
<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>
</head>
<body>
<!--
[개념]
(1) innerText : 사용자에게 보여지는 텍스트만 가져옴
(2) innerHTML : html 전체를 다 가져옴
(3) textContent : 숨겨진 텍스트까지 포함해서 텍스트만 모두 다 가져옴
(4) value : <select>, <input>태그의 값을 가져옴
-->
<input type="text" id="content" value="안녕하세요">
<select name="subject">
<option value="kor">국어</option>
<option value="math">수학</option>
<option value="eng">영어</option>
</select>
<script>
document.querySelector("#content").value = "반가워요"; //안녕하세요 => 반가워요
console.log(document.querySelector("select[name='subject']").value);
</script>
</body>
</html>
'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글
| 2023.09.04 / Step 2 [DOM_속성변경] - 코딩 44 일차 (0) | 2023.09.04 |
|---|---|
| 2023.08.31 / Step 1 [DOM_태그선택3] - 코딩 43 일차 (0) | 2023.08.31 |
| 2023.08.29 / Step 1 [DOM_태그선택1] - 코딩 41 일차 (0) | 2023.08.29 |
| 2023.08.28 / Step 1 [DOM_기초문법_기타] - 코딩 40 일차 (0) | 2023.08.28 |
| 2023.08.27 / Step 1 [DOM_기초문법_문자열] - 코딩 39 일차 (0) | 2023.08.27 |