2. 입출력

innerHTML

JavaScript에서 요소 전체를 읽어들이거나 변경하는 속성

  - 내용을 읽어올 때 태그 + 속성 + 내용 모두 포함 

  - 내용을 변경할 때 태그는 html 요소로 해석

<button onclick ="getInnerHTML1()">innerHTML로 읽어오기</button>
    <button onclick ="setInnerHTML1()">innerHTML로 변경하기</button>

    <p id="test1" class="box">
        테스트1 입니다.<br>
        <b class="red">안녕하세요?</b>
    </p>

function getInnerHTML1() {
    // HTML문서 내에 id속성값을 읽어오기 
    const t1 = document.getElementById("test1")
    
    //브라우저 콘솔에 출력 
    console.log(t1.innerHTML)
}

// innerHTML로 변경하기(태그, 속성이 해석: HTML converter)
let setInnerHTML1 = ()=> {
    const t1 = document.getElementById("test1")
    t1.innerHTML = "<b class='red'>변경</b>"
}

 

🥸 응용: 박스 안에 박스 넣기

<button onclick="addBox()">추가</button>
    <div id = "area1">
        <div class="box1"></div>
    </div>
    * 박스 css 생략

let addBox = () =>{
    //1. id 속성값이 area1인 요소를 얻어와 변수에 저장
    const area1 = document.getElementById("area1")
    
    //2. area1 요소의 이전 내용에 새로운 내용을 누적: =이 아니라 +=으로 작성 =으로 하면 대체만 됨
    area1.innerHTML += "<div class='box1'></div>"
}

 

 

innerText

JavaScript에서 요소에 작성된 내용만을 읽어들이거나 변경하는 속성

 - 내용을 읽어올 때 요소의 태그나 속성은 무시

 - 내용을 변경할 때 대입되는 태그는 모두 문자열로만 해석

    <button onclick ="getInnerText1()">innerText로 읽어오기</button>
    <button onclick ="setInnerText1()">innerText로 변경하기</button>

    <p id="test2" class="box">
        테스트2 입니다.<br>
        <b class="red">안녕하세요?</b>
    </p>

const t2 = document.getElementById("test2")

//innerText로 읽어오기(내용만 얻어옴)
function getInnerText1(){
    console.log(t2.innerText)
}

let setInnerText1 = ()=> {
    t2.innerText = "<b>태그는 안돼~</b><br>문자만 가능~"
}

 

window.confirm("내용")

질문에 대한 "예/아니오" 결과를 얻고자 할 때 사용하는 대화 상자 

 - 확인: ture / 취소: false를 반환

 * window는 최상위 객체로 굳이 작성하지 않고 그냥 confirm("내용")으로만 작성 가능

    <div id="confirmTest" class="box1"></div><br>
    <button onclick="funConfirm()">confirm 확인</button>

let  funConfirm = ()=> {
    if(confirm("색을 변경하시겠습니까?")) {
        document.getElementById("confirmTest").style.backgroundColor="skyblue";
    } else {
        console.log("취소")
    }
}

 

 

window.prompt("내용")

text를 작성할 수 있는 대화상자

 - 확인: 입력값 / 취소: null 반환 

 <button id="promptTest" onclick="fnPrompt()">prompt 확인</button>

function fnPrompt() {
    const input = prompt("변경할 버튼명을 입력하시오.") 
    
    // input에 저장될 것: 입력한 값 or null
    if(input != null) {
        document.getElementById("promptTest").innerText = input
    } else {
        alert("취소하였습니다.")
    }
}