logo

TechCodeview

자바스크립트의 textContent

JavaScript textContent 속성은 페이지의 텍스트 콘텐츠를 설정하고 가져오는 데 작동합니다. 일부 정보, 태그, 대용량 데이터 및 해당 노드의 텍스트 내용을 전달하고 표시하는 데 사용됩니다. TextContent는 스크립트 태그의 nodeValue와 다르며 여러 데이터 유형의 하위 노드에서 콘텐츠를 반환합니다.

노드가 텍스트 노드, 처리 명령 또는 태그 설명인 경우 javascript textContent는 텍스트를 가져오거나 설정합니다. TextContent는 각 하위 노드의 textContent 연결을 표시합니다. 다른 노드 유형에 대한 처리 지침과 설명을 표시합니다.

통사론

JavaScript 텍스트 콘텐츠에는 두 가지 구문을 사용할 수 있습니다. 첫 번째 구문은 노드의 텍스트를 설정하는 데 사용되며 두 번째 구문은 노드의 텍스트를 검색하는 데 사용됩니다.

구문 1:

다음 구문은 텍스트 콘텐츠를 사용하여 노드의 텍스트를 설정하는 데 사용됩니다.

CTC 전체 형태 
 Node_element.textContent = information;

구문 2:

다음 구문은 텍스트 콘텐츠를 사용하여 노드의 텍스트를 가져옵니다.

 Node_element.textContent;

반환 값:

  • 문자열에는 출력 노드와 해당 하위 노드의 텍스트가 포함됩니다. 요소가 문서 또는 문서 유형인 경우 출력에 null 값이 표시됩니다.
  • 하위 노드는 textContent 속성 세트를 사용하여 단일 Text 노드로 대체됩니다. 속성에는 콘텐츠로 특정 문자열이 있습니다.

예

다음 예에서는 textContent 속성을 사용하여 다양한 유형의 정보를 설정하고 가져오는 방법을 보여줍니다.

실시예 1

다음 예에서는 자바스크립트의 텍스트 콘텐츠를 사용하여 정보를 설정합니다. 노드 데이터에는 태그의 텍스트가 표시됩니다.

 textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <h4> Set node information for child javascript nodes</h4> Click Here! function display() { var ele = document.getElementById(&apos;textContent_information&apos;); ele.textContent = &apos; <i> JavaScript </i> <h2> Set or get the content of node </h2>&apos;; }

산출

다음 이미지는 콘텐츠 노드를 사용하여 데이터를 설정하는 것을 보여줍니다.

문자열을 배열로 변환 java
자바스크립트의 textContent

실시예 2

다음 예에서는 정보를 가져오기 위해 자바스크립트의 텍스트 콘텐츠를 사용합니다. 클릭 기능의 버튼 값을 얻을 수 있습니다.

 textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <h4> Get node information for child javascript nodes </h4> Get node information for child javascript nodes <br> Click the Button! var text_in = document.getElementById(&apos;myData1&apos;).textContent; function fdisplay() { document.getElementById(&apos;textContent_information&apos;).textContent = text_in; }

산출

다음 이미지는 콘텐츠 노드를 사용하여 데이터를 설정하는 것을 보여줍니다.

자바스크립트의 textContent

실시예 3

다음 예에서는 정보를 가져오기 위해 자바스크립트의 텍스트 콘텐츠를 사용합니다. 클릭 기능의 버튼 값을 얻을 수 있습니다.

 textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <h4> Set node information for child javascript nodes </h4> Click the Button! function fdisplay() { var text_in = document.getElementById(&apos;value&apos;).textContent; document.getElementById(&apos;textContent_information&apos;).textContent = text_in; }

산출

다음 이미지는 콘텐츠 노드를 사용하여 데이터를 설정하는 것을 보여줍니다.

자바스크립트의 textContent

실시예4

다음 예제에서는 버튼 값의 텍스트 콘텐츠를 사용하여 정보를 가져오고 설정합니다. 버튼을 클릭하면 값을 얻을 수 있습니다.

 textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <p id="info"> Get node information for child javascript nodes </p> Click the Button! <br> See the value! function fdisplay() { document.getElementById(&apos;value&apos;).textContent = &apos;the information of the node has been changed using click function!&apos;; var text_in = document.getElementById(&apos;info&apos;).textContent; document.getElementById(&apos;values&apos;).textContent = text_in; }

산출

다음 이미지는 콘텐츠 노드를 사용하여 데이터를 설정하는 것을 보여줍니다.

자바스크립트의 textContent

실시예5

다음 예제에서는 버튼 값에 대한 innerHtml, innerText 및 텍스트 콘텐츠를 사용하여 정보를 가져오고 설정하는 데 사용합니다. 버튼을 클릭하면 출력 데이터의 차이를 확인할 수 있습니다.

 textContent in JavaScript using node <h3> The textContent in JavaScript using node </h3> <p> Get node information for child javascript nodes </p> Click the innerHtml Button! Click the innerText Button! Click the textcontent Button! function fdisplay() { document.getElementById(&apos;finfo&apos;).innerHTML = &apos; <b> textContent in JavaScript using node </b> the information of the node has been changed using click function!&apos;; } function sdisplay() { document.getElementById(&apos;sinfo&apos;).innerText = &apos; <b> textContent in JavaScript using node </b> <br> the information of the node has been changed using click function!&apos;; } function tdisplay() { document.getElementById(&apos;tinfo&apos;).textContent = &apos; <b> textContent in JavaScript using node </b> <br> textContent in JavaScript using node <br> the information of the node has been changed using click function!&apos;; }

산출

다음 이미지는 콘텐츠 노드를 사용하여 데이터를 설정하는 것을 보여줍니다.

자바스크립트의 textContent

실시예 6

다음 예제에서는 목록 데이터를 가져오고 onclick 버튼 값의 텍스트 콘텐츠를 사용하여 정보를 설정하는 데 사용합니다. 목록 데이터와 기타 태그 정보를 얻을 수 있습니다.

 textContent in JavaScript using node <h3> The textContent in JavaScript using node </h3> <p> Get node information for child javascript nodes </p> <ul id="students"> <li id="std1">David</li> <li id="std2">Sai</li> <li id="std3">Ruta</li> <li id="std4">Saniya</li> <li id="std5">Kevin</li> </ul> Click the textcontent Button! function tdisplay() { var students = document.getElementById(&apos;students&apos;).textContent; document.getElementById(&apos;tinfo&apos;).textContent = students; }

산출

다음 이미지는 콘텐츠 노드를 사용하여 데이터를 설정하는 것을 보여줍니다.

자바스크립트의 textContent

실시예 7

자바 추가 문자열

정보나 문자열이 비어 있으면 텍스트 콘텐츠는 빈 데이터를 지원하지 않습니다. 빈 문자열을 값으로 표시합니다.

 textContent in JavaScript using node <h3> The textContent in JavaScript using node </h3> <p> Get node information for child javascript nodes </p> <ul id="students"> </ul> Click the textcontent Button! function tdisplay() { var students = document.getElementById(&apos;students&apos;).textContent; console.log(students); if(students != &apos;&apos;){ document.getElementById(&apos;tinfo&apos;).textContent = &apos;child node does not available of the student parent node.&apos;; }else{ document.getElementById(&apos;tinfo&apos;).textContent = &apos;child node is available of the student parent node.&apos;; } }

산출

다음 이미지는 텍스트 콘텐츠 노드를 사용하여 데이터 가져오기를 보여줍니다.

자바스크립트의 textContent

자바스크립트 텍스트 내용의 핵심

  • javascript 정보가 자동으로 HTML을 제거하면 textContent 활용이 안전해집니다.
  • 텍스트 내용과 정보에는 공백과 내부 요소 태그가 포함됩니다. innerHTML 속성이 이를 반환합니다.
  • innerText 속성은 공백이나 내부 요소 태그 없이 텍스트만 반환합니다. textContent 속성은 공백은 포함하지만 내부 요소 태그는 제외되는 텍스트를 반환합니다.
  • 하위 트리에 있는 모든 텍스트 노드의 값이 결합되어 텍스트 콘텐츠에 대해 설정되고 텍스트 콘텐츠에서 가져옵니다. 노드에 하위 항목이 없으면 문자열은 비어 있습니다.
  • innerText는 사람이 읽을 수 있고 모든 CSS에 적용되는 텍스트를 반환합니다. 데이터에 html 태그를 사용하면 텍스트 내용을 읽기가 어렵습니다.
  • 속성이 노드에 설정되면 모든 하위 항목이 제거되고 단일 텍스트 노드가 지정된 값으로 자리를 잡습니다.

결론

텍스트 콘텐츠에는 여러 유형의 정보가 표시됩니다. html 태그에는 단일 방법을 사용하여 표시되는 정보와 목록 데이터가 필요합니다.