我正在尝试使用纯 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>
有人可以展示如何做到这一点吗？
您可以使用querySelector https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector使用 CSS 选择器，它比仅使用类名更灵活
在此示例中，我们选择ul与班级cart-product-item，然后选择任何直接子项 (>) 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
