1. 引言与背景
在Web开发中，经常需要对页面上的DOM元素进行动态操作，例如调整列表项的顺序或修改其内容。当HTML结构不允许添加id属性时，我们需要依赖其他选择器（如类名、标签名或伪类）来精确地定位目标元素。本教程将以一个具体的示例，展示如何利用JavaScript将一个列表中的第一个<li>元素移动到第十个位置，并同时更新其内部<a>标签的href属性。
2. 初始HTML结构
假设我们有一个无序列表，其中包含多个列表项，每个列表项内部有一个链接：
<ul class="tags tags--collection inline-list"> <li><a href="collections/all">All</a></li> <li class="tag--active"><a href="/collections/all" title="Remove tag accessories">accessories</a></li> <li><a href="collections/all/athletic" title="Show products matching tag athletic">athletic</a></li> <li><a href="collections/all/bracelet" title="Show products matching tag bracelet">bracelet</a></li> <li><a href="collections/all/coat" title="Show products matching tag Coat">Coat</a></li> <li><a href="collections/all/cold" title="Show products matching tag cold">cold</a></li> <li><a href="collections/all/cotton" title="Show products matching tag cotton">cotton</a></li> <li><a href="collections/all/fall" title="Show products matching tag Fall">Fall</a></li> <li><a href="collections/all/gloves" title="Show products matching tag gloves">gloves</a></li> <li><a href="collections/all/leather" title="Show products matching tag leather">leather</a></li> <li><a href="collections/all/rain" title="Show products matching tag Rain">Rain</a></li> <li><a href="collections/all/raincoat" title="Show products matching tag Raincoat">Raincoat</a></li> <li><a href="collections/all/scarf" title="Show products matching tag Scarf">Scarf</a></li> <li><a href="collections/all/silk" title="Show products matching tag silk">silk</a></li> <li><a href="collections/all/summer" title="Show products matching tag summer">summer</a></li> <li><a href="collections/all/vintage" title="Show products matching tag vintage">vintage</a></li> <li><a href="collections/all/watch" title="Show products matching tag watch">watch</a> </li> <li><a href="collections/all/winter" title="Show products matching tag winter">winter</a> </li> </ul>
我们的目标是将第一个<li>（内容为“All”）移动到第十个位置（在“leather”之后），并将其链接从collections/all更改为collections/all/cotton。
3. JavaScript实现步骤
我们将通过以下步骤实现目标：
立即学习“Java免费学习笔记（深入）”；
3.1 选取父级列表元素
首先，我们需要获取包含所有<li>元素的父级<ul>列表。由于没有ID，我们可以使用其类名进行选择。
const list = document.querySelector('ul.tags.tags--collection.inline-list');这里使用了document.querySelector方法，结合了ul标签和其所有类名，以确保精确地选中目标列表。
3.2 选取源元素和目标位置元素
接下来，我们需要分别选取要移动的第一个<li>元素和目标位置的第十个<li>元素。可以使用CSS伪类:nth-child()来实现。
// 选取列表中的第一个<li>元素
const first = list.querySelector(':scope > li:nth-child(1)');
// 选取列表中的第十个<li>元素
const tenth = list.querySelector(':scope > li:nth-child(10)');:scope伪类确保了选择器只在list元素内部查找直接子元素li，避免了意外选中其他地方的元素。:nth-child(n)选择器则根据元素在其父元素中的位置进行选择。
3.3 移动元素
有了源元素和目标位置元素，我们就可以执行移动操作。insertAdjacentElement()方法非常适合这种场景，它允许我们将一个元素插入到另一个元素的指定位置。
// 将第一个<li>元素移动到第十个<li>元素的后面
// 注意：insertAdjacentElement 会将元素从其原始位置移除并插入到新位置
// 这意味着原先的第十个元素会变为第九个，而第一个元素会成为新的第十个。
tenth.insertAdjacentElement('afterend', first);'afterend'参数表示将first元素插入到tenth元素的紧后方。值得注意的是，insertAdjacentElement执行的是移动操作，而非复制。这意味着first元素会从其原始位置被移除，然后插入到新位置。因此，列表的索引会动态调整。
3.4 修改链接属性
最后一步是修改被移动<li>元素内部<a>标签的href属性。
// 选取第一个<li>元素内部的<a>标签，并修改其href属性
first.querySelector(':scope > a').href = 'collections/all/cotton';这里再次使用:scope和querySelector来精确地选中first元素内部的<a>标签，并直接修改其href属性。
4. 完整JavaScript代码示例
将以上步骤整合，得到完整的JavaScript代码如下：
// 1. 选取无序列表元素
const list = document.querySelector('ul.tags.tags--collection.inline-list');
// 2. 选取要移动的第一个<li>元素
const first = list.querySelector(':scope > li:nth-child(1)');
// 3. 选取目标位置的第十个<li>元素
const tenth = list.querySelector(':scope > li:nth-child(10)');
// 4. 将第一个<li>元素移动到第十个<li>元素的后面
// 此操作会把 first 元素从原位置移除，并插入到 tenth 元素的 afterend 位置。
// 因此，原本的第十个元素会变为新的第九个，而 first 元素会成为新的第十个。
tenth.insertAdjacentElement('afterend', first);
// 5. 修改被移动的<li>元素内部<a>标签的href属性
first.querySelector(':scope > a').href = 'collections/all/cotton';5. 结果HTML结构
执行上述JavaScript代码后，HTML列表的结构将变为：
<ul class="tags tags--collection inline-list"> <li class="tag--active"><a href="/collections/all" title="Remove tag accessories">accessories</a></li> <li><a href="collections/all/athletic" title="Show products matching tag athletic">athletic</a></li> <li><a href="collections/all/bracelet" title="Show products matching tag bracelet">bracelet</a></li> <li><a href="collections/all/coat" title="Show products matching tag Coat">Coat</a></li> <li><a href="collections/all/cold" title="Show products matching tag cold">cold</a></li> <li><a href="collections/all/cotton" title="Show products matching tag cotton">cotton</a></li> <li><a href="collections/all/fall" title="Show products matching tag Fall">Fall</a></li> <li><a href="collections/all/gloves" title="Show products matching tag gloves">gloves</a></li> <li><a href="collections/all/rain" title="Show products matching tag Rain">Rain</a></li> <li><a href="collections/all/leather" title="Show products matching tag leather">leather</a></li> <li><a href="collections/all/cotton">All</a></li> <!-- 这是被移动的第一个元素，现在是第十一个元素 --> <li><a href="collections/all/raincoat" title="Show products matching tag Raincoat">Raincoat</a></li> <li><a href="collections/all/scarf" title="Show products matching tag Scarf">Scarf</a></li> <li><a href="collections/all/silk" title="Show products matching tag silk">silk</a></li> <li><a href="collections/all/summer" title="Show products matching tag summer">summer</a></li> <li><a href="collections/all/vintage" title="Show products matching tag vintage">vintage</a></li> <li><a href="collections/all/watch" title="Show products matching tag watch">watch</a> </li> <li><a href="collections/all/winter" title="Show products matching tag winter">winter</a> </li> </ul>
重要说明： 在上面的代码中，tenth.insertAdjacentElement('afterend', first); 实际上会将first元素插入到原tenth元素之后，使其成为列表中的第11个元素（因为原先的1-9个元素还在，原第10个元素还在，first插在第10个之后）。如果目标是让它成为新的第10个元素，则应该将它插入到原第9个元素之后，或者使用insertBefore方法。
例如，如果目标是使其成为新的第10个元素，并且原第10个元素变为第11个，可以这样做：
// 选取原第9个元素
const ninth = list.querySelector(':scope > li:nth-child(9)');
// 将第一个<li>元素移动到原第九个元素之后，使其成为新的第十个
ninth.insertAdjacentElement('afterend', first);或者，如果想将其插入到原第10个元素之前，使其成为新的第10个元素：
// 选取第十个元素作为参考点
const tenth = list.querySelector(':scope > li:nth-child(10)');
// 将第一个<li>元素插入到第十个<li>元素之前
tenth.parentNode.insertBefore(first, tenth);本教程以原始问题中“Move the 1st item after the 10th”的字面含义（即插入到第10个元素之后）进行实现，因此它会成为第11个元素。读者在实际应用中应根据具体需求调整插入逻辑。
6. 注意事项
- CSS选择器的精确性： 当元素没有id时，类名、标签名和伪类选择器（如:nth-child(), :first-child, :last-child等）是定位元素的关键。确保选择器足够精确，以避免选中非预期元素。
- insertAdjacentElement()的特性： 此方法会将元素从DOM中的原始位置移除，然后插入到指定的新位置。它不会创建元素的副本。
- 索引的动态变化： 当一个元素被移动时，其在父元素中的索引位置会发生变化。如果后续操作依赖于:nth-child()选择器，需要注意这种变化。例如，如果将第一个元素移走，原来的第二个元素就变成了新的第一个。
- 性能考量： 对于非常大的列表（成千上万个元素），频繁的DOM操作可能会影响页面性能。在这种情况下，可以考虑使用虚拟列表或文档片段（DocumentFragment）来优化操作。
- 浏览器兼容性： insertAdjacentElement()方法在现代浏览器中普遍支持。如果需要支持IE11及更早版本，可能需要使用insertBefore()结合removeChild()等传统DOM操作方法。
7. 总结
本教程展示了如何利用JavaScript结合CSS选择器，在不依赖ID的情况下，动态地移动HTML列表中的元素并修改其属性。通过querySelector进行元素选择和insertAdjacentElement进行元素移动，我们能够实现灵活且强大的DOM操作。掌握这些技术对于构建交互性强、可维护的Web应用至关重要。在实际开发中，务必注意选择器的精确性、DOM操作的特性以及潜在的性能影响，以确保代码的健壮性和高效性。
