HTML DOM execCommand() 메서드 완벽 정리

HTML DOM의 execCommand() 메서드는 사용자가 선택한 편집 가능한 영역(editable section)에 지정된 명령을 실행하는 데 사용됩니다. 이 메서드를 활용하려면 먼저 document.designMode 속성을 설정하여 문서를 편집 가능한 상태로 만들어야 합니다.

문법(Syntax)

execCommand() 메서드의 기본 문법은 다음과 같습니다.

document.execCommand(command, showUI, value)

각 매개변수의 의미는 다음과 같습니다.

command: 편집 영역에 실행할 명령의 이름입니다.
showUI: 부울(boolean) 값으로, UI를 표시할지 여부를 지정합니다.
value: 일부 명령에 필요한 값입니다. 예를 들어 fontSize, foreColor 같은 명령에는 구체적인 값이 필요합니다.

command 매개변수에 사용 가능한 값

command 매개변수에는 아래와 같은 다양한 값들을 사용할 수 있습니다.

"backColor", "bold", "createLink", "copy", "cut", "defaultParagraphSeparator", "delete",
"fontName", "fontSize", "foreColor", "formatBlock", "forwardDelete", "insertHorizontalRule",
"insertHTML", "insertImage", "insertLineBreak", "insertOrderedList", "insertParagraph",
"insertText", "insertUnorderedList", "justifyCenter", "justifyFull", "justifyLeft",
"justifyRight", "outdent", "paste", "redo", "selectAll", "strikethrough", "styleWithCss",
"superscript", "undo", "unlink", "useCSS"

예제(Example)

execCommand() 메서드의 동작을 확인할 수 있는 간단한 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body ondblclick="changeText()">
<h1>execCommand() method example</h1>
<h3>double click on any text to change its fontsize and color</h3>
<p>Here is some text for being clicked upon. Some sample text is here too </p>
<script>
    document.designMode = "on";
    function changeText() {
      document.execCommand("fontSize",true,"20px");
      document.execCommand("backColor",true,"lightgreen");
      document.execCommand("foreColor",true,"blue");
}
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM execCommand() 메서드 완벽 정리 – 문법과 실전 예제

페이지에서 특정 텍스트를 더블클릭하면 해당 텍스트의 서식이 아래와 같이 변경됩니다.

HTML DOM execCommand() 메서드 완벽 정리 – 문법과 실전 예제

예제 코드 분석

위 예제가 어떻게 동작하는지 단계별로 살펴보겠습니다.

먼저 문서의 body 요소에 더블클릭(dblclick) 이벤트 핸들러를 연결했습니다. body의 자식 요소인 h1, h3, p 중 어느 곳이든 더블클릭하면 changeText() 함수가 실행됩니다.

<body ondblclick="changeText()">

다음으로 document.designMode를 "on"으로 설정하여 문서 전체를 편집 가능한 상태로 만듭니다. 그런 다음 changeText() 함수 내부에서는 document 객체의 execCommand() 메서드를 호출하며, fontSize, backColor, foreColor 명령과 각각에 대응하는 값을 매개변수로 전달합니다.

function changeText() {
document.execCommand("fontSize",true,"20px");
document.execCommand("backColor",true,"lightgreen");
document.execCommand("foreColor",true,"blue");
}

결과적으로 사용자가 더블클릭한 편집 가능한 영역에 글자 크기 20px, 배경색 연두색(lightgreen), 글자색 파란색(blue)이 순차적으로 적용됩니다.

참고 사항

execCommand() 메서드는 과거 리치 텍스트 편집기를 구현할 때 널리 사용되었지만, 현재는 공식적으로 폐기(deprecated)된 기술입니다. 최신 웹 개발에서는 ContentEditable API와 Clipboard API, 또는 document.execCommand() 대신 표준화된 대체 방법을 사용하는 것이 권장됩니다. 다만 레거시 브라우저 호환성이나 간단한 프로토타이핑 목적에서는 여전히 유용하게 활용될 수 있습니다.