DOM 요소의 내용 변경-문서 객체의 innerHTML 속성 사용해 내용 변경, 문서 객체의 textContent 속성 사용해 내용 변경, nodeValue 프로퍼티를 사용하여 특정 노드의 값 변경, replaceData() 메소드를 사용하..

 

DOM 요소의 내용 변경

HTML DOM을 이용하면 HTML 요소의 내용(content)이나 속성값 등을 손쉽게 변경할 수 있습니다.

·       문서 객체의 innerHTML 속성 사용해 내용 변경 

·       문서 객체의 textContent 속성 사용해 내용 변경

·       nodeValue 프로퍼티를 사용하여 특정 노드의 값 변경

·       replaceData() 메소드를 사용하여 텍스트 변경

 

 

 

 

문서 객체의 innerHTML 속성 사용해 내용 변경

innerHTML 프로퍼티에 값을 설정하면 브라우저에서는 해당 내용을 파싱하고, 해석 결과를 해당 요소의 자식 요소로 만듭니다.

HTML 요소의 속성 이름을 이용하면 속성값도 변경할 수 있습니다.

 

var output = '<h1>Hello World!!</h2>'; document.body.innerHTML = output;

 

 

 

문서 객체의 textContent 속성 사용해 내용 변경

var output = '<h1>Hello World!!</h2>'; document.body.textContent = output; //h1 요소는 생성되지 않음. 그대로 문자열로 브라우저에 표시됨

 

 

 

 

nodeValue 프로퍼티를 사용하여 특정 노드의 값 변경

nodeValue 프로퍼티를 사용하여 텍스트 노드의 값을 변경할 수 있습니다.

 

var text = document.getElementById("text"); function changeText() { text.firstChild.nodeValue = "텍스트가 변경되었습니다."; }

 

 

 

replaceData() 메소드를 사용하여 텍스트 변경

 

replaceData()

replaceData() 메소드를 사용하면 텍스트 노드의 텍스트 데이터를 바꿀 수 있습니다.

텍스트노드.replaceData(오프셋, 교체할문자수, 새로운데이터);

 

인자	설명
오프셋(offset)	오프셋 값은 0부터 시작하며, 기존 텍스트 데이터의 몇 번째 문자부터 교체할지를 전달합니다.
교체할 문자 수	기존 텍스트 노드의 데이터로부터 교체할 총 문자 수를 전달합니다.
새로운 데이터	새로이 삽입할 텍스트 데이터를 전달합니다.

 

var text = document.getElementById("target").firstChild; function changeText() { // 텍스트 노드의 7번째 문자부터 4개의 문자를 "저녁 7" 텍스트로 교체. text.replaceData(7, 4, "저녁 7"); }