1. 场景概述与挑战
在web开发中，我们经常需要动态地调整页面元素的布局和内容。例如，在一个导航列表或标签列表中，可能需要根据用户行为或特定业务逻辑，将某个列表项移动到不同的位置，并更新其关联的链接。当这些元素没有唯一的id属性时，挑战在于如何精确地选择并操作它们。本教程将展示如何利用javascript和强大的css选择器来解决这一问题。
假设我们有以下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"）移动到第10个位置，并将其内部 <a> 标签的 href 从 "collections/all" 修改为 "collections/all/cotton"。
2. JavaScript DOM 操作步骤
以下是实现上述目标的详细步骤和对应的JavaScript代码。
2.1 选取父级无序列表 (UL)
首先，我们需要获取包含所有 <li> 元素的父级 <ul> 容器。由于没有ID，我们可以通过其唯一的类名组合来选取。
立即学习“Java免费学习笔记（深入）”；
// 通过类名组合选取无序列表
const list = document.querySelector('ul.tags.tags--collection.inline-list');这里使用了 document.querySelector() 方法，它接受一个CSS选择器字符串作为参数，并返回文档中第一个匹配该选择器的元素。
2.2 选取源元素和目标位置元素
接下来，我们需要选取要移动的源 <li> 元素（第一个）和目标位置的参考 <li> 元素（第十个）。这可以通过 :nth-child() CSS 伪类选择器来实现。:nth-child(n) 匹配作为其父级的第 n 个子元素的元素。
// 选取列表中的第一个<li>元素
// :scope 伪类确保选择器只在当前元素的子元素中查找，提高精确性
const firstItem = list.querySelector(':scope > li:nth-child(1)');
// 选取列表中的第十个<li>元素
const tenthItem = list.querySelector(':scope > li:nth-child(10)');这里使用 :scope 伪类是为了确保 querySelector 只在 list 元素内部的直接子 <li> 元素中查找，避免了潜在的全局查找问题，提高了选择器的精确性和效率。
2.3 移动元素到指定位置
一旦我们有了源元素和目标参考元素，就可以使用 insertAdjacentElement() 方法来移动元素。这个方法允许我们将一个元素插入到另一个元素的指定位置。
insertAdjacentElement(position, element) 接受两个参数：
- position: 一个字符串，指定插入的位置。常见的选项包括 'beforebegin', 'afterbegin', 'beforeend', 'afterend'。
- element: 要插入的元素。
当一个元素被插入到新的位置时，它会自动从原有的位置被移除。因此，我们不需要显式地删除它。
// 将第一个<li>元素移动到第十个<li>元素之后
// 这会将第一个元素插入到第十个元素后面，使其成为新的第十个元素
// 原本的第十个元素会变成第九个，以此类推
tenthItem.insertAdjacentElement('afterend', firstItem);执行此操作后，firstItem 将从其原始位置（第一个）被移除，并作为 tenthItem 的下一个兄弟节点插入。这意味着它现在是列表中的第10个元素，而原来的第10个元素现在是第9个，其他元素也相应向前移动了一位。
2.4 修改元素的链接 (href) 属性
最后，我们需要修改被移动的 <li> 元素内部 <a> 标签的 href 属性。
// 选取移动后的第一个<li>元素内部的<a>标签，并修改其href属性
firstItem.querySelector(':scope > a').href = 'collections/all/cotton';这里我们再次使用 querySelector 来选取 firstItem 内部的直接子 <a> 标签，然后直接通过 .href 属性来修改其链接。这种方式比使用 setAttribute() 更简洁，并且对于标准属性是推荐的做法。
3. 完整 JavaScript 代码示例
将上述所有步骤整合到一起，完整的JavaScript代码如下：
document.addEventListener('DOMContentLoaded', () => {
// 1. 选取父级无序列表 (UL)
const list = document.querySelector('ul.tags.tags--collection.inline-list');
// 确保列表存在，以避免错误
if (!list) {
console.warn('目标列表未找到。');
return;
}
// 2. 选取源元素和目标位置元素
const firstItem = list.querySelector(':scope > li:nth-child(1)');
const tenthItem = list.querySelector(':scope > li:nth-child(10)');
// 确保源元素和目标元素都存在
if (!firstItem || !tenthItem) {
console.warn('源或目标列表项未找到。');
return;
}
// 3. 移动元素到指定位置
// 将第一个<li>元素移动到第十个<li>元素之后
tenthItem.insertAdjacentElement('afterend', firstItem);
// 4. 修改元素的链接 (href) 属性
// 选取移动后的第一个<li>元素内部的<a>标签
const firstItemLink = firstItem.querySelector(':scope > a');
if (firstItemLink) {
firstItemLink.href = 'collections/all/cotton';
} else {
console.warn('移动后的第一个列表项内部未找到链接元素。');
}
});注意事项：
- DOMContentLoaded 事件: 建议将DOM操作代码包裹在 DOMContentLoaded 事件监听器中，以确保在脚本执行时，HTML文档已经完全加载和解析。
- 错误处理: 在实际应用中，添加对 list, firstItem, tenthItem 等元素是否存在的检查是良好的实践，可以防止在元素不存在时抛出错误。
- :scope 伪类: 虽然不是所有浏览器都完全支持 :scope (尤其是旧版本)，但现代浏览器普遍支持。它的使用有助于提高选择器的上下文精确性。如果需要更广泛的兼容性，可以省略 :scope，但要确保选择器足够具体，以避免意外匹配。
- nth-child 的动态性: 如果列表项的数量会动态变化，或者需要移动的不是固定的第1个到第10个，则需要调整 nth-child 的索引或使用其他选择器（例如通过文本内容或特定属性）。
4. 总结
本教程展示了如何利用JavaScript的DOM操作能力，在没有ID的情况下，灵活地移动HTML列表项并修改其属性。通过 document.querySelector() 配合强大的CSS选择器（如类名组合和 :nth-child 伪类），以及 insertAdjacentElement() 方法，我们可以精确地控制页面元素的结构和内容。这种方法对于构建动态、响应式的Web界面至关重要，并能有效应对各种复杂的DOM操作需求。
