1.9 Extracting Parts of the DOM Tree as JavaScript Strings - skullkim | yunki kim

innserHTML, outerHTML, textContent는 돔에 생성하고 추가할 수 있을 뿐만 아니라 돔의 일부를 js 문자열로 읽어올 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
   <html lang="en">
   <body>
       <div id="A"><i>Hi</i></div>
       <div id="B">Dude<strong> !</strong></div>
    <script>
        console.log(document.getElementById('A').innerHTML); //logs '<i>Hi</i>' console.log(document.getElementById('A').outerHTML); /* logs <div id="A">Hi</div> */
        /* notice that all text is returned even if it's in child element nodes (i.e., <strong> !</strong>) */
        console.log(document.getElementById('B').textContent); //logs 'Dude !'
        //NON standard extensions below i.e., innerText and outerText 
        console.log(document.getElementById('B').innerText); //logs 'Dude !' 
        console.log(document.getElementById('B').outerText); //logs 'Dude !'
   </script>
  </body>
</html>
Colored by Color Scripter

cs

textContent, innerText, outerText 프로퍼티는 선택된 노드가 가지고 있는 모든 텍스트 노드들을 반환한다. 따라서 document.body.textContent를 하게 되면 body 요소에 있는 모든 텍스트 노드들을 반환 한다

출처 - DOM Elightement

FEATURED TAGS