Skip to content

Latest commit

 

History

History
56 lines (39 loc) · 1.76 KB

2001 textContent와 innerText 차이.md

File metadata and controls

56 lines (39 loc) · 1.76 KB
Raw

Issue: textContent와 innerText 차이

상황:

DOM Node의 string을 읽어오는 과정에서 어떤 걸로 읽어오는게 좋을지 비교하다가 정리한다.


생각해낸 방안:

  • textContent 사용하기

방안: textContent 사용하기 (성공)


  • innerText는 standard가 된지 오래되지 않았고, textContent가 좀 더 일찍 standard가 되었다. 이는 브라우저 호환성에 영향을 미친다.

  • innerText는 target으로 잡은 한 node에서 보이는 text만 가져오는 반면 textContent는 현 노드에서 포함되있는 text를 전부 가져온다.

    • ex)
    •  <span>Hello <span style="display: none;">World</span></span>

 innerText will return 'Hello', while textContent will return 'Hello World'.

  • innerText는 결과를 return하기 위해서 textContent보다 성능적으로 떨어진다. 이는 layout의 정보를 필요로 하기 때문이다.

  • innerText는 HTMLElement에 한정되어 있지만 textContent는 모든 Node Object에 정의되어 있다.

위의 두번째 비교와 네번째 비교에서 봤을 때 어떻게 어떤 목적으로 사용하느냐에 따라 어떤 API를 활용할지 구분해야될 것 같다.




    참조:
    https://kellegous.com/j/2013/02/27/innertext-vs-textcontent/
    https://stackoverflow.com/questions/1359469/innertext-works-in-ie-but-not-in-firefox/1359822#1359822
    http://perfectionkills.com/the-poor-misunderstood-innerText/