由 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放在一个空元素里面,然后赋给它自己,当然得到的是一个空值。
我对 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放在一个空元素里面,然后赋给它自己,当然得到的是一个空值。