자바 스크립트 만 사용하여 div 태그의 텍스트를 얻는 방법 (jQuery 없음)


94

나는 이것을 시도했지만 "정의되지 않음"을 표시합니다.

function test() {
var t = document.getElementById('superman').value;
alert(t); }

간단한 Javascript no jQuery를 사용하여 값을 얻는 방법이 있습니까?

답변:


166

당신은 아마 시도하려는 것 textContent대신에 innerHTML.

을 감안할 때 innerHTMLA와 DOM의 콘텐츠를 반환 String하지 독점적으로 "텍스트"절의 div. div텍스트 만 포함되어 있지만 모든 사용 사례에 적합하지 않다는 것을 알고 있으면 괜찮습니다 . 이러한 경우에는 textContent대신 사용해야 할 것입니다.innerHTML

예를 들어, 다음 마크 업을 고려하십시오.

<div id="test">
  Some <span class="foo">sample</span> text.
</div>

다음과 같은 결과를 얻을 수 있습니다.

var node = document.getElementById('test'),

htmlContent = node.innerHTML,
// htmlContent = "Some <span class="foo">sample</span> text."

textContent = node.textContent;
// textContent = "Some sample text."

자세한 내용은 MDN을 참조하십시오.


.textContentIE8 이하에서는 지원되지 않으므로 사용하기가 다소 어렵습니다.
Blender

2
진실. Indead, innerHTML질문에서 요청한대로 텍스트 콘텐츠 만 반환하지 않습니다. .textContent<IE9
dhar

4
오래된 질문이지만 .textContent 가 오늘날의 세계에 더 적합한 대답입니다.
Donovan 2014

이것은 더 많은 도움이됩니다. 대단히 감사합니다.
LogoS

10

textContentIE8 및 이전 버전에서는 지원되지 않기 때문에 다음 과 같은 해결 방법이 있습니다.

var node = document.getElementById('test'),
var text  = node.textContent || node.innerText;
alert(text);

innerText IE에서 작동합니다.


0

을 사용하거나 innerHTML(그런 다음 HTML에서 텍스트를 구문 분석) innerText.

let textContentWithHTMLTags = document.querySelector('div').innerHTML; 
let textContent = document.querySelector('div').innerText;

console.log(textContentWithHTMLTags, textContent);

innerHTMLinnerText포함 (파이어 폭스 제외한 <44) 모든 브라우저에서 지원되는 IE6 .


0

실제로 .NET Framework에 document.getElementById()액세스하기 위해 함수 를 호출 할 필요가 없습니다 div.

다음과 같이 object직접 사용할 수 있습니다 id.

text = test.textContent || test.innerText;
alert(text);
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.