innerText vs textContent vs innerHTML


Nodeは、要素のテキスト値を読み取り、設定できます.

InnerText / innerHTML


処理される値はtext要素ですかhtml要素ですか

InnerHTML


バージョン
  • のHTML、XML全体をインポートします.
  • <div id='my div'>
    	화면에 출력될 텍스트
    	<span style= 'display:none'> 숨겨진 텍스트 </span>
    </div>
    
    //전체 태그를 포함한 텍스트가 출력된다.
    
    textのみを変更する場合は、innerHTMLではなくtextContentとして使用することもできます.
    InnerHTMLはtextContentよりも性能が劣り、XSS攻撃を受けやすいため、innerHTMLを使用してセキュリティチェックを行う項目ではコードが拒否される可能性があります.
  • なぜinnerHTMLを使用できないのか
  • innerHTMLの危険性について、XSSについて説明しましょう
  • 上記の理由から、必要に応じてinnerHTMLのみを使用!

    InnerText

  • ElinMENTの属性は、ユーザが見えるテキスト値
  • のみを取得する.
    <div id='my div'>
    	화면에 출력될 텍스트
    	<span style= 'display:none'> 숨겨진 텍스트 </span>
    </div>
    
    //<style>태그에 숨김기능이 추가되어, '숨겨진 텍스트'는 사용자가 보는 화면상에서 
    //보이지 않는다. '화면에 출력될 텍스트'만 노출된다.

    TextContent

  • 「ノード」の属性はinnerTextとは異なります
  • <div id='my div'>
    	화면에 출력될 텍스트
    	<span style= 'display:none'> 숨겨진 텍스트 </span>
    </div>
    
    //<script>태그는 무시하고 그저 텍스트라면 모두 가져와 출력한다.
    //'화면에 출력될 텍스트'와' 숨겨진 텍스트' 가 출력된다.