DOM - 텍스트 노드

Text 개체 개요

엘리먼트 사이에 섞여있는 텍스트는 text노드로 변환된다.

<p>핱빝비빝</p>

<script>

    var textHi = document.querySelector("p").firstChild;
    console.log(textHi.constructor); // function Text() { [native code] }
    console.log(textHi);             // 핱빝비빝

</script>

Text 개체 및 속성

속성과 메서드에 관련된 정확한 정보를 얻기.

<p>hi</p>

<script>

    var text = document.querySelector("p").firstChild;

    // text의 고유 속성
    console.log(Object.keys(text).sort());

    // text의 고유 속성과 상속받은 속성
    var textPropertiesIncludeInherited = [];
    for(var p in text){
        textPropertiesIncludeInherited.push(p);
    }
    console.log(textPropertiesIncludeInherited.sort());

    // text가 상속받은 속성만
    var textPropertiesOnlyInherited = [];
    for(var p in text){
        if(!text.hasOwnProperty(p)){
            textPropertiesOnlyInherited.push(p);
        }
    }
    console.log(textPropertiesOnlyInherited.sort());

</script>

주목할 만한 속성 및 메서드

- textContent

- splitText()

- appendDate()

- deleteData()

- insertData()

- replaceData()

- subStringData()

- normalize()

- data

- document.createTextNode()

 

공백도 Text 노드를 생성한다.

<p id="p1"></p>
<p id="p2"> </p>

<script>

    console.log(document.querySelector("#p1").firstChild);          // null
    console.log(document.querySelector("#p2").firstChild.nodeName); // #text
    console.log(document.querySelector("#p1").nextSibling);         // #text

</script>