Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML DOM Del 객체 완벽 정리 – 요소 생성과 제어 방법

HTML DOM Del 객체는 HTML <del> 요소와 연결된 객체입니다. 이 객체는 문서 내에서 삭제된 텍스트를 나타내는 <del> 요소를 표현하며, 이를 통해 새로운 <del> 요소를 동적으로 생성하거나 기존 요소에 접근하여 조작할 수 있습니다.

Del 객체의 주요 속성

Del 객체에서 사용할 수 있는 속성은 다음과 같습니다.

번호속성 및 설명
1cite
삭제된 텍스트의 출처를 나타내는 cite 속성 값을 설정하거나 반환합니다.
2dateTime
삭제된 시각을 나타내는 datetime 속성 값을 설정하거나 반환합니다.

구문(Syntax)

새로운 Del 객체를 생성하는 구문은 다음과 같습니다.

var p = document.createElement("DEL");

예제

다음은 HTML DOM Del 객체를 활용한 예제입니다.

<!DOCTYPE html>
<html>
<body>
<h2>del object example</h2>
<p>아래 버튼을 클릭하면 텍스트가 포함된 DEL 요소가 생성됩니다.</p>
<button onclick="delCreate()">CREATE</button>
<br><br>
<script>
    function delCreate() {
        var d= document.createElement("DEL");
        var t = document.createTextNode("Deleted text is here");
        d.appendChild(t);
        document.body.appendChild(d);
    }
</script>
</body>
</html>

실행 결과

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

HTML DOM Del 객체 완벽 정리 – del 요소 생성과 제어 방법

CREATE 버튼을 클릭한 후의 결과는 아래와 같습니다.

HTML DOM Del 객체 완벽 정리 – del 요소 생성과 제어 방법

예제 코드 분석

위 예제의 동작 과정을 단계별로 살펴보겠습니다.

먼저, 클릭 시 delCreate() 함수를 실행하는 CREATE 버튼을 생성했습니다.

<button onclick="delCreate()">CREATE</button>

delCreate() 함수는 createElement() 메서드를 사용해 <del> 요소를 만들고 변수 d에 할당합니다. 이어서 createTextNode() 메서드로 텍스트 노드를 생성한 뒤, appendChild() 메서드를 통해 해당 텍스트 노드를 <del> 요소에 추가합니다.

마지막으로 document.body의 appendChild() 메서드에 변수 d를 전달하여, 텍스트가 포함된 <del> 요소 전체를 문서 본문(body)에 추가합니다.

function delCreate() {
    var d= document.createElement("DEL");
    var t = document.createTextNode("Deleted text is here");
    d.appendChild(t);
    document.body.appendChild(d);
}