能够获取元素长度,但不能获取内部 HTML

Able to get element length but not innerHTML

本文关键字:获取 但不能 内部 HTML 元素      更新时间:2023-09-26

我正在使用一个函数,其中我有一些元素,单击该元素时,我需要找到其他一些元素的内部HTML。

面临的问题是我能够找到该元素的长度,但是当我尝试获取同一元素的内部HTML时,它以同样的方式显示未定义。

我的函数

var question = document.querySelectorAll('.questions li a');
var i;
for (i = 0; i < question.length; i++) {
  question[i].addEventListener('click', myFunction)
}
function myFunction() {
  var div = document.getElementsByClassName('need_help')
  alert(div.length);
  //alert(div.innerHTML);
}

这是我找到长度及其工作正常的示例:https://jsfiddle.net/uw0nsf4g/

这是我发现内部HTML及其显示未定义的示例:https://jsfiddle.net/uw0nsf4g/1/

请告诉我代码有什么问题,如果元素是可搜索的,那么为什么不是它的 innerHTML?

提前感谢!

返回的长度是包含元素的数组的长度;请尝试以下操作:

var question = document.querySelectorAll('.questions li a');
var i;
for (i = 0; i < question.length; i++) {
    question[i].addEventListener('click', myFunction)
}
function myFunction() {
    var divs = document.getElementsByClassName('need_help');
    for(var j = 0; j < divs.length; j++) {
        alert(divs[j].innerHTML);
    }
}

使用 getElementsByClassName 函数,您可以获得一个 Array od Elements。你只需要获取你想要的索引并提醒innerHTML。例:

function myFunction() {
    var div = document.getElementsByClassName('need_help')
    alert(div.length);
    alert(div[0].innerHTML);
}

DOM API 函数getElementsByClassName()返回一个类似 Object 的数组。因此,您对此函数的调用将返回一个数组。 inner.HTML属性将适用于 DOM 节点而不是 DOM 节点数组上的 DOM 节点......您需要从数组中选择一个元素以获取其内容您可以遍历所有节点以获取其内容,也可以在上述情况下使用此数组中的第一个元素,如下所示:

var question = document.querySelectorAll('.questions li a');
var i;
for (i = 0; i < question.length; i++) {
    question[i].addEventListener('click', myFunction);
}
function myFunction() {
    var div = document.getElementsByClassName('need_help');
    alert(div[0].innerHTML);
}
OR loop through all of the elements to get their content:
function myFunction() {
    var div = document.getElementsByClassName('need_help');
    for(var k = 0; k < div.length; k++) {
        alert(div[k].innerHTML);
    }
}

因为它返回一个数组。

alert(div[0].innerHTML); 

会工作

相关文章: