[HTML/CSS] 231123_3일차

요소속성정보

<!DOCTYPE html>
<html lang="en" id="id_html">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
#id_div {
    border: 2px solid black;
    width: 70%;
    height: 100px;
    background-color: pink;
}    
</style>    
</head>
<body>
    <!-- input:button 으로 입력양식 자동완성 -->
    <!-- 
        각 태그는 하나의 요소이자 객체 
        객체는 점 연산자 또는 배열식 접근법을 통해 요소의 속성에 접근 가능
    -->
    <input type="button" id="id_btn" name="nm_btn" value="클릭"
        onclick="f_btn()"> <br><br>

    <div id="id_div" onclick="f_div()">
      클릭하면 innerHTML로 요소사이 컨텐츠 정보를 읽음
    </div>

    <input type="button" value="문서 내 모든 소스 콘솔로 출력하기"
        onclick="f_all()">


<script>
function f_all(){
    console.log(id_html.outerHTML);
    console.log(document.getElementById('id_html').innerHTML);
}   


function f_div(){
    // console.log(id_div.innerHTML);
    var v_div = document.getElementById('id_div');
    console.log(v_div);
    console.log(v_div.innerHTML); //get

    v_div.innerHTML = "곧 점심시간이네요 <b>맛점</b>하세요!" //set
    v_div.innerHTML += "<br>내용이 추가되요...";
}    
function f_btn(){
    //버튼요소가 가진 각종 속성(id, name, value, onclick등) 값을 콘솔로 확인
    
    console.log(id_btn["type"]);
    console.log(id_btn.id);
    console.log(id_btn["name"]);
    console.log(id_btn.value);
    console.log(id_btn["onclick"]);
    id_btn.value = "CLICK"; //set의 기능

    //id속성값으로 요소에 접근하는 방식은 테스트 용으로만 사용하자
    //표준 방식은 document객체의 메소드를 활용하여 요소를 얻어내는 것!
    console.log( document.getElementById('id_btn').value );
}    
</script>        
</body>
</html>

 

<실행화면>

 

<DIV 부분 클릭시>

 

클릭 버튼 누르면 CLICK으로 바뀜