为什么scrollIntoView搭配document.querySelector可正常运行，直接用getAttribute返回值则失效

scrollIntoView是DOM元素实例的专有方法，只能在真实的DOM节点对象上调用，不能在字符串等其他类型的值上调用，这是两段代码表现不同的核心原因。

可正常运行的代码逻辑 #

liItems.forEach(val => {
   val.addEventListener('click', e => {
   e.preventDefault(); 
   document.querySelector(val.getAttribute('href')).scrollIntoView({
     ...
   })
 })
})

这段代码的执行流程完全符合API要求：

• 首先通过val.getAttribute('href')拿到属性的字符串值，通常是类似#target-section的锚点字符串
• 再调用document.querySelector()传入上述锚点字符串，匹配到页面中对应的真实DOM元素对象
• 对合法的DOM元素调用scrollIntoView方法，可正常触发滚动行为。

无法正常运行的代码逻辑 #

liItems.forEach(val => {
   val.addEventListener('click', e => {
   e.preventDefault(); 
   val.getAttribute('href').scrollIntoView({
    ...
   })
 })
})

这段代码存在明确的类型调用错误：

• val.getAttribute('href')返回的是字符串类型的值，并不是DOM元素对象
• 字符串的原型链上不存在scrollIntoView方法，直接调用会抛出Uncaught TypeError: xxx.scrollIntoView is not a function的运行时报错，自然无法触发滚动。

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