无法从父div显示childNodes

Question

我有以下HTML：

<div id="myModal" class="modal fade in" role="dialog" style="display: block; padding-right: 13px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-body">
                    <div id="modal-alert" class="alert hidden"></div>
                    <div id="modal-body-content"></div>
                    <div class="modal-footer">

我想显示包含div modal-body的childNodes。

点击锚点打开我的模态

时出现错误

$("a#showUser").on('click', function(evt) {
    var parentElement = document.getElementsByClassName('modal-body');
    console.log(parentElement);
    console.log(parentElement.childNodes[0]);
});

Answer 1

document.getElementsByClassName('modal-body')返回一个节点数组，因此您无法访问阵列上的childNodes。把它改成这样的东西。

$("a#showUser").on('click',function(evt){
   var parentElements = document.getElementsByClassName('modal-body');
   console.log(parentElements);
   console.log(parentElements[0].childNodes[0]);
});

Answer 2

如果您正在尝试获取所单击链接的父级子级，请使用以下内容，因为您使用的是jQuery。

$("a#showUser").on('click',function(evt){
      var parentElement = $(this).closest('.modal-body');
      console.log(parentElement);
      console.log(parentElement.children());
});

Answer 3

.getElementsByClassName()为您提供了一个HTML集合，一个数组。您应该在集合中指明一个元素。试试这个：

var parentElement = document.getElementsByClassName('modal-body')[0];

Answer 4

您不应该使用parentElement作为变量名，因为它是原生的javascript属性。

Answer 5

document.getElementsByClassName返回一个元素数组，因此您应该使用

document.getElementsByClassName('modal-body')[0].childNodes[0]