如何使用DOM选择HTML中的非首尾元素（如UL的LI）并操作？

选中ul下非首尾位置的li元素 #

两种常用实现方式，按需选用：

• 批量选中所有中间位置的非首尾li：结合:not伪类做排除
  直接调用选择器方法就能拿到所有既不是第一个、也不是最后一个的li元素，不需要手动循环计算位置：
  const middleLis = document.querySelectorAll('ul li:not(:first-child):not(:last-child)')
  如果你的ul结构里除了li还夹杂了其他类型的子节点，换成对应伪类做匹配会更稳定，避免被非li节点干扰计数：
  const middleLis = document.querySelectorAll('ul li:not(:first-of-type):not(:last-of-type)')
• 单独选中指定位置的中间li（比如第二个、第三个）：使用:nth-child/:nth-of-type定位
  选择器里的数字从1开始计数，对应li在ul里的实际排列顺序：
  • 选第二个li：document.querySelector('ul li:nth-child(2)')
  • 选第三个li：document.querySelector('ul li:nth-child(3)')
    同样如果ul下有非li的杂节点，把nth-child换成nth-of-type，就会只按li的自身顺序计数，不会算错位置。

将显示文本为“second”的元素内容修改为自定义名字 #

根据你已知的条件不同，两种实现方案：

• 如果你明确知道目标li的位置（比如“second”在第二个li上）：拿到元素后直接修改textContent即可：

  const targetLi = document.querySelector('ul li:nth-child(2)')
  // 把引号里的内容替换成你自己的名字
  targetLi.textContent = '你的名字'
  

• 如果你不确定目标元素的具体位置，只知道它的显示文本是“second”：遍历所有li做文本匹配后再修改：

  const allLis = document.querySelectorAll('ul li')
  allLis.forEach(li => {
    // 去除文本前后的空白字符后做匹配，避免空格导致判断失效
    if(li.textContent.trim() === 'second') {
      li.textContent = '你的名字'
    }
  })
  

注意：如果li内部还嵌套了其他子元素（比如span、em这类标签），用textContent赋值会把整个li的内部结构清空，只保留你输入的文本；如果只想修改节点内的文本部分、保留原有嵌套结构，可以定位到对应的文本节点再做修改。

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