DOM启蒙——第七章

1.文本对象概览

HTML文档中的文本表现为Text()构造函数的实例。即文本节点。

var text=document.querySelector("#txt").firstChild;

P.appendChild(document.createTextNode(text.constructor));//Text()

Text()构造函数构造文本节点，Text从ChracterData、Node以及Object继承。

2.文本对象属性

●自有属性: P.appendChild(document.createTextNode(Object.keys(text).sort()));

●继承属性: 

var inheritPropert=[];

for(var x in text){

    if(!text.hasOwnProperty(x)){

        inheritPropert.push(x+" | ");

    }

}

3.空白符创建文本节点。

空白符与文本字符一样都会创建文本节点。DOM中空白符和文本字符都表现为文本节点，即回车也是文本节点。

<p id="blank"> </p>

var blank=document.getElementById("blank");

P.appendChild(document.createTextNode(blank.firstChild.nodeName));//#text

4.创建与注入文本节点

●可以使用createTextNode()创建Text节点。

var textNode=document.createTextNode("Mi Fan");

P.appendChild(textNode);

●也可以将文本节点注入动态创建的DOM结构。

var elementNode=document.createElement("span");

var txtNode=document.createTextNode("active");

elementNode.appendChild(txtNode);

document.querySelector("div").appendChild(elementNode);

P.appendChild(document.createTextNode(document.querySelector("span").innerHTML));

5.使用.data或者nodeValue获取文本节点值

 ●使用.data

P.appendChild(document.createTextNode(document.querySelector("#lorem").firstChild.data));

●使用.nodeValue

P.appendChild(document.createTextNode(document.querySelector("#lorem").firstChild.nodeValue));

6.使用appendData()、deleteData()、insertData()、replaceData()和subStringData()操作文本节点。

文本节点从CharacterData对象继承方法。该对象提供用于操作和提取Text节点值的方法。

○ appendData()

○ deleteData()

○ insertData()

○ replaceData()

○ subStringData()

●blank.firstChild.appendData("!");

●blank.firstChild.deleteData(0,2);

●blank.firstChild.insertData(0,'HI');

●blank.firstChild.replaceData(0,2,"ME");

●blank.firstChild.substringData(0,2);

7.当有多个兄弟文本节点时

●当一个文本节点包含一个元素节点时，

如<p> Hi, <strong>MIFAN</strong></p> 

此时<p>元素内容并不是单个Text节点，一个Text节点，一个Element节点，另一个Text节点

●当动态添加Text节点到某个动态创建的元素时

如创建一个p元素然后添加两个Text节点到这个p元素，结果为兄弟Text节点。

8.使用textContent移除文本标记并返回所有的子文本节点

●textContent属性可以用来获取所有的子文本节点，或设置节点内容成某一特定Text节点，当在节点上用它获取文本内容，它将返回一个由调用该方法的节点内所有文本节点合并而成的字符串。textContent会收集所有子文本节点，无论封装深度。

P.appendChild(document.createTextNode(document.body.textContent));

●当用textContent设置某个节点所含文本时，它将先移除所有子节点，替换它们为单个Text节点。

document.body.textContent="I AM  FINE";

●textContent在文档或者文档类型节点上调用时将会返回null。textContent也返回script与style元素的内容。

9.textContent与innerText区别

innerText知道CSS,若有隐藏文本innerText会忽略，而textContent不会

innerText关心CSS,会出发一次重排，而textContent不会

innerText无视script和style元素的Text节点

innerText会使返回的文本规范化,而textContent仅移除标记,会包含空白换行回车

innerText是非标准的,而textContent是依据DOM规范实现的

innerText在FireFox无法使用

10.使用normalize()合并兄弟文本节点成单个文本节点

兄弟Text节点通常只在动态添加文本到DOM时候遇到，用normalize()可以消除不含有任何Element节点的兄弟Text。它会合并DOM中的兄弟文本节点为单个。

document.querySelector("div").normalize();

11.splitText()分割节点

当splitText()在Text()节点上调用时，它将改变在其上调用的文本节点并返回一个新的包含分割出来的文本的Text()节点。

document.querySelector("p").firstChild.splitText(4).data;//提取DOM中的文本

P.appendChild(document.querySelector("p").firstChild.textContent;)//仍在DOM中的