使用getElementsByClassName获取父节点

Question

我正在寻找一种JavaScript解决方案，可从我的对象中获取parentNode。但是无论我做什么，它都会显示“undefined”。

这是我的代码：

HTML

<div class="EmbedImageWidget" ng-if="vm.imageLink == '' || vm.imageLink == 'undefined'">
    <img ng-src="{{ vm.imageUrl }}" />
</div>

<div class="EmbedImageWidget" ng-if="vm.imageLink" >
    <a href="{{vm.imageLink}}" target="_blank">
        <img ng-src="{{ vm.imageUrl }}" />
    </a>
</div>

JS

var imageElement = document.getElementsByClassName("EmbedImageWidget");
console.log(imageElement);

对象

我已尝试使用

    var imageElement = document.getElementsByClassName("EmbedImageWidget").parentNode;
    console.log(imageElement);

    var imageElement = document.getElementsByClassName("EmbedImageWidget")[0].parentNode;
    console.log(imageElement);

然而，这两个选项都没有起作用。任何帮助都将不胜感激。干杯！

- Rodney Wormsbecher

---

您提供的 HTML 代码中，具有 EmbedImageWidget 类的元素似乎没有父节点。 - Bango

你能在 https://jsfiddle.net/ 上提供一个示例吗？ - Andrei Savin

这是因为它们被从另一个文件注入。我上传了一张新图片来说明这一点。 - Rodney Wormsbecher

Answer 1

你需要使用 document.getElementsByClassName("EmbedImageWidget")[0].parentNode 代替 document.getElementsByClassName("EmbedImageWidget").parentNode。这段代码在这里可以正常工作。

但我认为你想要访问图片元素，而它不是 div 的父级，而是 div 的子级。

- Sudarshan Tanwar

---

代码运行成功了，谢谢帮助。实际上我需要到我的文档之外的两个级别来移除一些填充。这就是为什么我想要访问它的父级。无论如何，感谢您的帮助。 - Rodney Wormsbecher

Answer 2

var imageElement = document.getElementsByClassName("EmbedImageWidget")[0].parentNode;
console.log(imageElement);

这是最佳解决方案，但存在一些问题，您的img元素在运行js代码后生成。当您尝试在js中获取img元素的父节点时，没有带有EmbedImageWidget类的img元素。

这是因为ng-if。

- user4868160

---

如果您尝试 console.log(document.getElementsByClassName("EmbedImageWidget").length);，您会发现与您选择器相关的对象不存在。 - user4868160

如果你看他的JS代码块，他正在记录对getElementsByClassName的调用，并且输出至少1个元素。我们甚至可以从他的照片中看到它具有parentNode访问器，而不是undefined。 - Bango

你测试过 console.log(document.getElementsByClassName("EmbedImageWidget").length); 吗？ - user4868160