JavaScript添加列表项后清空输入框：input=''无效的原因

嘿，这个问题其实戳中了很多刚接触DOM操作的开发者容易踩的坑，我来给你把逻辑理清楚～

首先，先确认一下：你之前声明的input变量，应该是通过类似const input = document.querySelector('.text-input')这样的代码，获取到的DOM元素对象对吧？

那问题就出在这两种写法的本质区别上：

1. 当你写document.querySelector('.text-input').value = ''时，你是直接找到页面上的输入框DOM元素，修改它的value属性——这才是真正让输入框内容清空的核心操作，因为输入框的显示内容就是由这个value属性控制的。
2. 而当你写input = ''时，你只是给input这个变量重新赋值了一个空字符串，完全没有碰到底层的DOM元素。原来的DOM元素引用被你覆盖了，但输入框本身的value属性根本没变化，所以输入框里的内容自然不会消失。

如果想通过input变量来实现清空，正确的写法应该是操作它的value属性：

input.value = '';

举个更直观的对比例子：

// 正确用法：操作DOM元素的value属性
const input = document.querySelector('.text-input');
input.value = ''; // 输入框内容被清空

// 错误用法：只是给变量重新赋值，和DOM无关
const input = document.querySelector('.text-input');
input = ''; // 变量input现在变成了空字符串，但输入框没任何变化

另外补充一句：如果你的input是用const声明的，写input = ''甚至会直接报错，因为const声明的变量不允许被重新赋值；如果是let的话虽然不会报错，但依然解决不了清空输入框的问题。

总结一下：input变量存的是DOM元素的引用，要改变输入框的内容，必须操作这个元素的value属性，而不是直接给变量赋值新值～

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