Question

我是JS的新手。我在下面编写了一个代码示例，其中我编写了一个JS函数，通过该函数我试图更改＆lt; p ＆gt;的值。单击按钮后标记。我的问题是为什么只将 innerHTML 设置为＆＃39; getElementById（）＆＃39 ;;但不是采用其他方法吗？

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("myid").innerHTML = 'hey';
    document.getElementByName("myname").innerHTML = 'Whats';
    document.getElementByTagName("p").innerHTML = 'up! ';
    document.querySelector("p#myid").innerHTML = 'Dude.';
}
</script>
</head>
<body>

<p id="myid" name="myname">This text will be changed after button click.</p>

<button onclick="myFunction()">Try it</button>

</body>
</html>

结果：我在期待＆＃34; Dude。＆＃34;点击后显示。

Answer 1

脚本在getElementByName行失败，因为[0]不是函数，并且当脚本尝试调用它时它会出错。正确的名称是getElementsByName;元件的取值即可。 getElementsByTagName也是如此。

此外，两个函数都返回元素列表而不是单个元素。因此，在这里，您希望使用document.getElementsByName("myname")[0].innerHTML = 'Whats';来获取该列表中的第一个元素，然后以这种方式使用它：

{{1}}

使用 F12 或 Ctrl + Shift + I （取决于浏览器）打开浏览器控制台查看错误，并查阅文档（例如我链接的网站），以确保您使用正确的功能。

Answer 2

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
	debugger;
    document.getElementById("myid").innerHTML = 'hey';
    document.getElementsByName("myname").innerHTML = 'Whats';
    document.getElementsByTagName("p").innerHTML = 'up! ';
    document.querySelector("p#myid").innerHTML = 'Dude.';
}
</script>
</head>
<body>

<p id="myid" name="myname">This text will be changed after button click.</p>

<button onclick="myFunction()">Try it</button>

</body>
</html>

这里你写了document.getElementByName（“myname”）。innerHTML ='Whats'; 这是不正确的必须是document.getElementsByName（“myname”）。innerHTML ='Whats';试试这个有效。 FYI document.getElementsByName返回具有相同名称的元素数组。

Answer 3

更改如下，它可以正常工作

document.getElementById("myid").innerHTML = 'hey';  
document.getElementsByName("myname")[0].innerHTML = 'Whats'; 
document.getElementsByTagName("p")[0].innerHTML = 'up! ';
document.querySelector("p#myid").innerHTML = 'Dude.';

Answer 4

我确定document.getElementsByClassName，document.getElementsByTagName和document.querySelector将返回一个NodeList对象。但是，module: { rules: [ { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { importLoaders: 1, modules: true, localIdentName: '[name]__[local]__[hash:base64:5]' } } ] } ] }应返回给定上下文（文档）中该元素的第一个匹配项。

无法为＆＃34; innerHTML＆＃34;设置值。对于元素工作

4 个答案: