如何獲取元素的文本節點？

<div class="title"> 
    I am text node 
    <a class="edit">Edit</a> 
</div>

我希望得到「我是文本節點」，不希望刪除「編輯」標籤，並且需要跨瀏覽器解決方案。如何獲取元素的文本節點？

來源

2011-06-29 Val

這個問題是幾乎相同http://stackoverflow.com/questions/3172166/getting-the-contents- - 看到這些答案爲一個普通的JS版本的詹姆斯的答案 – Mala

var text = $(".title").contents().filter(function() { 
    return this.nodeType == Node.TEXT_NODE; 
}).text();

這得到所選元素的contents，並應用過濾得到的第一個childNode的的nodeValue功能。過濾器函數只返回文本節點（即帶有nodeType == Node.TEXT_NODE的那些節點）。

來源

2011-06-29 11:58:37

是的，我需要把.text（）;過濾後，但這個工作... – Val

@Val - 對不起，我錯過了原來的代碼。我會更新答案以顯示它。你需要'text（）'，因爲'filter'函數返回節點本身，而不是節點的內容。 –

不知道爲什麼，但當我測試上述理論時，我並不那麼謹慎。我運行了下面的所有節點類型：'jQuery（「*」）。each（function（）{console.log（this.nodeType）; }）'我得到了** 1 **。 – Batandwa

.text() - for jquery

$('.title').clone() //clone the element 
.children() //select all the children 
.remove() //remove all the children 
.end() //again go back to selected element 
.text(); //get the text of element

來源

2011-06-29 11:53:55

我認爲標準JavaScript的方法必須是'innerText' – reporter

這不符合OP想要的方式 - 它將獲得'a'元素中的文本：http://jsfiddle.net/ekHJH/ –

@James Allardice - 我已經完成了jquery解決方案，現在這將w ork ................. –

您可以使用

$('.title')[0].childNodes[0].nodeValue

http://jsfiddle.net/TU4FB/

來源

2011-06-29 11:58:31 Dogbert

儘管這樣會起作用，但它取決於子節點的位置。如果（何時）發生變化，則會中斷。 – Armstrongest

如果你的意思是讓元素中的第一個文本節點的值，該代碼將工作：http://jsfiddle.net/ZkjZJ/

來源

2011-06-29 11:58:55

我想你可以使用'curNode.nodeType == 3'而不是'nodeName'。 – Nilloc

@Nilloc可能，但有什麼收穫？ –

@ShadowWizard @Nilloc推薦的方式是使用常量...'curNode.nodeType == Node.TEXT_NODE'（數值比較速度更快，但curNode.nodeType == 3不可讀 - 哪個節點具有數字3？） – mikep

這將忽略空格爲：

var oDiv = document.getElementById("MyDiv"); 
var firstText = ""; 
for (var i = 0; i < oDiv.childNodes.length; i++) { 
    var curNode = oDiv.childNodes[i]; 
    if (curNode.nodeName === "#text") { 
     firstText = curNode.nodeValue; 
     break; 
    } 
}

您可以在這裏的行動看到這那麼，你從來沒有得到空白textNodes..code使用核心Javascript。

var oDiv = document.getElementById("MyDiv"); 
var firstText = ""; 
for (var i = 0; i < oDiv.childNodes.length; i++) { 
    var curNode = oDiv.childNodes[i]; 
    whitespace = /^\s*$/; 
    if (curNode.nodeName === "#text" && !(whitespace.test(curNode.nodeValue))) { 
     firstText = curNode.nodeValue; 
     break; 
    } 
}

檢查它的jsfiddle： - http://jsfiddle.net/webx/ZhLep/

來源

2013-11-12 01:53:32 webx

另一個本地JS解決方案，可以爲「複雜」或深度嵌套元素有用的是使用NodeIterator。將NodeFilter.SHOW_TEXT作爲第二個參數（「whatToShow」），並遍歷元素的文本節點子節點。

var root = document.getElementById('...'), 
    iter = document.createNodeIterator (root, NodeFilter.SHOW_TEXT), 
    textnode; 

while (textnode = iter.nextNode()) { 
    // do something with the text node 
}

您還可以使用TreeWalker。兩者的區別在於NodeIterator是一個簡單的線性迭代器，而TreeWalker允許您通過兄弟和祖先進行導航。

來源

2016-01-10 00:28:02

您也可以使用XPath的text()節點測試來獲取文本節點。例如

var target = document.querySelector('div.title'); 
var iter = document.evaluate('text()', target, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE); 
var node; 
var want = ''; 

while (node = iter.iterateNext()) { 
    want += node.data; 
}

來源

2016-02-09 10:35:13 doubleDown

ES6版本，返回第一個#text節點內容

const extract = (node) => { 
    const text = Array.from(node.childNodes).find(f => f.nodeName === '#text'); 
    return text ? text.textContent.trim() : ''; 
}

來源

2016-12-09 00:31:02 jujule

如何獲取元素的文本節點？

回答

相關問題