JavaScript如何获取li标签内img的title属性用于列表排序功能

你只需要调整sort回调函数内的属性读取逻辑，将原本读取li元素自身title的逻辑，改为读取li内部嵌套img的title属性即可，修改后的完整代码如下：

function sortList() {
  var ul = document.getElementsByClassName("myUL")[0];
    
  Array.from(ul.getElementsByTagName("li"))
    .sort((a, b) => {
      // 获取li内部第一个img标签的title属性
      const imgTitleA = a.querySelector('img').getAttribute('title')
      const imgTitleB = b.querySelector('img').getAttribute('title')
      return imgTitleA.localeCompare(imgTitleB)
    })
    .forEach(li => ul.appendChild(li));
}

如果存在部分li内部没有img标签的场景，可以增加容错逻辑避免报错，取不到img title时默认用空字符串兜底：

function sortList() {
  var ul = document.getElementsByClassName("myUL")[0];
    
  Array.from(ul.getElementsByTagName("li"))
    .sort((a, b) => {
      // 可选链+空值兜底，避免无img标签时报错
      const imgTitleA = a.querySelector('img')?.getAttribute('title') || ''
      const imgTitleB = b.querySelector('img')?.getAttribute('title') || ''
      return imgTitleA.localeCompare(imgTitleB)
    })
    .forEach(li => ul.appendChild(li));
}

核心修改点说明：

• 用querySelector('img')方法选中当前li节点下的第一个img子元素，再读取该元素的title属性作为排序依据，其余排序、DOM重排的逻辑和原有代码完全一致。

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