JSFiddle - React, Tailwind, and code Playground
HTML
<div id="content">
<p>HTML5 캔버스</p>
<p>
『HTML5 캔버스 첫걸음』으로 흥미롭고 인터랙티브한 게임과 엔터테인먼트 애플리케이션을 만드는 방법을 배울 수 있다. HTML5와 자바스크립트를 이용해 <em>캔버스로 그래픽, 애니메이션, 애플리케이션</em>을 만들 수 있다. 캔버스를 사용하면 브라우저 내에 바로 그릴 수 있으며, 데스크톱 컴퓨터와 아이폰이나 안드로이드 같은 모바일 기기에서 모두 실행 가능하다.
</p>
<p><img src="http://cfile23.uf.tistory.com/original/152738444F20A9D43AD1FE" width="100" alt="" /></p>
<p>■ HTML5가 제공하는 흥미로운 새 기능과 활용 방법</p>
</div>
JavaScript
function selectRange(obj) {
if (window.getSelection) {
var selected = window.getSelection();
selected.selectAllChildren(obj);
console.log(selected.toString());
} else if (document.body.createTextRange) {
var range = document.body.createTextRange();
range.moveToElementText(obj);
range.select();
alert(range.htmlText);
}
};
/* usage example */
var content = document.getElementById("content");
var paragraph = content.getElementsByTagName("p");
for(var i = 0; i < paragraph.length; i ++) {
paragraph[i].onclick = function() {
selectRange(this);
};
}