javascript - 使用 Javascript 获取所有(未知)<li> 元素的属性

Question

我需要用 Javascript 连接从第二个 li 元素开始的所有标题值。 问题是我想在不同的页面中使用它，所以我无法知道 li 元素的确切数量。

  <div id="breadcrumb">
        <ul>
            <li title="One">One</li>
            <li title="Two">Two</li>
            <li title="Three">Three</li>
            <li title="Four">Four</li>
         </ul>
  </div>

我为每个元素使用一个变量，但如果缺少一个或多个元素，则 var 无效并且 concat 函数不起作用。

var a = document.querySelector(".breadcrumb li:nth-child(2) > a").getAttribute("title");
var b  = document.querySelector(".breadcrumb li:nth-child(3) > a").getAttribute("title");
var c  = document.querySelector(".breadcrumb li:nth-child(4) > a").getAttribute("title");
var d  = document.querySelector(".breadcrumb li:nth-child(4) > a").getAttribute("title");

var str = a.concat(b,c,d);
console.log(str)

有办法做到这一点吗？

Answer 1

使用querySelectorAll()和map():

const res = [...document.querySelectorAll("#breadcrumb li:not(:first-of-type)")].map(el => el.getAttribute("title")).join(" ")
console.log(res)

<div id="breadcrumb">
  <ul>
    <li title="One">One</li>
    <li title="Two">Two</li>
    <li title="Three">Three</li>
    <li title="Four">Four</li>
  </ul>
</div>