DOM遍历javascript错误答案

【问题标题】：Error on DOM travesal javascriptDOM遍历javascript错误
【发布时间】：2017-09-01 08:44:35
【问题描述】：

为什么我在下面的代码中遇到错误。错误说。请指教。我想向上移动，直到找到标签“h2”。

“未捕获的 TypeError：无法读取属性 'querySelector' of null”

var z =document.querySelector('input[id="nf-field-448"]');
x=z.parentElement;


       while(!x.querySelector('h2'))

        {    
            if(x.previousElementSibling !== "null")

                { 
                   x = x.previousElementSibling;

                }


            else 
                {

                 x = x.parentElement;

                   }

        }

        alert('true');
    }

【问题讨论】：

如果没有父 H2，那么你最终会到达 DOM 树的顶部，x.previousElementSibling 和 x.parentElement 都将返回 null。然后尝试执行x.querySelector(...) 将引发您的错误。请参阅How to create a minimal, complete and verifiable example。
代码似乎转到第一个具有 H2 后代的元素（即 x.querySelector('h2') 返回 true 的位置），它不会在找到的第一个 H2 处停止（即 x.tagName.toLowerCase() == 'h2' 的位置） .

标签： javascript dom

【解决方案1】：

如果你像这样重写你的函数有帮助吗？

var z = document.querySelector('input[id="nf-field-448"]')
x = z.parentElement

while (!x.querySelector('h2')) {
  x = x.previousElementSibling || x.parentElement

  if (!x) console.log(`
    x is undefined
    - previousElementSibling ${x.previousElementSibling}
    - parentElement ${x.parentElement}
  `)
}

【讨论】：

但代码总是转到最上面的 H2 标记，而不是直接可用的 H2 元素。你能告诉我为什么吗？在下面的页面capgemini.com/service/new-ways-to-accelerate-innovation 中有 3 个提交按钮，我需要与在 H2 元素中单击的按钮相对应的标题。我该怎么办。
我想你是不允许改变html的吧？因为添加 data-ref='id_of_your_title' 会非常简单。
或者如果你向上直到 .article_text 项目然后是 $('.article_text').find('h2') 或 articleText.find('h2') 呢？
感谢您的帮助，我对代码做了些微改动。这是我的错误。 var z = document.querySelector('input[id="nf-field-448"]') x = z.parentElement while(x.tagName!="H2") { x = x.previousElementSibling || x.parentElement } alert(x.textContent);