요소속성정보
<!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으로 바뀜
'중급과정 > HTML5 CSS' 카테고리의 다른 글
| [HTML/CSS] 231122_2일차 (1) | 2023.11.22 |
|---|---|
| [HTML/CSS] 231121_1일차 (0) | 2023.11.22 |
