不显示元素的文本内容，而是显示 [object HTMLDivElement]答案

【问题标题】：Text content of element not displayed, [object HTMLDivElement] shown instead不显示元素的文本内容，而是显示 [object HTMLDivElement]
【发布时间】：2018-06-10 19:05:55
【问题描述】：

这是从this question 开始的。我打算通过回到基础来了解出了什么问题，尽管现在我遇到了这个问题。

我用数组“数字”替换了变量

var divs = document.querySelectorAll(".entry");

希望每个具有“entry”类的 div 的行为类似于前一个数组“numbers”的每个元素

但是我现在看到这个出现...

[object HTMLDivElement]

数组的元素应该在哪里。

这可能与 NodeLists 有关吗？我试图找到解决方案，但似乎无法使其发挥作用。当点击下一个和上一个按钮而不是上面的按钮时，如何让我的每个 div 出现？

我的完整代码如下：

<html>
<body>

<div id='entry1' class='entry'>
Left Dorchester at 11.45pm, travelling through the night. We arrived 
at Liverpool dockside at
1.30pm the following day.
</div>

<div id ='entry2' class ='entry'>
Lounged about the deck most of the day, looking my last on old 
England for some time, maybe.
</div>

<div class ='entry'>
Very calm sea, little breeze. We arrived at Greenock in the early 
afternoon and dropped anchor.
</div>

<div id ="hello" class ='entry'>
I went on deck first thing this morning and found that we were still 
lying off Greenock, but many ships
have altered their position in readiness.
</div>




<p id="filler"></p>
<button id="back">PREVIOUS</button>
<button id="forward">NEXT</button>


<script>

var divs = document.querySelectorAll(".entry");
var i=-1;
var text = "";

document.getElementById("back").addEventListener("click", function 
previous() {
if (i > 0) {
  text = divs[--i];
}
document.getElementById("filler").innerHTML = text;
});

document.getElementById("forward").addEventListener("click", function 
next(){
if (i < divs.length - 1) {
text = divs[++i];
}
document.getElementById("filler").innerHTML = text;
});

</script>


</body>
</html>

【问题讨论】：

标签： javascript loops iteration nodes

【解决方案1】：

将您的document.getElementById("filler").innerHTML = text; 更改为
document.getElementById("filler").innerHTML = text.innerHTML;。

或者您可以使用div 的innerText 属性而不是innerHTML。

【讨论】：

【解决方案2】：

当你选择元素时，返回的对象是一个 NodeList 并且要访问 nodeList 中的节点内容或文本使用 textContent 或 innerHTML 看下面的例子来理解问题

var divs = document.querySelectorAll(".entry");
var i=-1;
var text = "";

document.getElementById("back").addEventListener("click", function 
previous() {
if (i > 0) {
  text = divs[--i].textContent ;
}
document.getElementById("filler").innerHTML = text;
});

document.getElementById("forward").addEventListener("click", function 
next(){
if (i < divs.length - 1) {
text = divs[++i].textContent ;
}
document.getElementById("filler").innerHTML = text;
});

<html>
<body>

<div id='entry1' class='entry'>
Left Dorchester at 11.45pm, travelling through the night. We arrived 
at Liverpool dockside at
1.30pm the following day.
</div>

<div id ='entry2' class ='entry'>
Lounged about the deck most of the day, looking my last on old 
England for some time, maybe.
</div>

<div class ='entry'>
Very calm sea, little breeze. We arrived at Greenock in the early 
afternoon and dropped anchor.
</div>

<div id ="hello" class ='entry'>
I went on deck first thing this morning and found that we were still 
lying off Greenock, but many ships
have altered their position in readiness.
</div>




<p id="filler"></p>
<button id="back">PREVIOUS</button>
<button id="forward">NEXT</button>



</body>
</html>

【讨论】：