[J.S_DOM] 3-1. 요소의 내용/속성 변경 예제

 

3.1 내용 변경하기 예제

 

📝 설명 : textContent, innerText, innerHTML을 사용 하는 예제 

<div id="textBox">기존 텍스트입니다.</div>

<button onclick="changeText()">텍스트 변경</button>

<script>

  function changeText() {

    const box = document.getElementById("textBox");

    box.textContent = "변경된 텍스트입니다!";

  }

</script>

 

3.2 요소 속성 조작 예제

 

📝 설명: 이미지의 src 속성을 변경하는 예제

<img id="myImage" src="default.jpg" width="200" />

<button onclick="changeImage()">이미지 변경</button>

<script>

  function changeImage() {

    const img = document.getElementById("myImage");

    img.setAttribute("src", "new-image.jpg");

  }

</script>

 

3.3 클래스 조작 예제

 

📝 설명: 버튼 클릭으로 클래스를 토글

<div id="myBox" class="blueBox">이 박스는 스타일이 바뀝니다.</div>

<button onclick="toggleClass()">클래스 토글</button>

<style>

  .blueBox { background-color: lightblue; }

  .redBox { background-color: lightcoral; }

</style>

<script>

  function toggleClass() {

    const box = document.getElementById("myBox");

    box.classList.toggle("redBox");

  }

</script>

 

3.4 스타일 조작 예제

 

📝 설명: 자바 스크립트로 스타일을 직접 변경 하는 예제

<div id="styledBox" style="padding: 10px; border: 1px solid black;">스타일이 바뀝니다</div>

<button onclick="changeStyle()">스타일 변경</button>

<script>

  function changeStyle() {

    const box = document.getElementById("styledBox");

    box.style.backgroundColor = "yellow";

    box.style.color = "green";

    box.style.fontWeight = "bold";

  }

</script>

 

3.4.1 CSS 방식 (외부 또는 <style> 사용)

 

📝설명:

• CSS 코드 안에서 클래스를 정의하여 여러 요소에 재사용이 가능
• 유지보수와 그룹 스타일링에 좋음

<div class="styledBox">CSS로 스타일 적용됨</div>

<style>

  .styledBox {

    background-color: lightblue;

    color: darkblue;

    padding: 10px;

    font-weight: bold;

    border: 1px solid gray;

  }

</style>

 

3.4.2 JavaScript .style 방식 (인라인 스타일 조작)

 

📝설명:

• 스크립트로 요소를 동적으로 조작시 사용
• 실시간으로 스타일을 바꾸고 싶을때 유용, 그러나 반복 사용에는 비효율적

 

🔍 요약 비교

항목	CSS(클래스/ID)	JavaScript .style
적용 방식	외부 스타일 시트 또는 <style> 태그	JS 코드에서 직접 조작
사용 시점	페이지 로드 시 자동 적용	이벤트 후 동적으로 적용
재사용성	높음	낮음 (한 요소에 직접 적용)
유지보수	쉬움	어려움 (많아지면 복잡함)
주 용도	전체 디자인 관리	조건에 따라 스타일 변경