JavaScript Text 節(jié)點和 DocumentFragment 節(jié)點

2023-03-20 15:47 更新

Text 節(jié)點的概念

文本節(jié)點(Text)代表元素節(jié)點(Element)和屬性節(jié)點(Attribute)的文本內(nèi)容。如果一個節(jié)點只包含一段文本,那么它就有一個文本子節(jié)點,代表該節(jié)點的文本內(nèi)容。

通常我們使用父節(jié)點的firstChild、nextSibling等屬性獲取文本節(jié)點,或者使用Document節(jié)點的createTextNode方法創(chuàng)造一個文本節(jié)點。

// 獲取文本節(jié)點
var textNode = document.querySelector('p').firstChild;

// 創(chuàng)造文本節(jié)點
var textNode = document.createTextNode('Hi');
document.querySelector('div').appendChild(textNode);

瀏覽器原生提供一個Text構(gòu)造函數(shù)。它返回一個文本節(jié)點實例。它的參數(shù)就是該文本節(jié)點的文本內(nèi)容。

// 空字符串
var text1 = new Text();

// 非空字符串
var text2 = new Text('This is a text node');

注意,由于空格也是一個字符,所以哪怕只有一個空格,也會形成文本節(jié)點。比如,<p> </p>包含一個空格,它的子節(jié)點就是一個文本節(jié)點。

文本節(jié)點除了繼承Node接口,還繼承了CharacterData接口。Node接口的屬性和方法請參考《Node 接口》一章,這里不再重復(fù)介紹了,以下的屬性和方法大部分來自CharacterData接口。

Text 節(jié)點的屬性

data

data屬性等同于nodeValue屬性,用來設(shè)置或讀取文本節(jié)點的內(nèi)容。

// 讀取文本內(nèi)容
document.querySelector('p').firstChild.data
// 等同于
document.querySelector('p').firstChild.nodeValue

// 設(shè)置文本內(nèi)容
document.querySelector('p').firstChild.data = 'Hello World';

wholeText

wholeText屬性將當前文本節(jié)點與毗鄰的文本節(jié)點,作為一個整體返回。大多數(shù)情況下,wholeText屬性的返回值,與data屬性和textContent屬性相同。但是,某些特殊情況會有差異。

舉例來說,HTML 代碼如下。

<p id="para">A <em>B</em> C</p>

這時,文本節(jié)點的wholeText屬性和data屬性,返回值相同。

var el = document.getElementById('para');
el.firstChild.wholeText // "A "
el.firstChild.data // "A "

但是,一旦移除<em>節(jié)點,wholeText屬性與data屬性就會有差異,因為這時其實<p>節(jié)點下面包含了兩個毗鄰的文本節(jié)點。

el.removeChild(para.childNodes[1]);
el.firstChild.wholeText // "A C"
el.firstChild.data // "A "

length

length屬性返回當前文本節(jié)點的文本長度。

(new Text('Hello')).length // 5

nextElementSibling,previousElementSibling

nextElementSibling屬性返回緊跟在當前文本節(jié)點后面的那個同級元素節(jié)點。如果取不到元素節(jié)點,則返回null。

// HTML 為
// <div>Hello <em>World</em></div>
var tn = document.querySelector('div').firstChild;
tn.nextElementSibling
// <em>World</em>

previousElementSibling屬性返回當前文本節(jié)點前面最近的同級元素節(jié)點。如果取不到元素節(jié)點,則返回null:。

Text 節(jié)點的方法

appendData(),deleteData(),insertData(),replaceData(),subStringData() #

以下5個方法都是編輯Text節(jié)點文本內(nèi)容的方法。

  • appendData():在Text節(jié)點尾部追加字符串。
  • deleteData():刪除Text節(jié)點內(nèi)部的子字符串,第一個參數(shù)為子字符串開始位置,第二個參數(shù)為子字符串長度。
  • insertData():在Text節(jié)點插入字符串,第一個參數(shù)為插入位置,第二個參數(shù)為插入的子字符串。
  • replaceData():用于替換文本,第一個參數(shù)為替換開始位置,第二個參數(shù)為需要被替換掉的長度,第三個參數(shù)為新加入的字符串。
  • subStringData():用于獲取子字符串,第一個參數(shù)為子字符串在Text節(jié)點中的開始位置,第二個參數(shù)為子字符串長度。
// HTML 代碼為
// <p>Hello World</p>
var pElementText = document.querySelector('p').firstChild;

pElementText.appendData('!');
// 頁面顯示 Hello World!
pElementText.deleteData(7, 5);
// 頁面顯示 Hello W
pElementText.insertData(7, 'Hello ');
// 頁面顯示 Hello WHello
pElementText.replaceData(7, 5, 'World');
// 頁面顯示 Hello WWorld
pElementText.substringData(7, 10);
// 頁面顯示不變,返回"World "

remove()

remove方法用于移除當前Text節(jié)點。

// HTML 代碼為
// <p>Hello World</p>
document.querySelector('p').firstChild.remove()
// 現(xiàn)在 HTML 代碼為
// <p></p>

splitText()

splitText方法將Text節(jié)點一分為二,變成兩個毗鄰的Text節(jié)點。它的參數(shù)就是分割位置(從零開始),分割到該位置的字符前結(jié)束。如果分割位置不存在,將報錯。

分割后,該方法返回分割位置后方的字符串,而原Text節(jié)點變成只包含分割位置前方的字符串。

// html 代碼為 <p id="p">foobar</p>
var p = document.getElementById('p');
var textnode = p.firstChild;

var newText = textnode.splitText(3);
newText // "bar"
textnode // "foo"

父元素節(jié)點的normalize方法可以將毗鄰的兩個Text節(jié)點合并。

接上面的例子,文本節(jié)點的splitText方法將一個Text節(jié)點分割成兩個,父元素的normalize方法可以實現(xiàn)逆操作,將它們合并。

p.childNodes.length // 2

// 將毗鄰的兩個 Text 節(jié)點合并
p.normalize();
p.childNodes.length // 1

DocumentFragment 節(jié)點

DocumentFragment節(jié)點代表一個文檔的片段,本身就是一個完整的 DOM 樹形結(jié)構(gòu)。它沒有父節(jié)點,parentNode返回null,但是可以插入任意數(shù)量的子節(jié)點。它不屬于當前文檔,操作DocumentFragment節(jié)點,要比直接操作 DOM 樹快得多。

它一般用于構(gòu)建一個 DOM 結(jié)構(gòu),然后插入當前文檔。document.createDocumentFragment方法,以及瀏覽器原生的DocumentFragment構(gòu)造函數(shù),可以創(chuàng)建一個空的DocumentFragment節(jié)點。然后再使用其他 DOM 方法,向其添加子節(jié)點。

var docFrag = document.createDocumentFragment();
// 等同于
var docFrag = new DocumentFragment();

var li = document.createElement('li');
li.textContent = 'Hello World';
docFrag.appendChild(li);

document.querySelector('ul').appendChild(docFrag);

上面代碼創(chuàng)建了一個DocumentFragment節(jié)點,然后將一個li節(jié)點添加在它里面,最后將DocumentFragment節(jié)點移動到原文檔。

注意,DocumentFragment節(jié)點本身不能被插入當前文檔。當它作為appendChild()、insertBefore()、replaceChild()等方法的參數(shù)時,是它的所有子節(jié)點插入當前文檔,而不是它自身。一旦DocumentFragment節(jié)點被添加進當前文檔,它自身就變成了空節(jié)點(textContent屬性為空字符串),可以被再次使用。如果想要保存DocumentFragment節(jié)點的內(nèi)容,可以使用cloneNode方法。

document
  .querySelector('ul')
  .appendChild(docFrag.cloneNode(true));

上面這樣添加DocumentFragment節(jié)點進入當前文檔,不會清空DocumentFragment節(jié)點。

下面是一個例子,使用DocumentFragment反轉(zhuǎn)一個指定節(jié)點的所有子節(jié)點的順序。

function reverse(n) {
  var f = document.createDocumentFragment();
  while(n.lastChild) f.appendChild(n.lastChild);
  n.appendChild(f);
}

DocumentFragment節(jié)點對象沒有自己的屬性和方法,全部繼承自Node節(jié)點和ParentNode接口。也就是說,DocumentFragment節(jié)點比Node節(jié)點多出以下四個屬性。

  • children:返回一個動態(tài)的HTMLCollection集合對象,包括當前DocumentFragment對象的所有子元素節(jié)點。
  • firstElementChild:返回當前DocumentFragment對象的第一個子元素節(jié)點,如果沒有則返回null。
  • lastElementChild:返回當前DocumentFragment對象的最后一個子元素節(jié)點,如果沒有則返回null。
  • childElementCount:返回當前DocumentFragment對象的所有子元素數(shù)量。


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號