调用nextElementSibling()提示不是函数的报错原因是什么？

我尝试实现jQuery中next() DOM工具方法的ES6原生等价写法，但代码运行失败。在示例中我已经成功获取到按钮元素的引用，调用button.nextElementSibling()时却抛出nextElementSibling is not a function错误，想知道问题出现的原因。

复现代码 #

JS部分 #

window.addEventListener('load', function(){
  const b = document.querySelector('.b');
  console.log(b.nextElementSibling());  
});

HTML部分 #

<button class="b">button</button>
<div class="test">test</div>

报错的核心原因是混淆了「方法」和「属性」的使用方式：

• jQuery的next()是封装好的函数方法，必须加()调用才能返回结果
• 原生DOM的nextElementSibling是挂载在Element对象上的只读属性，直接访问就能拿到当前元素的下一个同胞元素节点，不需要、也不能加括号执行，加括号就会触发"xxx is not a function"的类型错误。

把调用的括号去掉即可正常运行：

window.addEventListener('load', function(){
  const b = document.querySelector('.b');
  console.log(b.nextElementSibling); 
  // 控制台正常输出 <div class="test">test</div>
});

同类容易混淆的原生DOM节点访问属性还有previousElementSibling（上一个相邻元素节点）、parentElement（父元素节点）、firstElementChild（第一个子元素节点）、lastElementChild（最后一个子元素节点），全部为直接访问的属性，不需要加括号调用。

内容的提问来源于stack exchange，提问作者Luca Reghellin