JavaScript getElementsByTagName 显示 [object HTMLParagraphElement] 而不是该元素的内容？

Question

为什么以下代码显示 [object HTMLParagraphElement] 而不是元素内容？我也尝试添加 .innerHTML ，但这也只是显示未定义，这更加令人困惑。任何帮助将不胜感激。谢谢

<form name="form1">
<p id="p1"> Paragraph 1</p>
<p id="p1"> Paragraph 2</p>
<p id="p1"> Paragraph 3</p>
<p id="p1"> Paragraph 4</p>

<input type="button" onClick="getElements();" value="Get elements"/>
</form> 

<SCRIPT language=javascript>
function getElements() {
var all = document.getElementsByTagName("p");

for (var i=0, max=all.length; i < max; i++) {
    alert(all[i]);
}
}

  </SCRIPT>

Answer 1

请不要使用alert就像调试语句一样。使用console.log(all[i])相反。

此外，all[i]引用整个元素。如果您想要内容，请使用all[i].textContent .

另外，我必须建议你不要使用内联 JavaScript。它很难看，应该与 HTML 分开。使用事件监听器!

var btn = document.getElementById("input-tag-id-here");
btn.addEventListener("click", getElements, false);

如果跨浏览器兼容性是一个问题，旧版 IE 会使用 AttachEvent 而不是 addEventListener。但像这样从 HTML 中抽象 javascript 是一个很好的做法。