如何在纯 javascript 中检查一个元素是否有 ID？和条件语句问题

Question

在下面的代码中，您可能会看到一些问题（或很多问题）。首先，我假设 sender 元素在我的函数的第一行中有一个 ID。我的控制台充满了错误，因为一些调用此函数的 div 在我的 html 中没有 ID（在我的实际网站中，这是问题的一个小再现 ).我是否必须给他们 ID，或者我可以让函数先检查他们是否有 ID，然后再继续？第二个问题是我的 if 语句。它总是试图检查调用此函数的每个元素的 3 个父元素！因此，我在控制台中有很多错误 - 我如何才能在不产生这些错误的情况下保持此函数的相同结果。例如，在检查3个父元素的ID之前，我是否可以先检查它是否有3个父元素？我的代码在下面，这里是 JSBIN: http://jsbin.com/somimoniva/1/edit

<html>
  <body>
    <div id = "boxContainer">
      <div id = "box">
        <div id = "content">
          <p id = "contentParagraph" 
             onmouseover = "someFunction( this );">content stuff</p>
        </div>
      </div>
    </div>

    <div id = "otherStuff" onmouseover = "someFunction( this );">
      other stuff
    </div>

    <script>
      function someFunction( element ){
        var elementId = element.id;
        var elementInner = document.getElementById( elementId ).innerHTML;

        if( document.getElementById( elementId ).parentElement
        .parentElement.parentElement.id == 'boxContainer' ){
          document.getElementById( 'otherStuff' ).innerHTML = 'content was hovered';
        }
      }
    </script>
  </body>
</html>

我没有使用 jquery。

Answer 1

据我所知，这个'application'的功能可以简化为以下脚本：

<script>
    function someFunction( element ){
        document.getElementById( 'otherStuff' ).innerHTML = 'content was hovered';
    }
</script>

根据 this fiddle.

您甚至可以松掉大部分 id。

要回答您更具体的问题，您可以先测试 id 以免引发错误：

function hasId(element){
    return typeof element.id != 'undefined';
}

解法：

如何更改您的代码以使用上述方法。像这样：

function someFunction( element ){
    var parent = element.parentElement.parentElement.parentElement;

    if( hasId(parent) && parent.id == 'boxContainer' ){
        document.getElementById( 'otherStuff' ).innerHTML = 'content was hovered';
    }
}

这会检查 id，同时还会检查 id 是否为 "boxContainer"。这是 fiddle.

Answer 2

关于检查元素 ID 的建议答案是错误的：

typeof element.id != 'undefined';

element.id 将 return 一个空字符串，如果 DOM 元素没有指定 id（因此永远不会 'undefined'）。要检查一个元素是否指定了 id，你可以这样做：

element.hasAttribute('id')

或：

element.hasOwnProperty('id')

甚至：

element.getAttribute('id') !== null

如何在纯 javascript 中检查一个元素是否有 ID？和条件语句问题

How to check whether an element has an ID in pure javascript? And conditional statement problems

javascript

conditional-statements