Question

如何在JS中选择DOM元素？ jQuery的$选择语法的等价物是什么？

例如，我有一个<div>元素：

<div id="idDiv">Div Element</div>

现在我想在div上应用addClass（“ClassName”）jQuery函数。我可以通过以下方式使用jQuery来完成它：

$("#idDiv").addClass("ClassName") or jQuery("#idDiv").addClass("ClassName")

我怎么能用vanilla JS做到这一点？

Answer 1

您可以使用classList API：

// Adding classes
document.getElementById('idDiv').classList.add('foo');
// Toggling classes
document.getElementById('idDiv').classList.toggle('foo');
// Removing classes
document.getElementById('idDiv').classList.remove('bar');

请注意，IE9及以下版本不支持API，为了支持这些浏览器，您可以使用垫片，MDN有one。

实验解决方案：

function jFoo(selector) {
    return {
        elems: [].slice.call(document.querySelectorAll(selector)),
        _handleClass: function (cls, m) {
            var len = this.elems.length,
                cls = cls.trim().split(/\s/),
                clen = cls.length;
            for (var i = 0; i < len; i++) {
                for (var j = 0; j < clen; j++)
                this.elems[i].classList[m](cls[j]);
            }
            return this;
        },
        addClass: function (cls) {
           return this._handleClass(cls, 'add');
        },
        toggleClass: function (cls) {
           return this._handleClass(cls, 'toggle');
        },
        removeClass: function (cls) {
           return this._handleClass(cls, 'remove');
        },
    }
}

jFoo('selector').toggleClass('foo bar')
                .addClass('barz fool')
                .removeClass('foo');

Answer 2

您可以通过以下方式获取javascript元素：

    var getelem = document.getElementById("idDiv");

    getelem.setAttribute("class", "active");

Answer 3

使用javascript添加类的另一种方法：

document.getElementById("idDiv").className += " ClassName";

选择和修改DOM元素

3 个答案: