innerHTML 不适用于 JS 中的类名

Posted 2023-05-07

【中文标题】innerHTML 不适用于 JS 中的类名

【英文标题】：innerHTML not working with classname in JS

【发布时间】：2012-06-06 09:21:04

【问题描述】：

我的下拉列表选择特定值-

<select name="category" id="category" onChange="showDiv(this.value);" >
    <option value="">Select This</option>
    <option value="1">Nokia</option>
    <option value="2">Samsung</option>
    <option value="3">BlackBerry</option>
    </select>

这是我要显示文本的 div

<span class="catlink"> </span>

这是我的 JS 函数 -

    function showDiv( discselect )
    

    if( discselect === 1)
    
    alert(discselect); // This is alerting fine
    document.getElementsByClassName("catlink").innerhtml = "aaaaaaqwerty"; // Not working
    

让我知道为什么这不起作用，以及我做错了什么？

【参考方案1】：

document.getElementsByClassName("catlink")将网页中的所有元素选择为array，因此您必须使用[0]

 function showDiv( discselect ) 
  

 if( discselect === 1) 
  
 alert(discselect); // This is alerting fine 
 document.getElementsByClassName("catlink")[0].innerHTML = "aaaaaaqwerty"; // Now working 
  
 

【讨论】：

感谢您的代码和解决方案，只需添加一个，我需要将“===”替换为“==”以使我的代码正常工作。请进一步解释一下 [0] 的使用，因为我完全不知道这一点

[0] 将选择网页上具有类 catlink 的第一个元素

所以现在如果我的页面上有多个名为 catlink 的跨度类，那么我可以使用这些 [0]、[1] 插入文本吗？ ..哇这真的是g8信息:)

你也可以得到总数。元素的 document.getElementsByClassName("catlink").length

【参考方案2】：

您正在使用getElementsByClassName 创建一个nodeList（一个特殊的节点数组）。或者，您可以使用document.querySelector，它返回className为.catlink的第一个元素：

function showDiv( discselect ) 
    if( discselect === 1)    
      document.querySelector(".catlink").innerHTML = "aaaaaaqwerty";