在特定标签关闭之前使用 JS 选择 HTML 标签答案

【问题标题】：Selecting a HTML tag wih JS before the specific tag has been closed在特定标签关闭之前使用 JS 选择 HTML 标签
【发布时间】：2017-11-20 17:40:43
【问题描述】：

我想了解为什么我似乎无法将 onscroll 附加到包含 DOM 元素的变量。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div style="height: 1000px"></div>
<script>
  $(document).ready(function() {
    var vbody = document.getElementsByTagName('body');
    vbody.onscroll = function() {
      console.log('scrolling');
    }
  });
</script>
</body>
</html>

此代码不记录任何内容。但是，如果您只是更改

vbody.onscroll

到

window.onscroll

当您滚动时，控制台会记录“滚动” - 就像它应该的那样。

我做错了什么？我想为 body 元素添加一个 onscroll 事件处理程序，并让它像在示例中使用 window.onscroll 时一样运行。

谢谢。

【问题讨论】：

标签： javascript jquery dom getelementsbytagname onscroll

【解决方案1】：

以下代码为您提供了一个 HTMLCollection。

document.getElementsByTagName('body');

你需要使用：

$(document).ready(function() {
  var vbody = document.getElementsByTagName('body')[0];
  vbody.onscroll = function() {
    console.log('scrolling');
  }
});

或者既然您使用的是 jQuery，请坚持使用它：

$(document).ready(function() {
  $("body").scroll(function() {
    console.log('scrolling');
  });
});

【讨论】：

获取普通正文元素的更简单方法是获取document.body，而不是document.getElementsByTagName('body')[0]。
@JeffreyWesterkamp 不错...是的！ :)

【解决方案2】：

更改var vbody = document.getElementsByTagName('body');

致var vbody = document.getElementsByTagName('body')[0];

您需要在末尾添加 [0]，因为 document.getElementsByTagName('body') 返回一个数组，并且您需要单个 body 实例。

【讨论】：

A HTMLCollection 不是数组！ :)