观察到的问题：var name与DOM元素引用的失效
在进行dom操作时，开发者可能会遇到一个令人困惑的现象。考虑以下html结构：
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello</h1>
<input type="checkbox">
<button style=":active color:red;">Click Me</button>
<ul>
<li class="list">
<a href="https://www.google.com">Google</a>
</li>
<li class="list">Second</li>
<li class="list">Third</li>
</ul>
</body>
</html>我们的目标是将最后一个<li>元素的文本内容从“Third”修改为“XYZ”。
当直接使用链式调用来修改元素内容时，操作成功：
document.firstElementChild.lastElementChild.lastElementChild.lastElementChild.innerHTML = "XYZ"; // 网页上的“Third”立即变为“XYZ”
然而，如果我们将获取元素引用和修改内容的操作拆分为两步，并使用var name来存储元素引用，操作却会失败：
var name = document.firstElementChild.lastElementChild.lastElementChild.lastElementChild; name.innerHTML = "XYZ"; // 网页上的“Third”没有变化
这种行为差异的根源在于JavaScript的全局作用域以及window.name这个特殊的全局属性。
立即学习“Java免费学习笔记（深入）”；
深入理解：var name与全局作用域的冲突
问题的核心在于name是一个浏览器环境中预定义的全局变量，即window.name。window.name属性用于设置或获取当前窗口的名称，它有一个非常重要的特性：它只能存储字符串类型的值。
当你在全局作用域中使用var name = ...;声明变量时，var关键字会尝试在全局对象（window）上创建一个名为name的属性。由于window.name已经存在且具有特殊限制，这种赋值行为并不会如预期那样将一个DOM元素对象赋给name变量。相反，JavaScript引擎可能会尝试将DOM元素对象强制转换为字符串（例如"[object HTMLLIElement]"），或者直接忽略对非字符串值的赋值，导致name变量最终并没有持有我们期望的DOM元素引用，而是保留了其作为window.name的原始行为或一个字符串值。
因此，在第二种情况下，name.innerHTML = "XYZ";实际上是对一个字符串或一个不包含DOM元素引用的变量进行操作，自然无法改变DOM元素的内容。而第一种情况，由于没有引入名为name的中间变量，DOM元素的引用被直接用于操作，所以能够成功。
解决方案
为了避免var name带来的陷阱，我们可以采用以下几种策略：
方案一：使用 let 或 const 声明变量
let和const是ES6引入的块级作用域声明方式。它们不会像var那样在全局作用域中创建与window对象属性冲突的变量。使用let或const声明的变量，即使与全局属性同名，也会在当前作用域内创建一个独立的变量，从而避免冲突。
示例代码：
// 使用 let let nameElement = document.firstElementChild.lastElementChild.lastElementChild.lastElementChild; nameElement.innerHTML = "XYZ"; // 成功修改 // 或者使用 const const targetElement = document.firstElementChild.lastElementChild.lastElementChild.lastElementChild; targetElement.innerHTML = "XYZ"; // 成功修改
注意事项： 推荐优先使用const来声明那些在初始化后不会再被重新赋值的变量，以提高代码的可读性和维护性。
方案二：选择不同的变量名
这是最直接的解决方案：避免使用name作为变量名。选择一个具有描述性且不会与任何全局属性冲突的名称。
示例代码：
var listItem = document.firstElementChild.lastElementChild.lastElementChild.lastElementChild; listItem.innerHTML = "XYZ"; // 成功修改 // 或者 var lastListItem = document.firstElementChild.lastElementChild.lastElementChild.lastElementChild; lastListItem.innerHTML = "XYZ"; // 成功修改
方案三：利用模块作用域
当JavaScript代码作为ES Module（通过<script type="module">或导入/导出机制）运行时，模块内部声明的顶级变量默认是模块作用域的，而不是全局作用域。这意味着它们不会污染window对象，也不会与window.name冲突。
// main.js (作为模块导入) var name = document.firstElementChild.lastElementChild.lastElementChild.lastElementChild; name.innerHTML = "XYZ"; // 在模块作用域中，var name 不会与 window.name 冲突，操作成功
HTML引用：
<script type="module" src="main.js"></script>
方案四：使用立即执行函数表达式（IIFE）
IIFE可以创建一个独立的作用域，将变量限制在函数内部，从而避免全局污染。
示例代码：
(function() {
var name = document.firstElementChild.lastElementChild.lastElementChild.lastElementChild;
name.innerHTML = "XYZ"; // 在IIFE的作用域中，var name 不会与 window.name 冲突，操作成功
})();总结与最佳实践
var name在全局作用域中与window.name的冲突是一个经典的JavaScript陷阱，它揭示了全局变量和浏览器宿主环境特性的复杂性。为了编写健壮、可预测的JavaScript代码，我们应该遵循以下最佳实践：
- 优先使用 let 和 const： 这是现代JavaScript开发的首选。它们提供了块级作用域，有效避免了变量提升和全局污染等var带来的问题。
- 避免使用与全局对象属性同名的变量： 尤其是在全局作用域中，应避免使用如name、location、history等可能与window对象属性冲突的名称。
- 利用模块化和函数作用域： 将代码组织成模块或使用IIFE，可以有效隔离变量，减少全局命名冲突的风险。
通过理解并应用这些解决方案，开发者可以更有效地管理JavaScript变量，确保DOM操作的准确性和代码的稳定性。
