原文来自:http://ms.csdn.net/geek/105175
本文对其原文进行格式化编辑,部分增补
(46)替代jQuery常用功能的原生JS代码
①addEventListener
命令 | addEventListener |
效果 | 添加响应事件 |
兼容性 | IE9及以上 |
注: | 同一个回调函数,多次添加不会重复触发 |
原型 | dom. addEventListener("事件名", 回调函数, 是否在捕获阶段执行) 第三个值默认为false(默认冒泡阶段执行),如果为true,则在捕获阶段执行。 |
范例:
<div id="test">
abc
</div>
<script>
var node = document.getElementById("test");
console.log(node);
node.addEventListener("click", function () {
alert("click!");
})
</script>
②DOMContentLoaded
命令 | DOMContentLoaded |
效果 | 页面加载完成后触发本事件 |
兼容性 | IE9及以上 http://caniuse.com/#search=DOMContentLoaded |
范例:
<script>
document.addEventListener("DOMContentLoaded", function () {
var node = document.getElementById("test");
console.log(node);
})
</script>
<div id="test">
abcd
</div>
注:
假如不加这个事件,那么输出结果是null
③querySelector、querySelectorAll 选择器
命令 | querySelector(单个,遇见的第一个); querySelectorAll(全部符合的) |
效果 | DOM元素选择器,类似jQuery的选择器 |
兼容性 | IE9及以上,IE8只有部分支持 |
关于IE8 | IE8的支持,被限制在CSS2.1和CSS3的一小部分。另外,在IOS8.x里会有bug(id然后加元素会失效)。 具体可以参见上面url里的说明 |
范例:
<body>
<script>
document.addEventListener("DOMContentLoaded", function () {
var node = document.querySelector('.container').querySelector('.test');
console.log(node);
var node = document.querySelector('body').querySelectorAll('.test');
console.log(node);
})
</script>
<div class="test">
abcd
</div>
<div class="container">
<div class="test">
defg
</div>
</div>
</body>
注:
【1】可以选择某一个DOM元素下的子元素(如第二个);
【2】不加All的是选择第一个,返回结果是单个DOM元素;加了All返回的是一个数组(即使只有一个);
④removeEventListener 移除事件
命令 | removeEventListener |
效果 | 移除响应事件 |
兼容性 | 没有查到,但推测和addEventListener相同 |
注: | 同一个回调函数,多次添加不会重复触发; 删除已删除事件也不会报错。 |
<script>
document.addEventListener("DOMContentLoaded", function () {
var event = function () {
alert("event happened!");
}
var node = document.querySelector('.test');
var add = document.querySelector('.add');
var remove = document.querySelector('.remove');
add.addEventListener("click", function () {
node.addEventListener("click", event);
})
remove.addEventListener("click", function () {
node.removeEventListener("click", event);
})
})
</script>
<div class="test">
事件触发器(点击触发)
</div>
<button class="add">添加事件</button>
<button class="remove">移除事件</button>
⑤classList 类列表
命令 | DOM.classList |
效果 | 类列表 |
兼容性 | IE10及以上 http://caniuse.com/#search=classList |
注: | 结果是一个对象,但可以像数组那样获取第N个类名; |
常用方法 | 单独获取所有类名(以字符串形式)是classList.value 添加类名是classList.add(类名) 移除类名是classList.remove(类名) 查看是否存在某个类classList.contains(类名) 切换是否显示某个类classList.toggle(类名) |
范例:
<script>
document.addEventListener("DOMContentLoaded", function () {
var node = document.querySelector('.test');
var list = node.classList;
console.log(list);
var add = document.querySelector('.add');
var remove = document.querySelector('.remove');
add.addEventListener("click", function () {
list.add("anotherClass")
})
remove.addEventListener("click", function () {
list.remove("anotherClass")
})
})
</script>
<div class="test">
事件触发器(点击触发)
</div>
<button class="add">添加</button>
<button class="remove">移除</button>
⑥textContent和innerHTML
命令 | textContent、innerHTML |
效果 | 前者查看文本内容; 后者查看html内容 |
兼容性 | 前者IE9及以上; 后者IE8及以上 http://caniuse.com/#search=textContent http://caniuse.com/#search=innerHTML |
范例:
<script>
document.addEventListener("DOMContentLoaded", function () {
var node = document.querySelector('.test');
var add = document.querySelector('.add');
var remove = document.querySelector('.remove');
add.addEventListener("click", function () {
console.log(node.textContent);
})
remove.addEventListener("click", function () {
console.log(node.innerHTML);
})
})
</script>
<div class="test">
<span>事件触发器(点击触发)</span>
</div>
<button class="add">查看textContent内容</button>
<button class="remove">查看innerHTML内容</button>
注:
可以直接对其属性进行修改;但修改textContent属性,如果内容有html标签,不会被解释为html标签;
但通过innerHTML修改的html标签会被解释。