HTML DOM Mark 객체 – 요소를 동적으로 다루는 방법

HTML DOM의 Mark 객체는 HTML 문서 내의  요소를 나타냅니다.  요소는 텍스트 중에서 강조하고 싶은 부분을 형광펜으로 표시한 것처럼 하이라이트 처리할 때 사용됩니다.

문법(Syntax)

 요소를 생성하는 기본 문법은 다음과 같습니다.

var markObject = document.createElement("MARK")

document.createElement() 메서드에 문자열 'MARK'를 전달하면 새로운 mark 요소 노드가 생성되며, 이후 자식 텍스트 노드를 추가하거나 원하는 위치에 삽입하여 사용할 수 있습니다.

예제(Example)

다음 예제는 입력 필드가 비어 있을 때  요소를 동적으로 생성하여 경고 메시지를 화면에 표시하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Mark</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-Mark</legend>
<label>Full Name:
<input type="text" id="textSelect" autocomplete="off">
<input type="button" value="Submit" onclick="createMark()">
</label>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var textSelect = document.getElementById("textSelect");
    function createMark() {
        if(textSelect.value === ''){
            var mark = document.createElement('MARK');
            var textInput = document.createTextNode('Name Required');
            mark.appendChild(textInput);
            divDisplay.insertAdjacentElement("afterbegin", mark);
        }
    }
</script>
</body>
</html>

코드 설명

createMark() 함수는 'Submit' 버튼 클릭 시 호출됩니다.
입력 필드(#textSelect)의 값이 빈 문자열인지 확인합니다.
값이 비어 있다면 document.createElement('MARK')로 새로운 mark 요소를 만들고, document.createTextNode()로 'Name Required'라는 텍스트 노드를 추가합니다.
insertAdjacentElement("afterbegin", mark)를 사용해 결과를 표시하는 div 영역의 맨 앞에 mark 요소를 삽입합니다.

실행 결과(Output)

위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.

'Submit' 버튼 클릭 전 −

HTML DOM Mark 객체 – mark 요소를 동적으로 다루는 방법

'Submit' 버튼 클릭 후 − 이름이 입력되지 않은 상태에서 버튼을 누르면 노란색 배경으로 강조된 'Name Required' 메시지가 나타납니다.

HTML DOM Mark 객체 – mark 요소를 동적으로 다루는 방법

이처럼 HTML DOM Mark 객체를 활용하면 사용자 입력 검증 결과와 같은 중요한 정보를 시각적으로 돋보이게 표시할 수 있습니다.