Question

如何使用JS选择所有类？是否可以在不设置[0]或[1]或[184]的情况下选择它？

我尝试删除参数和.each。

代码：

<div class='message'>heh :smile:</div>
<div class='message'>:smile:</div>

function replaceEmotes() {
    var str = document.querySelectorAll(".message")[0].innerHTML;
    var res = str.replace(":smile:", "<i class='em em-smile'></i>");
    document.querySelectorAll(".message")[0].innerHTML= res;
}

它有效，但仅适用于class的第一个元素。我需要将所有其他元素更改为。

Answer 1

重要的是要先学习基本语言语法。 [0]正在选择数组（或类似数组的对象）的0索引。因此，要对它们全部进行操作，可以使用带有变量的循环，该变量从0开始递增，一直持续到超出数组范围为止。

function replaceEmotes() {
    var messages = document.querySelectorAll(".message");
    for (var i = 0; i < messages.length; i++) {
        var str = messages[i].innerHTML.replace(":smile:", "<i class='em em-smile'></i>");
        messages[i].innerHTML = str;
    }
}

还有其他方法，但这是一种基本语法，应该首先学习。

Answer 2

您可以使用document.getElementsByClassName("message")并遍历NodeList中的所有元素

Answer 3

使用forEach遍历所有消息节点并替换表情。另外请注意，我正在使用全局正则表达式来替换消息中的所有:smile:字符串，而不仅仅是第一个。

function replaceEmotes() {
    var messages = document.querySelectorAll(".message");

    messages.forEach(message => {
       message.innerHTML = message.innerHTML.replace(/:smile:/g, "<i class='em em-smile'></i>");
    });
}

Answer 4

// about dependent_false: https://en.cppreference.com/w/cpp/language/if template <typename T> struct dependent_false : std::false_type { }; // has_const_iterator is true if has const_iterator member, otherwise // is false. More info: https://en.cppreference.com/w/cpp/types/void_t template <typename, typename = std::void_t<>> struct has_const_iterator: std::false_type { }; template <typename T> struct has_const_iterator<T, std::void_t<typename T::const_iterator>> : std::true_type { }; template <typename T> inline constexpr bool has_const_iterator_v = has_const_iterator<T>::value; // has_value_type true if the class has value_type, otherwise is false template <typename, typename = std::void_t<>> struct has_value_type : std::false_type { }; template <typename T> struct has_value_type<T, std::void_t<typename T::value_type>> : std::true_type { }; template <typename T> inline constexpr bool has_value_type_v = has_value_type<T>::value; namespace alp{ template <typename It> constexpr decltype(auto) select_const_iterator() { if constexpr (has_const_iterator_v<It>) return typename It::const_iterator{}; else if constexpr (std::is_pointer_v<It>){ using value_type = std::remove_pointer_t<It>; using const_pointer = const value_type*; return const_pointer{0}; } else if constexpr (has_value_type_v<It>){ using value_type = typename It::value_type; if constexpr (std::is_same_v<typename std::vector<value_type>::iterator, It>) return typename std::vector<value_type>::const_iterator(); } else static_assert(dependent_false<It>::value, "TODO"); } template <typename It> struct iterator_traits{ using const_iterator = decltype(select_const_iterator<It>()); }; }// namespace struct A { using const_iterator = int; }; struct B{}; int main() { std::cout << std::boolalpha << std::is_same_v<typename alp::iterator_traits<A>::const_iterator, int> << '\n' << std::is_same_v<typename alp::iterator_traits<int*>::const_iterator, const int*> // not compile: // << std::is_same_v<typename alp::iterator_traits<B>::const_iterator, const B> << '\n'; using it = std::vector<int>::iterator; std::cout << std::is_same_v<alp::iterator_traits<it>::const_iterator, std::vector<int>::const_iterator> << '\n'; }选择给定类名称的所有元素并将其存储在类似数组的对象中。可以遍历对象而不是手动访问它们。

document.querySelectorAll()

您还可以使用var elements = document.querySelectorAll('.className'); for(var i = 0; i < elements.length; i++){ var str = elements[i].innerHTML; elements[i].innerHTML = str.replace(":smile:", "<i class='em em-smile'></i>"); }

做同样的事情

document.getElementsByClassName()

如何使用JS选择所有类

4 个答案: