<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function() { //load 되자 마자 이 함수가 실행 될 것이다.
let img = document.getElementById("img1");
//img1이라는 아이디로 검색한 걸 img 에 넣어
let txt = "";
//txt 는 현재 공란
txt += "src : " + img.src + "<br/>";
// txt = txt(현재 공란) + "src : " + img.src + "<br/>"
txt += "id : " + img.id + "<br/>";
txt += "style.width : " + img.style.width + "<br/>";
txt += "style.height : " + img.style.height + "<br/>";
let res = document.getElementById("res");
//res 아이디를 찾아 변수 res 에 담아
res.innerHTML = txt;
//아이디 res 를 가진 것 사이에 txt를 넣어
let t1 = document.getElementById("t1");
//t1 이라는 아이디를 가진 걸 찾아서 t1에 넣어줘
t1.value = "hello dom";
//그 t1의 값은 "hello dom" 이다.
}
</script>
</head>
<body>
<div id="res"></div>
<img src = "../img/다음.png" id="img1" style= "width: 100px; height: 100px;">
<input type="text" id="t1">
<!-- 아이디로 접근 하면 form tag 없어도 된다. -->
</body>
</html>
'Front > javascript' 카테고리의 다른 글
[Javascript] 웹 페이지의 근육 심기 - DOM 요소 추가와 삭제 (0) | 2023.03.26 |
---|---|
[Javascript] 웹 페이지의 근육 심기 - DOM 요소 속성 값 변경 (0) | 2023.03.26 |
[Javascript] 웹 페이지의 근육 심기 - DOM (0) | 2023.03.26 |
[Javascript] 웹 페이지의 근육 심기 - 이미지 슬라이드 쇼 (0) | 2023.03.26 |
[Javascript] 웹 페이지의 근육 심기 - 회원가입 (0) | 2023.03.26 |