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

Question

我想了解为什么我似乎无法将 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

控制台记录 "scrolling" 当您滚动时 - 就像它应该的那样。

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

谢谢。

Answer 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');
  });
});

Answer 2

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

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

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

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

Selecting a HTML tag wih JS before the specific tag has been closed

javascript

jquery

dom

getelementsbytagname

onscroll