Question

我一直在尝试使用setAttribute将selectName的名称从oldName更改为newName，但是当我加载页面然后查看源代码时，oldName仍然存在。最后，我想添加一个属性“onchange”，“function（）;”但我甚至无法让JS更改标签的名称。任何帮助，将不胜感激。提前致谢。我在Mac OS X上测试了这个：Chrome，FF和Safari。

<html>
<head>
</head>
<body>
        <select name="oldName">
        <option value="0">Essay 1</option>
        <option value="1">Essay 2</option>
        <option value="2">Essay 3</option>
        </select>
<script type="text/javascript">
document.getElementsByTagName("select").item(0).setAttribute("name","newName");
</script>
</body>
</html>

Answer 1

您的代码有效，名称也会更改。查看源代码时，您将看不到名称更改。而是在开发工具中查看生成的源。（在Chrome中尝试F12）。

View Source仅显示首次从服务器下载的源。使用开发工具，您可以看到页面加载后对DOM所做的更改。

Answer 2

当您执行“查看源代码”时，您不会查看页面的HTML，因为它存在于您面前 - 浏览器会专门提取该页面的副本以向您显示源代码。这样做时，它不会解释javascript - 因此您通过javascript对文档所做的任何更改都不会反映在“查看源”窗口中。

要查看对DOM live 的更改，您必须使用像Firebug（link）这样的开发工具。当然，作为Firefox扩展程序意味着在Internet Explorer中没有运气，这就是为什么开发人员经常将Firefox作为开发目标并且在所有内容合理启动并运行后担心Internet Explorer的原因。

在IE中有Firebug的替代工具（如Firebug Lite），但没有一个接近功能和实用程序。

Answer 3

为什么你不使用课程呢？像这样：

<script type="text/javascript">
$(function(){
    $('.example').attr('name','new');
});
</script>


<select class="example" name="oldName">
<option value="0">Essay 1</option>
<option value="1">Essay 2</option>
<option value="2">Essay 3</option>
</select>

JavaScript setAttribute不起作用

3 个答案: