728x90
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>
|
cs |
textContent, innerText, outerText 프로퍼티는 선택된 노드가 가지고 있는 모든 텍스트 노드들을 반환한다. 따라서 document.body.textContent를 하게 되면 body 요소에 있는 모든 텍스트 노드들을 반환 한다
출처 - DOM Elightement