如何使用JS更改列表项的结构以解决它们之间的内联块生成空间

Question

在某些使用inline-block时删除列表项之间的空格的方法中，一种方法是更改​​此代码：

ul{
  width: 100%;
  padding: 0;
  margin: 0;
}
li{
  display: inline-block;
  background: #E43;
  color: white;
  padding: 10px 20px 10px 20px;
}
li:hover{
  background: #F65;
  border-bottom: 2px solid dodgerblue;
}

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

此代码：

ul{
  width: 100%;
  padding: 0;
  margin: 0;
}
li{
  display: inline-block;
  background: #E43;
  color: white;
  padding: 10px 20px 10px 20px;
}
li:hover{
  background: #F65;
  border-bottom: 2px solid dodgerblue;
}

<ul><li>
    Item 1</li><li>
    Item 2</li><li>
    Item 3</li>
</ul>

效果很好。

问题是如何使用 pure JavaScript将第一代码的li结构更改为第二代码。

Answer 1

您可以执行以下操作：

const ul = document.querySelector('ul');
const iterator = document.createNodeIterator(ul, NodeFilter.SHOW_TEXT, node => {
  if (node.parentElement.nodeName === 'UL') {
    return NodeFilter.FILTER_ACCEPT;
  }
  return NodeFilter.FILTER_REJECT;
});

const toBeRemoved = [];
let next = iterator.nextNode();
while(next) {
  toBeRemoved.push(next);
  next = iterator.nextNode();
}

toBeRemoved.forEach(n => n.remove());

ul{
  width: 100%;
  padding: 0;
  margin: 0;
}
li{
  display: inline-block;
  background: #E43;
  color: white;
  padding: 10px 20px 10px 20px;
}
li:hover{
  background: #F65;
  border-bottom: 2px solid dodgerblue;
}

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

此操作是创建一个NodeIterator以遍历text元素的所有UL节点，并仅保留以UL作为第一个节点的那些节点祖先。