JavaScript에서 `innerText`, `innerHTML`, `textContent` 및 `value`의 주요 차이점은 무엇입니까?

innerText, innerHTML 및 value 간의 차이점 탐색

차이점 이해

JavaScript에서 innerText, innerHTML 및 value는 웹 페이지의 HTML 콘텐츠와 상호 작용하는 다양한 방법을 제공합니다. 이러한 각 속성에는 고유한 특정 기능과 사용 사례가 있습니다.

innerHTML: HTML 표현

innerHTML 속성은 요소의 하위 항목을 설명하는 HTML 구문을 반영합니다. 요소의 열기 및 닫기 태그 내에서 HTML 콘텐츠의 표현을 제공합니다.

innerText: 렌더링된 텍스트

innerText 속성은 요소 내에서 렌더링된 텍스트를 캡처합니다. 적용된 스타일과 공백 규칙을 고려하여 콘텐츠를 화면에 나타나는 대로 표시합니다. 특히 innerText:

• 스크립트 태그와 CSS 스타일시트를 무시합니다
• 공백을 자르고 요소 사이에 줄바꿈을 추가합니다
  -텍스트 변환 및 공백 규칙을 적용합니다

textContent: 원시 Text

textContent는 노드와 그 하위 항목의 텍스트 콘텐츠를 검색합니다. innerText와 달리 공백을 유지하고 적용된 스타일이나 표시 속성을 무시합니다. 그 결과 콘텐츠가 더욱 문자 그대로 표현됩니다.

value: 요소별 속성

value 속성은 주로 텍스트 상자 및 확인란과 같은 양식 입력에 적용됩니다. 현재 컨트롤에 저장된 값을 나타냅니다. 특히:

• 입력 요소의 경우 value에는 사용자가 입력한 문자열이 포함됩니다.
• 선택 요소의 경우 value에는 선택한 옵션의 값이 포함됩니다.

비교를 위한 예제 스크립트

다음 JavaScript 스크립트는 이러한 속성 간의 차이점은 다음과 같습니다.

var properties = ['innerHTML', 'innerText', 'textContent', 'value'];

// Logs property as [propName]value[/propertyName]
function logProperty(obj, property) {
  var value = obj[property];
  console.log('[' + property + ']' + value + '[/' + property + ']');
}

// Main
log('=============== ' + properties.join(' ') + ' ===============');
for (var i = 0; i < properties.length; i++) {
  logProperty(document.getElementById('test'), properties[i]);
}

아래 HTML 스니펫에 적용하면 스크립트는 콘솔에 다음을 출력합니다.

<div>

출력:

[innerHTML][
  Warning: This element contains <code>code</code> and <strong>strong language</strong>.
][/innerHTML]
[innerText]Warning: This element contains code and strong language.[/innerText]
[textContent]
  Warning: This element contains <code>code</code> and <strong>strong language</strong>.
[/textContent]
[value]null[/value]

이 출력은 innerText가 렌더링된 텍스트, innerHTML, 완전한 HTML 표현, textContent를 반환하는 방법을 보여줍니다. 공백을 포함한 원시 텍스트와 값(test는 div 요소이므로)은 null입니다.

위 내용은 JavaScript에서 `innerText`, `innerHTML`, `textContent` 및 `value`의 주요 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!