使用Javascript檢索文本時遇到問題

Question

我在檢索HTML元素的文本時遇到麻煩。

 var text_element = document.getElementById("details").getElementsByTagName("h3"); var text = text_element.innerText; console.log(text_element); console.log(text); 

 <div id="details"> <h3>Summary for</h3> </div> 

當我在控制台中調用text_element ，實際上可以看到h3對象信息，但是當我調用text我會得到undefined 。

如果我將JS更改為var text = text_element.innerHTML; 我得到相同的undefined 。

我是否應該在h3元素（ 摘要）中獲取文本，而不是undefined ？

誰能告訴我我做錯了什么以及我需要怎么做才能解決？

我沒有使用jQuery，這完全是純Javascript。

Answer 1

方法.getElementsByTagName("h3")返回一個NodeList（或Firefox中的HTMLCollection），而不是Element，並且NodeList原型不具有innerText屬性。

您可以獲取節點列表的第一個元素及其索引：

 var text_elements = document.getElementById("details").getElementsByTagName("h3"); var text = text_elements[0].innerText; console.log(text_elements[0]); console.log(text); 

 <div id="details"> <h3>Summary for</h3> </div> 

注意：NodeList和HTMLCollection對象不是Array ，即使它們是類似數組的對象（例如arguments ）。 您可以閱讀有關數組類對象的更多信息 。

Answer 2

您來了，更快：

 alert(document.querySelector('h3').innerText); 

 <div id="details"> <h3>Summary for</h3> </div> 

希望這可以幫助。

Answer 3

方法：1通過id訪問

var text_element = document.getElementById("details");
var text = text_element.innerText;
console.log(text_element);
console.log(text);

方法：2通過getElementsByTagName("h3")訪問。

var text_elements = document.getElementById("details").getElementsByTagName("h3");
var text = text_elements[0].innerText;
console.log(text_elements[0]);
console.log(text);

MDN-Element.getElementsByTagName

Element.getElementsByTagName（）方法返回具有給定標簽名稱的元素的實時HTMLCollection。 搜索指定元素下面的子樹，不包括元素本身。 返回的列表是活動的，這意味着它將自動使用DOM樹進行更新。 因此，無需使用相同的元素和參數多次調用Element.getElementsByTagName（）。

Answer 4

當通過此方法“ getElementsByTagName（）”獲得標簽的文本/內容時，它會返回具有指定標簽名稱的元素子元素的集合，或者可以說HTML的集合，您可以通過提供索引來獲取。

例。

document.getElementsByTagName("h3"); - [<h3> Summary For </h3>]
document.getElementsByTagName("h3")[0]; - [<h3> Summary For </h3>]
document.getElementsByTagName("h3")[0].innerHTML; - Summary For

在你的例子中

var text_element = document.getElementById("details").getElementsByTagName("h3")[0];
var text = text_element.innerHTML;    
alert(text); // Summary For