1. innerHTML
: 자바스크립트에서 "요소 전체"를 읽어들이거나 변경하는 속성
- 내용을 읽어올 때 ⭐️태그+속성+내용⭐️을 모두 포함해서 읽어옴
- 내용을 변경할 때 태그는 HTML 요소로 해석해서 나옴
<!--HTML-->
<button onclick="getInnerHTML1()">innerHTML로 읽어오기</button>
<button onclick="setinnerHTML1()">innerHTML로 변경하기</button>
<p id="test1" class="box">
테스트 입니다<br>
<b = class="red">안녕하세요></b>
</p>innerHTML로 읽어오기
innerHTML로 변경하기
테스트 입니다
안녕하세요?
function getInnerHTML1(){
//HTML문서 내의 id 속성값이 "test1"인 요소를 얻어오기
// 상수형 변수 t1dㅔ 저장
const t1 = document.getElementId("test1");
//브라우저 콘솔에 출력
console.log(t1.innerHTML);
}1) innerHTML 응용
: 컨테이너 안에 작은 정사각형 박스가 버튼을 누르면 수평(왼->오) 쌓이고 박스를 넘어가면 스크롤이 생기고 계속 쌓임
<style>
<!-- 컨테이너-->
#area1{
width: 500px;
height: 300px;
boder: 1px solid black;
background-color: aquamarine;
display: flex;
<!--flex-wrap: nowarp이 기본값-->
flex-wrap: warp;
align-items: felx-start;
overflow: auto;
<!--내부 요소가 부모 초과시 초과딘 방향으로 스크롤 자동 추가
방향은 overflow-y 또는 -x로 변경가능-->
}
<!--쌓일 박스-->
.area-box1{
box-sizing: border-box;
width: 100px;
height: 100px;
background-color: yellow;
brder: 2px solid red;
}
</style>
<body>
<button type="button" onlick="add()">추가하기</botton>
<div id="area1">
<div class="area-box"></div>
</div>
</dody>추가하기
function add(){
//id 속성값이 "area1"인 요소를 얻어와 변수에 저장
const area1 = document.getElementById("area1");
//area1요소를 이전 내용에 새로운 내용을 누적
//+=을 사용하여 계쏙해서 누적되도록!!
area1 innerHTML += "<div class='area1-box'></div>";
}2. innerText
: 자바스크립트에서 요소에 ⭐️작성된 내용⭐️만 읽어들이거나 변경하는 속성
- 내용을 읽어올 때 요소의 태그, 속성은 무시함
- 내용을 변경할 때 대입되는 태그는 모두 문자열로 해석됨
(=HTML문자로 해석되지 않는다!)
<button onclick="getInnerText1()">innerText로 읽어오기</button>
<button onclick="setInnerText1()">innerText로 변경하기</button>
<p id="test2" class="box">
테스트 입니다<br>
<b class="red">하이하이</b>
</p>innerText로 읽어오기
innerText로 변경하기
테스트 입니다
하이하이
//"test2"를 전역에 선언
const t2 = document.getElementById=("test2");
//getInnerText1()읽어오기(내용만 읽어옴)
function getInnerText1(){
console.log("t2.innerText");
}
function setInnerText1(){
t2 innerText="<b class='red'> 변경된<br><br>내용입니다';
}<\b class='red'> 변경된<\br><\br>내용입니다.';
3. window.cinfirm("내용")
: 질문에 대한 "확인" / "취소" 결과를 얻고자 할 때 사용하는 대화 상자
- 확인 : true 반환
- 취소 : fasle 반환
<div id="confirmTest" class="area1-box"></div>
<button conclick="fnConfirm()">confirm 확인하기<button> [기본]
function fnConfirm(){
confirm("정말 삭제하시겠습니까?");
}
// confirm 창에 '확인' 시-> 삭제
// '취소' 시 -> false[응용]
function fnConfirm(){
if(confirm("배경색을 분홍색으로 바꾸겠습니까?")){
document.getElementById("confirmTest").style.background-color="pink";
}else{
console.log("취소함");
}
}-> 'confirm 확인하기' 클릭 후 
->확인 클릭 시 confirm 확인하기
4. window.prompt("내용")
: 텍스트를 작성할 수 있는 대화 상자
-
확인 : 입력한 값을 반환
-
취소 : null
window객체는 html 문서의 최상위 객체이기 때문에 붙이지 않아도 됨 window객체 아래에는 onclick, confirm, prompt 등 많음<button id="promptTest" onclick="fnPrompt()">버튼</button>버튼
//prompt("내용") function fnPrompt(){ if(input != null){ document.getElementById("prmptTest").innerText=input; } else{ alert("취소되었습니다.") } }-> 입력창에 '하이' 입력시
하이
-> 변경
javascript 데이터입출력 방식! 꼭! 기억하기
1. innerHTML
: 요소 전체(태그+속성+내용)를 읽어들이거나 변경하는 속성
2. innerText
: 요소의 태그, 속성은 가져오지 않고 작성된 내용만 읽어오거나 변경하는 속성
3. window.confirm
:"확인"/"취소" 결과를 얻고자 할때 사용하는 대화 상자
4. window.prompt
: 텍스트를 작성할 수 있는 대화 상자로 입력된 값을 반환하거나 취소하면 null반환
