如何选择没有id或class的元素?

时间:2017-05-18 23:44:31

标签: javascript html html5 dom

我试图在元素中选择一个元素。 HTML看起来像这样:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div class="first">
      <div></div>
      <div><!-- the element I want to select --></div>
    </div>
  </body>
</html>

我尝试过一种方法,如下所示:

function findFirstDescendant(parent, tagname) {
  parent = document.getElementsByClassName(parent)[0];
  var descendants = parent.getElementsByTagName(tagname);
  if (descendants.length)
    return descendants[0];
  return null;
}

还有这个:

document.getElementsByClassName("first")[0].getElementsByTagName("div")[1];

这两种方法都没有工作,因为这种方法似乎已经过时了。我想保留jQuery,但如果没有其他解决方案,这是可以接受的。

2 个答案:

答案 0 :(得分:0)

你绝对应该使用querySelector来利用CSS选择器......

&#13;
&#13;
var el = document.querySelector('.first > div:nth-child(2)');
console.log(el);
&#13;
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div class="first">
      <div></div>
      <div>Hello!</div>
    </div>
  </body>
</html>
&#13;
&#13;
&#13;

但显然,您也可以使用这种更经典的解决方案:

&#13;
&#13;
var el = document.getElementsByClassName('first')[0].getElementsByTagName('div')[1];
console.log(el);
&#13;
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div class="first">
      <div></div>
      <div>Hello!</div>
    </div>
  </body>
</html>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

抱歉浪费任何人的时间。因为没有早点想到这一点,我感到有些愚蠢。我通过向脚本添加250毫秒的延迟来解决问题,因为它是在页面完全加载之前执行的。我的代码与此类似:

setTimeout(function() {
  var a = document.getElementsByClassName("card-player")[0].getElementsByTagName("div")[0];
  console.log(a);
}, 250);

如果您想调试或记录更多信息,您还可以添加更多变量:

setTimeout(function() {
  var a = document.getElementsByClassName("first")[0];
  var b = a.getElementsByTagName("div")[1];
  var c = b.getElementsByTagName("div")[1];
  var d = b.getElementsByTagName("div")[2];
}, 250);