hx-select

hx-select 是 HTMX 的一个属性，用于从服务器响应中选择部分内容进行交换（swap）。它常用于服务器返回的是一个大页面，但你只想从中提取一部分 DOM 元素来更新前端。

语法

<button hx-get="/some-url" hx-select="#main-content" hx-target="#container">
  加载内容
</button>

HTML 页面

<div id="container">旧内容</div>

<button 
  hx-get="/partial-page" 
  hx-select="#new-section" 
  hx-target="#container">
  加载新内容
</button>

/partial-page 返回内容如下：

<html>
  <body>
    <h1>不需要</h1>
    <div id="new-section">这是我想要的部分</div>
    <footer>也不需要</footer>
  </body>
</html>

最终的页面效果：

<div id="new-section">这是我想要的部分</div>

<button 
  hx-get="/partial-page" 
  hx-select="#new-section" 
  hx-target="#container">
  加载新内容
</button>

hx-select 与 hx-swap-oob 不同的是，hx-swap-oob 可以同时交换多处内容，hx-select 是从返回的结果中截取指定内容。