본문으로 바로가기

도큐먼트 객체

Document 객체는 DOM의 스팩이고 이것이 웹브라우저에서는 HTMLDocument 객체로 사용됩니다.




HTMLDocument 객체

HTMLDocument 객체는 문서 전체를 대표하는 객체라고 할 수 있습니다. 

아래 코드는 이를 보여주고 있습니다.


JavaScript
//document 객체는 window 객체의 소속이다.
console.log(window.document);
//document 객체의 자식으로는 Doctype과 html이 있다. 
console.log(window.document.childNodes[0]);
console.log(window.document.childNodes[1]);



노드 생성 API

document 객체의 주요 임무는 새로운 노드를 생성해주는 역할입니다. 

이에 대한 내용은 노드 변경 API에서 확인할 수 있습니다.

  • createElement() 
  • createTextNode()



문서 정보 API

  • title 
  • URL 
  • referrer 
  • lastModified





Text 객체




텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받습니다. 

아래는 텍스트 노드를 찾는 예제입니다. 주목할 것은 DOM에서는 공백이나 줄바꿈도 텍스트 노드라는 점입니다.

html
<p id="target1"><span>Hello world</span></p>
<p id="target2">
    <span>Hello world</span>
</p>
<script>
var t1 = document.getElementById('target1').firstChild;
var t2 = document.getElementById('target2').firstChild;
 
console.log(t1.firstChild.nodeValue);
try{
    console.log(t2.firstChild.nodeValue);   
} catch(e){
    console.log(e);
}
console.log(t2.nextSibling.firstChild.nodeValue);
 
// 콘솔 실행 결과
Hello world
TypeError {stack: (...), message: "Cannot read property 'nodeValue' of null"}
Hello world
</script>



주요 기능

텍스트 노드는 DOM에서 실질적인 데이터가 저장되는 객체이다. 따라서 텍스트 노드에는 값과 관련된 여러 기능들이 있는데 아래는 값을 가져오는 두개의 API 입니다.

: 텍스트 노드의 값을 가져오는 API

  • data 
  • nodeValue


html
<ul>
    <li id="target">html</li> 
    <li>css</li>
    <li>JavaScript</li>
</ul>
<script>
    var t = document.getElementById('target').firstChild;
    console.log(t.nodeValue);
    console.log(t.data);
</script>



텍스트 조작하기

텍스트 노드가 상속 받은 CharacterData 객체는 문자를 제어할 수 있는 다양한 API를 제공합니다. 

아래는 조작과 관련된 API들의 목록입니다.

  • appendData() 
  • deleteData() 
  • insertData() 
  • replaceData() 
  • subStringData()


html
<!DOCTYPE html>
<html>
<head>
    <style>
    #target{
        font-size:77px;
        font-family: georgia;
        border-bottom:1px solid black;
        padding-bottom:10px;
    }
    p{
        margin:5px;
    }
    </style>
</head>
<body>
<p id="target">Cording everybody!</p>
<p> data : <input type="text" id="datasource" value="JavaScript" /></p>
<p>   start :<input type="text" id="start" value="5" /></p>
<p> end : <input type="text" id="end" value="5" /></p>
<p><input type="button" value="appendData(data)" onclick="callAppendData()" />
<input type="button" value="deleteData(start,end)" onclick="callDeleteData()" />
<input type="button" value="insertData(start,data)" onclick="callInsertData()" />
<input type="button" value="replaceData(start,end,data)" onclick="callReplaceData()" />
<input type="button" value="substringData(start,end)" onclick="callSubstringData()" /></p>
<script>
    var target = document.getElementById('target').firstChild;
    var data = document.getElementById('datasource');
    var start = document.getElementById('start');
    var end = document.getElementById('end');
    function callAppendData(){
        target.appendData(data.value);
    }
    function callDeleteData(){
        target.deleteData(start.value, end.value);
    }
    function callInsertData(){
        target.insertData(start.value, data.value); 
    }
    function callReplaceData(){
        target.replaceData(start.value, end.value, data.value);
    }
    function callSubstringData(){
        alert(target.substringData(start.value, end.value));
    }
</script>
</body>
</html>



텍스트 생성하기

  • docuemnt.createTextNode()




[출처] 생활코딩



Jaehee's e-room


'JavaScript > DOM(Document Object Model)' 카테고리의 다른 글

HTMLElement, HTMLCollection 객체와 DOM 트리  (0) 2016.03.07
event 란 무엇인가?  (0) 2016.03.04
Document 객체 & Text 객체  (0) 2016.03.03
Node Object(노드 객체)  (0) 2016.03.02

댓글을 달아 주세요