문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======Javascript HTML DOM textContent Property======
<WRAP left notice 80%>
  * description : Javascript HTML DOM textContent Property
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-06-07
</WRAP>
<WRAP clear></WRAP>
\\
=====The source of the article==== 
[[https://www.w3schools.com/jsref/prop_node_textcontent.asp|Javascript HTML DOM textContent Property]]\\

====Example====
요소의 내부 텍스트(inner text)를 가져옵니다.\\
<code javascript>
  <body>
    <p>Click the button to get the text content of the button element.</p>

    <button onclick="myFunction()" id="myBtn">Try it</button>

    <p><strong>Note:</strong> The textContent property is not supported in Internet Explorer 8 and earlier.</p>

    <p id="demo"></p>

    <script>
      function myFunction() {
        var x = document.getElementById('myBtn').textContent;
        /* id="myBtn"의 텍스트 Try it을 변수 x 에 대입 */
        document.getElementById('demo').innerHTML = x;
        /* 버튼 클릭 시 id="myBtn"의 텍스트 Try it을 가진 변수 x를 id="demo"에 표시 */
      }
    </script>
  </body>
</code>

=====Definition and Usage=====
%%textContent%% 속성은 지정된 노드 및 모든 하위 항목의 텍스트 콘텐츠를 설정하거나 반환합니다.\\
\\
%%textContent%% 속성을 설정하면, 모든 자식 노드가 제거되고 지정된 문자열을 포함하는 단일 텍스트 노드로 대체됩니다.\\
\\
**Note:** 이 속성은 %%innerText%% 속성과 비슷하지만 몇 가지 차이점이 있습니다.\\

  * %%textContent%%는 모든 요소의 텍스트 콘텐츠를 반환하는 반면, %%innerText%%는 %%<script>%% 및 %%<style>%% 요소를 제외한 모든 요소의 콘텐츠를 반환합니다.
  * %%innerText%%는 %%CSS%%로 숨겨진 요소의 텍스트를 반환하지 않습니다 (textContent는 반환).

**Tip:** 때때로 %%nodeValue%% 속성 대신 사용할 수 있지만, 이 속성(%%textContent%%)은 모든 자식 노드의 텍스트도 반환한다는 점을 기억하십시오.\\
\\
**Tip:** 요소의 %%HTML%% 콘텐츠를 설정하거나 반환하려면 %%innerHTML%% 속성을 사용하세요.\\

=====Syntax=====
노드의 텍스트 콘텐츠를 반환합니다.\\
<code javascript>
node.textContent
</code>
\\

노드의 텍스트 콘텐츠를 설정합니다.\\
<code javascript>
node.textContent = text
</code>

=====Property Values=====
| Value  ^ Type    ^ Description             ^
| text   | String  | 특정 노드의 텍스트 콘텐츠를 지정합니다.  |

=====More Examples=====

====Example====
%%id="demo"%%를 가진 %%<p>%% 요소의 텍스트 콘텐츠를 변경합니다.\\

<code javascript>
<body>
    <p id="demo" onclick="myFunction()">Click me to change my textual content.</p>

    <script>
      function myFunction() {
        document.getElementById('demo').textContent = 'Paragrahp changed!';
      } /* 버튼 클릭 시 id="demo" 의 텍스트를 Paragrahp changed!로 변경함 */
    </script>
</code>

====Example====
%%id="myList"%%를 가진 %%<ul>%% 요소의 모든 텍스트 콘텐츠를 가져옵니다.\\
<code javascript>
  <body>
    <ul id="myList">
      <li>Coffee</li>
      <li>Tea</li>
    </ul>
    <p>Click the button to get the text content of the ul element.</p>

    <button onclick="myFunction()">Try it</button>

    <p><strong>Note:</strong> Textual content includes the text of all child nodes as well.</p>

    <p><strong>Note:</strong> The textContent property is not supported in Internet Explorer 8 and earlier.</p>

    <p id="demo"></p>
    <!-- 버튼 클릭 시 Coffee Tea가 표시됨  -->

    <script>
      function myFunction() {
        var x = document.getElementById('myList').textContent;
        document.getElementById('demo').innerHTML = x;
      }
    </script>
  </body>
</code>

====Example====
다음의 예제는 %%innerText, innerHTML, 그리고 textContent%% 사이의 일부 차이점을 보여줍니다.\\

<code javascript>
<body>
    
    <h3>Differnece between innerText, innerHTML,   and textContent</h3>

    <p id="demo">   This element has extra spacing, and contains <span>a span element</span>.</p>

    <button onclick="getInnerText()">Get innerText</button>
    <button onclick="getHTML()">Get innerHTML</button>
    <button onclick="getTextContent()">Get textContent</button>

    <p><strong>Note:</strong> The textContent property is not supported in Internet Explorer 8 and earlier, 
    and the innerText property is not supportedin IE9 and earlier.</p>

    <p id="demo"></p>

    <script>
      function getInnerText() {
        alert(document.getElementById('demo').innerText);
      } /* This element has extra spacing, and contains a span element. */
      
      function getHTML() {
        alert(document.getElementById('demo').innerHTML);
      } /*    This element has extra spacing,   and contains <span>a span element</span>. */

      function getTextContent() {
        alert(document.getElementById('demo').textContent);
      } /*    This element has extra spacing,   and contains a span element. */
    </script>

  </body>
</code>
\\
지정된 속성을 사용하여 위의 %%<p>%% 요소의 콘텐츠를 가져옵니다.\\
\\
**%%innerText%%** 반환 : "This element has extra spacing, and contains a span element."\\
**%%innerHTML%%** 반환 : "   This element has extra spacing,   and contains <span>a span element</span>."\\
**%%textContent%%** 반환 : "   This element has extra spacing,   and contains a span element."\\

%%innerText%% 속성은 공백 및 내부 요소 태그 없이 텍스트만 반환합니다.\\
%%innerHTML%% 속성은 모든 공백 및 내부 요소 태그를 포함하여 텍스트를 반환합니다.\\
%%textContent%% 속성은 간격은 있지만 내부 요소 태그는 없는 텍스트를 반환합니다.\\










{{tag>오션, Javascript HTML DOM textContent Property}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
