原生JavaScript替代jQuery的Dom操作简单实例

jQuery的Dom操作十分简单，在开发iDevs主题的时候，其中“菜单”和“搜索”部分使用到了一些很基本的Dom操作，图方便，我使用了jQuery，闲来无事，尝试着使用原生的js完成这一操作，发现其代码量一样，且原生js效率更高，啰嗦多了，先贴代码。

HTML结构如下：

<input type="button" id="Test" class="menu_click" value="按钮" />

jQuery的Dom实例：

jQuery_btn_click("Test", "menu_click", "menu_close", true);
function jQuery_btn_click(btn, on, off, flag) {
    $('#' + menu).click(function () {
        $('#' + menu).prop('class', (flag = !flag) ? on : off);
    });
}

为了方便，我封装了函数并传了几个有趣的参数，代码量很少，具体传的什么一看便知。

原生Javascript实例：

cover_click("Test", "menu_click", "menu_close", true);
function cover_click(btn, on, off, flag) {
    (btn = document.getElementById(btn)).onclick = function () {
        btn.setAttribute("class", (flag = !flag) ? on : off);
    }
}

就是这样子，原生的方法操作起来与jQuery的代码量几乎一致。

兼容性

兼容性方面，jQuery视版本而定，2.0版本之后已经不再支持IE8-，原生的，我本地测试是支持IE7+，欢迎大家测试一下。

上面只是一个实例，在此记录一下，修修改改还可以完成其他的一些简单的Dom操作，如果有更方便且简单的方法欢迎指出。