쉬운 목차

DOM 노드 수정: HTML 요소와 속성을 수정하는 방법과 이를 사용하는 방법의 예

웹 개발에서 DOM(문서 개체 모델)은 웹 페이지의 구조와 내용을 조작하는 데 핵심적인 역할을 합니다.

DOM을 이해하고 사용함으로써 웹 페이지의 동적 특성을 구현하고 사용자와 상호 작용하는 다양한 기능을 제공할 수 있습니다.

이 문서에서는 HTML 요소의 내용과 속성을 변경하는 방법을 보여줍니다.

1. 변경 요소: innerHTML, innerText, textContent 속성 사용

innerHTML, innerText 및 textContent는 DOM 노드의 내용을 변경하는 데 사용되는 속성입니다.

'추천 관련글,

메서드/속성	설명
innerHTML	요소의 내용을 HTML 구조를 포함하는 문자열로 변경합니다.
innerText	CSS 스타일에 따라 가시성을 고려하여 요소의 내용을 일반 텍스트 문자열로 수정합니다.
텍스트 내용	CSS 스타일 가시성에 관계없이 요소의 내용을 일반 텍스트 문자열로 수정합니다.

예 1: innerHTML, innerText 및 textContent 사용

1. 샘플 코드

<!
DOCTYPE html>
<html>
<head>
    <title>DOM 노드 수정하기</title>
</head>
<body>
    <p id="innerHTML"></p>
    <p id="innerText"></p>
    <p id="textContent"></p>
  
    <script>
        window.onload = function() {
            document.getElementById("innerHTML").innerHTML = "<strong>새로운</strong> 내용입니다.

";
            document.getElementById("innerText").innerText = "<strong>새로운</strong> 내용입니다.

";
            document.getElementById("textContent").textContent = "<strong>새로운</strong> 내용입니다.

";
        };
    </script>
</body>
</html>

이 예제는 innerHTML, innerText 및 textContent를 사용하여 각 단락의 내용을 변경합니다.

이렇게 하면 각 메서드/속성마다 텍스트가 다르게 표시됩니다.

2. 실행 결과 화면

innerHTML, 내부 텍스트, textContent로 예제 코드를 실행한 결과 화면입니다.<br data-lazy-src=

예 2: innerText와 textContent 간의 차이점 표시

1. 샘플 코드

<!
DOCTYPE html>
<html>
<head>
    <title>DOM 노드 수정하기</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <p id="sample">
        이것은 <span class="hidden">숨겨진</span> 텍스트입니다.


    </p>
    <p id="innerText"></p>
    <p id="textContent"></p>
  
    <script>
        window.onload = function() {
            var sample = document.getElementById("sample");
            document.getElementById("innerText").innerText = "innerText 결과: " + sample.innerText;
            document.getElementById("textContent").textContent = "textContent 결과: " + sample.textContent;
        };
    </script>
</body>
</html>

이 예제는 CSS를 사용하여 단락의 일부 콘텐츠를 숨겨 innerText와 textContent 간의 차이를 보여줍니다.

innerText는 CSS 스타일에 따라 가시성을 존중하므로 숨겨진 요소를 포함하지 않습니다.

반면에 textContent는 가시성에 관계없이 모든 텍스트를 보존합니다.

2. 실행 결과 화면

innerText와 textContent의 차이점을 보여주는 화면입니다.<br data-lazy-src=

2. 속성 변경: setAttribute, removeAttribute 메소드 사용

setAttribute 및 removeAttribute는 HTML 요소에서 속성을 변경하거나 제거하는 데 사용됩니다.

방법	설명
setAttribute	지정된 속성을 추가하거나 수정합니다.
속성 제거	지정된 속성을 제거합니다.

1. 샘플 코드

<!
DOCTYPE html>
<html>
<head>
    <title>DOM 노드 수정하기</title>
</head>
<body>
    <a id="myLink" href="https://www.google.com" title="구글">구글</a>

    <script>
        window.onload = function() {
            // 속성값 변경
            document.getElementById("myLink").setAttribute("href", "https://blueshare.tistory.com");
            document.getElementById("myLink").setAttribute("target", "_blank");
            document.getElementById("myLink").innerText = "BlueShare 블로그"

            // 속성값 삭제
            document.getElementById("myLink").removeAttribute("title");;
        };
    </script>
</body>
</html>

2. 실행 결과 화면

setAttribute, removeAttribute 메소드를 사용한 코드 실행 결과의 예입니다.<br data-lazy-src=

그게 다야.

▼ 자바스크립트 기초 이전 글 ▼

03/23/2023 – (IT 연구/JavaScript) – DOM 노드 선택: 문서 개체 이해 및 HTML 요소 찾기

DOM 노드 선택: 문서 개체 이해 및 HTML 요소 찾기

DOM 노드 선택: 문서 개체 이해 및 HTML 요소 찾기 웹 페이지의 내용과 구조를 편집하고 조작하는 것은 웹 개발의 핵심입니다.

이를 가능하게 하는 기술 중 하나는 문서 개체 모델(DOM)입니다.

blueshare.tistory.com