（46）替代jQuery常用功能的原生JS代码
①addEventListener
|
命令 |
addEventListener |
|
效果 |
添加响应事件 |
|
兼容性 |
IE9及以上 https://caniuse.com/#search=addEventListener |
|
注： |
同一个回调函数，多次添加不会重复触发 |
范例：
<p id="test">
abc
</p>
<script>
var node = document.getElementById("test");
console.log(node);
node.addEventListener("click", function () {
alert("click!");
})
</script>
②DOMContentLoaded
|
命令 |
DOMContentLoaded |
|
效果 |
页面加载完成后触发本事件 |
|
兼容性 |
IE9及以上 https://caniuse.com/#search=DOMContentLoaded |
范例：
<script>
document.addEventListener("DOMContentLoaded", function () {
var node = document.getElementById("test");
console.log(node);
})
</script>
<p id="test">
abcd
</p>
注：
假如不加这个事件，那么输出结果是null
③querySelector、querySelectorAll 选择器
|
命令 |
querySelector（单个，遇见的第一个）； querySelectorAll（全部符合的） |
|
效果 |
DOM元素选择器，类似jQuery的选择器 |
|
兼容性 |
IE9及以上，IE8只有部分支持 https://caniuse.com/#search=DOMContentLoaded |
|
关于IE8 |
IE8的支持，被限制在CSS2.1和CSS3的一小部分。另外，在IOS8.x里会有bug（id然后加元素会失效）。 具体可以参见上面url里的说明 |
范例：
<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>
<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>
<p class="test">
abcd
</p>
<p class="container">
<p class="test">
defg
</p>
</p>
</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>
<p class="test">
事件触发器（点击触发）
</p>
<button class="add">添加事件</button>
<button class="remove">移除事件</button>
⑤classList 类列表
|
命令 |
DOM.classList |
|
效果 |
类列表 |
|
兼容性 |
IE10及以上 https://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>
<p class="test">
事件触发器（点击触发）
</p>
<button class="add">添加</button>
<button class="remove">移除</button>
⑥textContent和innerHTML
|
命令 |
textContent、innerHTML |
|
效果 |
前者查看文本内容； 后者查看html内容 |
|
兼容性 |
前者IE9及以上； 后者IE8及以上 https://caniuse.com/#search=textContent https://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>
<p class="test">
<span>事件触发器（点击触发）</span>
</p>
<button class="add">查看textContent内容</button>
<button class="remove">查看innerHTML内容</button>
注：
可以直接对其属性进行修改；但修改textContent属性，如果内容有html标签，不会被解释为html标签；
但通过innerHTML修改的html标签会被解释。
