如何使用javascript通过类名更改html元素的值

Posted 2023-05-07

【中文标题】如何使用javascript通过类名更改html元素的值

【英文标题】：how to change value of html element by classname using javascript

【发布时间】：2015-03-11 04:37:26

【问题描述】：

这是我用来更改 html 元素值的代码 ***

<a class="classname" href="Vtech.com"> This text to be chnage</a>

---

<script type="text/javascript">
document.getElementsByClassName("classname")[0].innerHTML = "aaaaaaqwerty";
</script>

如何在页面加载时更改此文本

【问题讨论】：

its working see here

【参考方案1】：

看来您需要添加DOMContentLoaded 或将您的脚本放在</body> 之前

原生 JavaScript 解决方案

document.addEventListener("DOMContentLoaded", function(event) 
  document.getElementsByClassName("classname")[0].innerHTML = "qwerty";
);

---

在</body>之前添加你的脚本

---

带有 jQ​​uery 的版本

$(funtion()
   $(".classname:first").text("qwerty");
);

【参考方案2】：

你可以使用css选择器，但它可能不安全，因为这个方法返回第一次出现：

document.querySelector(".classname");

顺便说一句，几乎所有的开发者都使用一些 js 框架：jQuery、prototype、extJs 等

【参考方案3】：

$(document).ready(funtion()
    $(".classname").text("aaaaaaqwerty");
);

【参考方案4】：

使用 jquery（我指的是 jquery，因为你已经在你的问题中标记了它），你可以像下面这样实现：

$(funtion()
    $("a .classname")[0].text("aaaaaaqwerty");
);

【讨论】：

不，$(".classname")[0] 将从 jQuery 集合中检索 DOM 节点，该集合没有 text() 方法。不过你可以使用$(".classname").eq(0).text('...')。

@DavidThomas 你是对的！非常感谢。我认为我的编辑也做了你提到的同样的事情。正确的？我的意思是选择器现在是正确的。提前感谢您的回复。

【参考方案5】：

你可以用这个

document.addEventListener("DOMContentLoaded", function(event) 
  document.getElementsByClassName("classname")[0].innerHTML = "some texts";
);

使用 jQuery

​​>

$(document).ready(function()
   $(".classname").eq(0).val("aaaaaaqwerty");
);

【讨论】：

不，$(".classname")[0] 将从没有 val() 方法的 jQuery 集合中检索 DOM 节点。你可以使用$(".classname").eq(0).val('...')。或者你可以，如果<a> 元素有一个val() 方法。

@DavidThomas。感谢您的宝贵意见。我已经编辑了我的答案