獲取標簽內的所有節點

Question

我有這樣的代碼：

<div id="container">
Lorem ipsum dolor sit amet
<p>This is a paragraph</p>
<br />
<span>This is a span</span>
Lorem ipsum dolor sit amet
</div>

是否可以在此div中獲取所有文本節點和標簽？ 我想通過數組訪問每個節點（包括文本）。

例如：

for(var i=0;i<nodesArray.length;i++)
{
    document.write("Node: "+nodesArray[i]+"<br />");
}

輸出：

Node: Lorem ipsum dolor sit amet
Node: This is a paragraph
Node: This is a span
Node: Lorem ipsum dolor sit amet

我在jquery中嘗試了“所有選擇器”，但它只獲得標簽，而不是文本。

Answer 1

使用jquery時，可以使用.children（）方法（ http://api.jquery.com/children/ ）將所有子項都放入容器div，然后從每個子項中獲取值並進行打印。

Answer 2

要獲取元素中包含的文本，請使用.text()函數。 例如$('#container').text()或在這種情況下

$("#container").find('*').add('#container').map(function() { return $(this).text }).get()

Answer 3

您可以使用以下代碼執行此操作。 基本上， childNodes獲得作為元素的子代的所有節點的列表。 之后，我們必須遍歷整個獲取的節點列表，然后根據需要打印輸出。

children[i].textContent.trim() != ""上的if條件用於排除空節點（包括<br/>標記）。

 window.onload = function() { var children = document.getElementById("container").childNodes; for (var i = 0; i < children.length; i++) { if (children[i].textContent.trim() != "") document.getElementById("output").innerHTML += "Node: " + children[i].textContent + "<br/>"; } } 

 <div id="container"> Lorem ipsum dolor sit amet <p>This is a paragraph</p> <br /> <span>This is a span</span> Lorem ipsum dolor sit amet </div> <hr> <h3>Output</h3> <div id="output"> </div> 

Answer 4

 jQuery("#container").html() 

這將返回所有text和child元素，但不會像您期望的那樣以數組形式返回。 也許您可以使用它來驗證並執行所需的操作。