HTML 요소 바꾸는 메서드
| 메서드 | 설명 |
| element.innerHTML = 새로운 html content; | HTML 요소 내용 변경 |
| element.attribute = 새로운 value; | HTML 요소 속성 값 변경 * 속성 없으면 undefined |
| element.setAttribute(attribute, value); | HTML 요소 속성 값 변경 메서드 * 속성 없으면 새로 생성 |
| element.style.property = 새로운 style; | HTML 요소 스타일 변경 |
**getAttribute(attribute); // 문서객체의 태그속성값을 얻어오는 메서드, 게터
<!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>
<p id="demo">기존 내용입니다.</p>
<script>
document.querySelector("#demo").innerHTML = "새로운 내용입니다.";
</script>
<p>위 내용은 변경된 문자열입니다. </p>
</body>
</html>
<!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>
<img src="img/btob.jpg" width="160px" height="120px">
<button onclick="changeAttr()">Try it</button>
<script>
function changeAttr() {
document.querySelector("img").alt = "test_img";
}
</script>
</body>
</html>
try it 클릭시 <img src="img/btob.jpg" width="160px" height="120px" alt="test_img"> alt값 test_img 속성 변경
<!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>
<p id="demo">속성 바꾸기2중입니다.</p>
<button onclick="changeColor()">Try it</button>
<script>
function changeColor() {
document.querySelector("#demo").setAttribute("class","setAttr");
}
</script>
</body>
</html>
개발자도구 확인시 <p id="demo" class="setAttr">속성 바꾸기2중입니다.</p> 이렇게 확인됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>changeColor</title>
</head>
<body>
<p id="demo" style="color: blue">속성 바꾸기3 중입니다.</p>
<button onclick="changeColor()">Try it</button>
<script>
function changeColor() {
document.querySelector("#demo").style.color = "red";
}
</script>
</body>
</html>
'웹 프로그래밍 기초 > DOM 문서객체' 카테고리의 다른 글
| document 컬렉션 (0) | 2025.04.11 |
|---|---|
| HTML 요소 검색하기 (0) | 2025.04.11 |
| HTML 요소 추가/삭제하기 (0) | 2025.04.11 |
| HTML 요소 선택하기 (0) | 2025.04.11 |
| DOM (1) | 2025.04.11 |