javascript - 使用javascript更改html标签内的文本

Question

我正在尝试使用纯 JavaScript 更改 li 标记内的文本。 html 内容始终是这样的:

<section id="sidebar-right" class="sidebar-menu sidebar-right sidebar-open">
  <div class="cart-sidebar-wrap">
    <div class="cart-widget-heading">
      <h4>Shopping Cart</h4>
      <a id="sidebar_close_icon" class="close-icon-white"></a>
    </div>
    <div class="widget shopping-cart-sidebar store widget_shopping_cart">
      <div class="widget_shopping_cart_content">
        <div class="cart-widget-content">
          <div class="cart-widget-product">
            <ul class="cart-product-item cart_list product_list_widget ">
              <li class="empty">No products in the cart.</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

我想更改“购物车中没有产品”。使用 javascript 无需更改 html 代码。

我尝试过这样做:

<script type="text/javascript">
    var cart_ = document.getElementById("sidebar-right");
    if(cart_){
        var target_ = cart_.getElementsByClassName("cart-sidebar-wrap")[0];
        target_ = target_.getElementsByClassName("widget")[0];
        target_ = target_.getElementsByClassName("widget_shopping_cart_content")[0];
        target_ = target_.getElementsByClassName("cart-widget-content")[0];
        console.log(target_);
    }
</script>

有人可以展示如何做到这一点吗？

Answer 1

您可以使用querySelector使用 CSS 选择器，这比仅使用类名更灵活

在此示例中，我们选择带有 cart-product-item 类的 ul，然后选择任何直接子项 (>) li 元素。

let cart_ = document.getElementById("sidebar-right");
if (cart_) {
  let target_ = document.querySelector('ul.cart-product-item > li');

  console.log(target_);      
  target_.textContent = 'Changing the text';
}

<section id="sidebar-right" class="sidebar-menu sidebar-right sidebar-open">
  <div class="cart-sidebar-wrap">

    <div class="cart-widget-heading">
      <h4>Shopping Cart</h4>
      <a id="sidebar_close_icon" class="close-icon-white"></a>
    </div>
    <div class="widget shopping-cart-sidebar store widget_shopping_cart">
      <div class="widget_shopping_cart_content">

        <div class="cart-widget-content">
          <div class="cart-widget-product">
            <ul class="cart-product-item cart_list product_list_widget ">
              <li class="empty">No products in the cart.</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>