由 getElementsByClassname 或 getElementsByTagName 创建的节点列表如何将其值显示为字符串

How can an nodelist created by getElementsByClassname or getElementsByTagName display its values as string

我对 getElementsByClassName / getElementsByTagName 的了解是,它们都创建了相关元素的节点列表,并且节点列表元素被视为对象我有一个问题,我想在节点列表中显示元素的 innerHTML但是因为它们是对象,所以这似乎是不可能的。

示例:

<!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css"  href="stylesheet.css">
    <script src="javascript.js"></script>
</head>
    <body>
        <p id="pp"></p>
        <button onclick="test()">push to test</button>
        <p>dog</p>
        <p>cat</p>
        <p>snake</p>
    </body>

//javascript.js 文件

function test() {
    var paragraph = document.getElementsByTagName("p"),
        para1 = paragraph[0].innerHTML,
        ansBox = document.getElementById("pp");
    ansBox.innerHTML = para1;
}

这是较长代码的精简版。我认为 para1 变量应该是一个字符串,然后赋值语句应该将该字符串分配给 ansBox.innerHTML 但我什么也没得到。我已经修改了此代码 none 工作的几个版本。如何让节点列表中的文本元素显示在 ansBox 中?

您的脚本已加载,但您的 DOM 尚未加载,如果您像那样在 head 中加载脚本

<!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css"  href="stylesheet.css">
</head>
    <body>
        <p id="pp"></p>
        <button onclick="test()">push to test</button>
        <p>dog</p>
        <p>cat</p>
        <p>snake</p>
        <script src="javascript.js"></script> <!-- load it here -->
    </body>

此外 paragraph[0]ansBox 指的是相同的 DOM HTMLParagraphElement 只是让你知道里面没有任何东西(开始是空的)

在上面的JavaScript代码中,你把HTML放在一个空元素里面,然后赋给它自己,当然得到的是一个空值。