如何在Vanilla JavaScript中按父元素选择器获取目标元素文本？

你之前用getElementsByClassName的方式有误，这个方法仅支持传入单个类名，不能直接使用完整的CSS选择器字符串，所以才返回了HTMLCollection而非目标元素的文本。

单个匹配元素的情况 #

如果只需要获取第一个符合条件的.pay-plan-price元素的文本，直接用querySelector（和jQuery选择器规则完全一致）：

var fee = document.querySelector('.plan-box.active .pay-plan-price').textContent;
console.log(fee);

多个匹配元素的情况 #

如果页面中有多个符合条件的元素，用querySelectorAll获取所有匹配元素，再遍历提取文本：

var priceElements = document.querySelectorAll('.plan-box.active .pay-plan-price');
// 转成数组后遍历，trim()可去除文本前后的空白字符
var fees = Array.from(priceElements).map(element => element.textContent.trim());
console.log(fees);

说明：querySelector和querySelectorAll是原生JS中支持完整CSS选择器的方法，完全可以替代jQuery的选择器逻辑，其中querySelector返回第一个匹配元素，querySelectorAll返回所有匹配元素的NodeList集合。

内容的提问来源于stack exchange，提问作者Suffii