Text節點和DocumentFragment節點

2022-09-13 16:09:16 字數 1750 閱讀 5444

文字節點(text)代表元素節點(element)和屬性節點(attribute)的文字內容。如果乙個節點只有包含一段文字,那麼它就有乙個文字子節點,代表該節點的文字內容。

通常我們使用父節點的firstchild、nextsibling等屬性獲取文字節點,或者使用document節點的createtextnode方法創造乙個文字節點。

// 獲取文字節點

var textnode = document.queryselector("p").firstchild;

// 創造文字節點

var textnode = document.createtextnode("hi");

瀏覽器原生提供乙個text建構函式。它返回乙個文字節點例項。它的引數就是該文字節點的文字內容。

注意,由於空格也是乙個字元,所以哪怕只有乙個空格,也會形成文字節點。比如,包含乙個空格,它的子節點就是乙個文字節點。

文字節點除了繼承node介面,還繼承了characterdata介面。node介面的屬性和方法請參考《node介面》一章,這裡不再重複介紹了,以下的屬性和方法大部分來自characterdata介面。

data屬性等同於nodevalue屬性,用來設定或讀取文字節點的內容。

// 讀取文字內容

document.queryselector("p").firstchild.data;

document.queryselector("p").firstchild.nodevalue;

// 設定文字內容

document.queryselector("p").firstchild.data = "hello world";

wholetext屬性將當前文字節點與毗鄰的文字節點,作為乙個整體返回。大多數情況下,wholetext屬性的返回值,與data屬性和textcontent屬性相同。但是,某些情況下會有差異。

舉例來說,html**如下。

a b c

這時,文字節點的wholetext屬性和data屬性,返回值相同。但是一旦移除節點,wholetext屬性與data屬性就會有差異。

length屬性返回當前文字節點的文字長度。

nextelementsibling屬性返回緊跟在當前文字節點後面的那個同級元素節點。如果取不到元素節點,則返回null。

previouselementsibling屬性返回當前文字節點前面最近的同級元素節點。如果取不到元素節點,則返回null。

一下五個方法都是編輯text節點文字內容的方法。

deletedata():刪除text節點內部的子字串,第乙個引數為子字串開始位置,第二個引數為子字串長度。

insertdata():在text節點插入字串,第乙個引數為插入位置,第二個引數為插入的子字串。

replacedata():用於替換文字,第乙個引數為替換開始位置,第二個引數為需要被替換掉的長度,第三個引數為新加入的字串。

substringdata():使用者獲取子字串,第乙個引數為子字串在text節點的開始位置,第二個引數為字串長度。

remove方法用於移除當前text節點。

splittext方法將text一分為二,變成兩個毗鄰的text節點。它的引數就是分割位置,如果分割位置不存在,將報錯。

documentfragment節點物件沒有自己的屬性和方法,全部繼承自node節點和parentnode介面。也就是說,documentfragment節點比node節點多出一下四個屬性。

DOM 節點層次 Document型別

一 document型別 nodetype 9 nodename document nodevalue null parentvalue null ownerdocumet null.其他瀏覽器 除ie 可以訪問document的建構函式與原型 所有瀏覽器 包括ie8 訪問 htmldocument...

Xpath使用text()函式取得節點值

設文件為 chouhama xpath為 node1 則結果為 chouhama 若只想取資料 chouhama 怎麼辦呢?zvon站點的教程 沒有說明辦法,我憑直覺應該是 node1 text 出來結果一看 還真是chouhama,呵呵。看來zvon的教程還是不全面,xquery 1.0 and ...

Xpath使用text()函式取得節點值

設文件為 chouhama xpath為 node1 則結果為 chouhama 若只想取資料 chouhama 怎麼辦呢?zvon站點的教程 沒有說明辦法,我憑直覺應該是 node1 text 出來結果一看 還真是chouhama,呵呵。看來zvon的教程還是不全面,xquery 1.0 and ...