DOM으로 속성에 접근하는 방법을 배우다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>input태그 값 가져오기</h2>
<input type="text" id = "inputText">
<button id="inputBtn">Get!</button>
<h2>이미지 태그 값 가져오고 바꿔보기</h2>
<img width = "300px" src="https://mblogthumb-phinf.pstatic.net/MjAyMDA5MzBfMTQz/MDAxNjAxNDU0NjQ2MTQ2.j4BF8brAORpqM95d7-_yolEFGB-kEvZRqDZ3MZtD9ekg.AfCQ6EZbvdwRg0_BA-73lN2grfPCBoFBJ2ubhYENy9sg.JPEG.yunny_23/3D056E1A-9BB0-40C8-9046-9EB7B48E98E3-323-0000003CDE7A5723_file.jpg?type=w800">
<br/>
<button id="handlePic">Change</button>
<script>
// ** input 태그 내에 사용자가 입력한 값을 가져와보자!
// 1 - 1) input 버튼에 이벤트 걸기
document.getElementById("inputBtn").addEventListener("click", () => {
// 1 - 2) input 안에 있는 값을 가져오기
console.log("ck!")
let inputTag = document.getElementById("inputText")
console.log("input", inputTag.value) // innerText는 태그안의 컨텐츠 / value로 입력된 값을 가져온다.
// 1 - 3) value 값을 세팅
inputTag.value = ""; // 입력창 초기화
})
// ** img 태그에 접근하고 수정해보자!
// 1 - 1) 현재 imgTag의 속성값을 출력
let pic1 = document.querySelectorAll("img")[0]
console.log("현재사진", pic1)
// Case 1. getAttribute("속성이름")
console.log("사진의 너비는", pic1.getAttribute("width"))
console.log("사진의 주소는", pic1.getAttribute("src"))
// Case 2. 속성이름 (주로 사용)
console.log("사진의 너비는", pic1.width)
console.log("사진의 주소는", pic1.src)
// 1 - 2) Change 버튼을 클릭했을 때 사진이 변하도록
document.getElementById("handlePic").addEventListener("click", () => {
// Case 1. setAttribute("속성이름", "바꿀 값")
// pic1.setAttribute("width", "400px")
// Case 2. .속성이름 = "값"
// pic1.src = "https://image.gamechosun.co.kr/wlwl_upload/dataroom/df/2021/06/24/252054_1624525691.jpg"
// 버튼을 누를 때마다 사진이 변경 되게
if(pic1.src == "https://mblogthumb-phinf.pstatic.net/MjAyMDA5MzBfMTQz/MDAxNjAxNDU0NjQ2MTQ2.j4BF8brAORpqM95d7-_yolEFGB-kEvZRqDZ3MZtD9ekg.AfCQ6EZbvdwRg0_BA-73lN2grfPCBoFBJ2ubhYENy9sg.JPEG.yunny_23/3D056E1A-9BB0-40C8-9046-9EB7B48E98E3-323-0000003CDE7A5723_file.jpg?type=w800"){
pic1.src = "https://image.gamechosun.co.kr/wlwl_upload/dataroom/df/2021/06/24/252054_1624525691.jpg"
}
else{
pic1.src = "https://mblogthumb-phinf.pstatic.net/MjAyMDA5MzBfMTQz/MDAxNjAxNDU0NjQ2MTQ2.j4BF8brAORpqM95d7-_yolEFGB-kEvZRqDZ3MZtD9ekg.AfCQ6EZbvdwRg0_BA-73lN2grfPCBoFBJ2ubhYENy9sg.JPEG.yunny_23/3D056E1A-9BB0-40C8-9046-9EB7B48E98E3-323-0000003CDE7A5723_file.jpg?type=w800"
}
})
</script>
</body>
</html>HTML문서에서 input태그로 입력받은 값을 가져오기
// ** input 태그 내에 사용자가 입력한 값을 가져와보자!
// 1 - 1) input 버튼에 이벤트 걸기
document.getElementById("inputBtn").addEventListener("click", () => {
// 1 - 2) input 안에 있는 값을 가져오기
console.log("ck!")
let inputTag = document.getElementById("inputText")
console.log("input", inputTag.value) // innerText는 태그안의 컨텐츠 / value로 입력된 값을 가져온다.
// 1 - 3) value 값을 세팅
inputTag.value = ""; // 입력창 초기화
})HTML문서에서 input태그의 id값이 inputText니까 저렇게 가져오면 된다. innerText를 하면 input 태그의 컨텐츠가 없으니까 우리가 원하는 입력값을 가져오지 못한다. 우리가 원하는 입력값을 가져오려면 value를 사용해야한다.
HTML태그의 속성에 접근하기
// ** img 태그에 접근하고 수정해보자!
// 1 - 1) 현재 imgTag의 속성값을 출력
let pic1 = document.querySelectorAll("img")[0]
console.log("현재사진", pic1)
// Case 1. getAttribute("속성이름")
console.log("사진의 너비는", pic1.getAttribute("width"))
console.log("사진의 주소는", pic1.getAttribute("src"))
// Case 2. 속성이름 (주로 사용)
console.log("사진의 너비는", pic1.width)
console.log("사진의 주소는", pic1.src)
// 1 - 2) Change 버튼을 클릭했을 때 사진이 변하도록
document.getElementById("handlePic").addEventListener("click", () => {
// Case 1. setAttribute("속성이름", "바꿀 값")
// pic1.setAttribute("width", "400px")
// Case 2. .속성이름 = "값"
// pic1.src = "https://image.gamechosun.co.kr/wlwl_upload/dataroom/df/2021/06/24/252054_1624525691.jpg"- getAttribute("속성이름")
- 요소.속성이름
HTML속성의 속성값 변경
// 1 - 2) Change 버튼을 클릭했을 때 사진이 변하도록
document.getElementById("handlePic").addEventListener("click", () => {
// Case 1. setAttribute("속성이름", "바꿀 값")
// pic1.setAttribute("width", "400px")
// Case 2. .속성이름 = "값"
// pic1.src = "https://image.gamechosun.co.kr/wlwl_upload/dataroom/df/2021/06/24/252054_1624525691.jpg"
// 버튼을 누를 때마다 사진이 변경 되게
if(pic1.src == "https://mblogthumb-phinf.pstatic.net/MjAyMDA5MzBfMTQz/MDAxNjAxNDU0NjQ2MTQ2.j4BF8brAORpqM95d7-_yolEFGB-kEvZRqDZ3MZtD9ekg.AfCQ6EZbvdwRg0_BA-73lN2grfPCBoFBJ2ubhYENy9sg.JPEG.yunny_23/3D056E1A-9BB0-40C8-9046-9EB7B48E98E3-323-0000003CDE7A5723_file.jpg?type=w800"){
pic1.src = "https://image.gamechosun.co.kr/wlwl_upload/dataroom/df/2021/06/24/252054_1624525691.jpg"
}
else{
pic1.src = "https://mblogthumb-phinf.pstatic.net/MjAyMDA5MzBfMTQz/MDAxNjAxNDU0NjQ2MTQ2.j4BF8brAORpqM95d7-_yolEFGB-kEvZRqDZ3MZtD9ekg.AfCQ6EZbvdwRg0_BA-73lN2grfPCBoFBJ2ubhYENy9sg.JPEG.yunny_23/3D056E1A-9BB0-40C8-9046-9EB7B48E98E3-323-0000003CDE7A5723_file.jpg?type=w800"
}
})- 요소.setAttribute("속성이름", "변경 값")
- 요소.속성이름 = "변경 값"
'Front-End > 3. JavaScript 실전' 카테고리의 다른 글
| [JS] Ex13_DOM스타일.html (0) | 2023.06.20 |
|---|---|
| [JS] Ex12_DOM속성실습.html (0) | 2023.06.20 |
| [JS] Ex10_이벤트 실습.html (0) | 2023.06.19 |
| [JS] Ex09_이벤트.html (0) | 2023.06.19 |
| [JS] Ex08_DOM예제.html (0) | 2023.06.19 |
