如果元素具有名为parentNode的子元素,则访问元素的parentNode

Question

这是一种病态案例,但我说我有以下HTML:

<div data-whatever="somevalue">
  <form id="identifier">
    <input name="parentNode">
    <input name="parentElement">
    [...]
  </form>
</div>

我有一个参考表格,例如

var form = document.getElementById('identifier');

我想阅读表单的父级data-whatever属性.然而.我不能简单地做

form.parentNode.getAttribute('data-whatever');

因为form.parentNode会返回input标签.如何浏览到窗体的父节点,给潜在的子节点,其名称parentNode,parentElement等等？

编辑:澄清一下,我需要导航我无法控制的HTML的DOM,因此很奇怪.

Answer 1

使用parentElement

var form = document.getElementById('identifier');

var parent = form.parentElement;
var attribute = parent.getAttribute('data-whatever');

console.log(attribute);

<div data-whatever="somevalue">
  <form id="identifier">
    <input name="parentNode">
  </form>
</div>

更新

如果您不能依赖parentElement,请使用自上而下的方法手动完成

var elements = document.querySelectorAll('[data-whatever]');
var attribute = '';
for (var i = 0; i < elements.length; i++) {
  if (elements[i].contains(document.getElementById('identifier'))) {
    attribute = elements[i].getAttribute('data-whatever');
    break;
  }
}
console.log(attribute);

<div data-whatever="somevalue">
  <form id="identifier">
    <input name="parentNode">
  </form>
</div>