使用javascript按类名访问Div

Accessing Div, by class name, with javascript

本文关键字：访问 Div javascript 使用      更新时间：2023-09-26

我无法使用javascript访问div中的这些数据。

<div class="questions-text-alignment whiteTextWithShadow question-size-v4">
  DATA HERE
</div>

有什么建议吗？

方式1

您可以通过以下方式使用jQuery访问数据：

<script>
$(document).ready(function(){
    var data = $(".questions-text-alignment").html();
    alert(data);
})
</script>

方式2

没有jQuery：

<script>
    var data = document.getElementsByClassName("questions-text-alignment");
    alert(data[0].innerHTML);
</script>

您可以使用document.getElementsByClassName()进行访问，但问题是您将获得一个数组对象。使用数组，你必须找到你的。在下面的示例中，我假设只有一个类可用。

 var arr = document.getElementsByClassName("question-size-v4");
 alert(arr[0].innerHTML);

DEMO

你可以试试这个

<script>
    function getHtml() {
        var html = document.getElementsByClassName("questions-text-alignment")[0];
        alert(html.innerHTML);
    }
</script>
<div class="questions-text-alignment whiteTextWithShadow question-size-v4">
    DATA HERE
</div>
<input type="button" name="click" value="click" onclick="getHtml()" />

在这种情况下，您应该使用Id来选择元素-演示

<script>
function changeData() { 
    document.getElementById('contentDiv').innerHTML= "Updated Content";
}
</script>
<body>
  <div id="contentDiv">
    Content Of My Div
  </div> </br>
  <input type = "button" onClick = "changeData()" 
   value = "change div text" />
</body>

@StevenTang我完全陷入了同样的问题，下面是我的解决方案。

document.getElementsByClassName("question-size-4")

只有当您有一个由这个类名标识的DIV对象时，才能在完整的HTML文档加载中正常工作。

否则，您将通过ChromeTools在web浏览器中打开HTMLCollection对象进行预览。

要识别单个DIV对象，包括您的类名和Data Here，请使用Firebug并选择您的Data，然后用鼠标右键单击（子菜单选择）在Firebug中打开。

一旦在console.log（Chrome工具）中打开您的DIV对象并将其标识为包括您的类名和您的Data Here，单击HTMLCollection，您将获得由索引（自然数）标识为数组中的每个DIV对象。

选择正确的索引（自然数），您可以通过访问您的数据

elements = document.getElementsByClassName("question-size-4");
DataHere = elements[correct DIV index].innerHTML   or .innerText

你需要操作

x = elements.length;

首先要知道由类名标识的DIV对象是否真的存在并且已经下载。

如果x=0，则表示HTMLCollection为空，elements.inerHTML生成未定义的字符串

如果x＝1，则恰好有一个由类名标识的DIV，因此elements.inerHTML应该可以正常工作

如果x>1；您已经获得了更多由类名标识的DIV对象，因此您需要从数组数据结构中选择正确的对象，并输入正确的索引，如上所述。

我花了几个月的时间研究这个问题并找到正确的答案。

感谢

相关文章：