从嵌套元素中收集分类的值

<div class="categories">
  <ul>
    <li>Category 1</li>
    <li>Category 2
      <ul>
        <li>Subcategory 2.1</li>
        <li>Subcategory 2.2</li>
      </ul>
    </li>
    <li>Category 3</li>
  </ul>
</div>

// 使用querySelectorAll选择所有的li元素
const listItems = document.querySelectorAll('.categories li');

// 创建一个数组来存储分类的值
const categories = [];

// 遍历所有的li元素
listItems.forEach(item => {
  categories.push(item.textContent.trim());
});

console.log(categories);
// 输出: ["Category 1", "Category 2", "Subcategory 2.1", "Subcategory 2.2", "Category 3"]

// 使用XPath选择所有的li元素
const xpathResult = document.evaluate('//div[@class="categories"]//li', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

const categories = [];
for (let i = 0; i < xpathResult.snapshotLength; i++) {
  categories.push(xpathResult.snapshotItem(i).textContent.trim());
}

console.log(categories);
// 输出: ["Category 1", "Category 2", "Subcategory 2.1", "Subcategory 2.2", "Category 3"]

<div class="categories">
  <ul>
    <li id="cat1">Category 1</li>
    <!-- ... -->
  </ul>
</div>

const category = document.getElementById('cat1').textContent.trim();
console.log(category);
// 输出: "Category 1"