DOM操作词典大全——今日词条：事件基础
欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。
致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨
文章目录
JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。
简单理解∶触发—响应机制。
一、事件组成
事件三部分组成：事件源、事件类型、事件处理程序
- 事件源：事件被触发的对象
- 事件类型：如何触发 什么事件
- 事件处理程序：通过一个函数赋值的方式
二、操作元素
JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性
常见鼠标事件
改变元素内容
elemen.innerText：从起始到终止位置的内容，但去除HTML标签、空格、换行
element.innerHTML：从起始到终止位置的全部内容
var di = document.querySelector('div');
btn.onclick = function () {
// di.innerText='2022';
di.innerHTML = getDate();
}
注意：
innerText 不识别HTML标签
div.innerText = '<strong>双</strong>十一';
innerHTML 识别HTML标签
div.innerHTML = '<strong>双</strong>十一';
修改样式属性
如果样式修改较多，可以采取操作类名方式更改元素样式。
class因为是个保留字，因此使用className来操作元素类名属性
className会直接更改元素的类名，会覆盖原先的类名。
element.style 行内样式操作，权重较高
element.className 类名样式操作
div {
width: 200px;
height: 200px;
background-color: red;
}
.change {
width: 400px;
height: 400px;
background-color: blue;
}
<div>
文本
</div>
<!-- element.className 类名样式操作 -->
<script>
var div = document.querySelector('div');
div.onclick = function () {
// this.style.backgroundColor = 'purple';
this.className = 'change';
}
</script>
三、节点操作：获取元素（更方便）
一般地，节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值）这三个基本属性。
元素节点nodeType为1 //主要操作对象
属性节点nodeType为2
文本节点nodeType 为3(文本节点包含文字、空格、换行等)
节点层级：利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
父子节点
父级节点：node.parentNode：获取的是离元素最近的父节点，没有父节点返回null
子节点：parentNode.childNodes（标准）：返回包含指定节点的子节点的集合，该集合为即时更新的集合。
子节点：parentNode.children (非标准)：parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回（这个是我们重点掌握的）。
虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用
var erweima = document.querySelector('.erweima');
//父级节点：node.parentNode
erweima.parentNode; //获取的是离元素最近的父节点,没有父节点返回null
//子节点：parentNode.childNodes(标准)
//
var ul = document.querySelector('ul');
console.log(ul.childNodes);
//子节点：parentNode.children(非标准)
console.log(ul.children);
第一个和最后一个子节点
parentNode.firstChild ：返回第一个子节点，找不到返回null，同样是所有节点
parentNode.firstElementChild 返回第一个子元素节点（IE9以上）
parentNode.lastChild ：返回最后一个子节点，找不到返回null，同样是所有节点
parentNode.lastElementChild 返回最后一个子元素节点（IE9以上）
实际开发的写法既没有兼容性问题又返回第一个子元素
// parentNode.firstChild ：返回第一个子节点，找不到返回null
var ol = document.querySelector('ol');
console.log(ol.firstChild);
//parentNode.firstElementChild 返回第一个子节点，IE9以上
console.log(ol.firstElementChild);
// parentNode.lastChild ：返回最后一个子节点
console.log(ol.lasttChild);
//parentNode.firstElementChild 返回最后一个子节点，IE9以上
console.log(ol.lastElementChild);
//实际开发的写法既没有兼容性问题又返回第一个子元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);//最后一个
兄弟节点
node.nextSibling：获取下一个兄弟节点，没有返回null，包含所有节点
node.previousSibling：获取上一个兄弟节点，没有返回null，包含所有节点
node .nextElementSibling ：返回当前元素下一个兄弟元素节点，找不到则返回null（IE9以上）
node.previousElementsibling ：返回当前元素上一个兄弟元素节点，找不到则返回null。（IE9以上）
// node.nextSibling：获取下一个兄弟节点，没有返回null，包含所有节点
var div = document.querySelector('div');
console.log(div.nextSibling);
//node.previousSibling：获取上一个兄弟节点，没有返回null，包含所有节点
console.log(div.previousSibling);
// node .nextElementSibling
//nextElementSibling返回当前元素下一个兄弟元素节点，找不到则返回null。
console.log(div.nextElementSibling);
// node.previousElementsibling ：返回当前元素上一个兄弟元素节点，找不到则返回null。
console.log(div.previousElementSibling);
节点操作
创建和添加元素节点
document.createElement ('tagName ') ：创建和添加元素节点，创建由tagName指定的 HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
document.write('<div>123</div>'); ：创建元素
//是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
node .appendChild(child) ：添加元素节点,将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素。
node .insertBefore(child，指定元素)：将一个节点添加到父节点的指定子节点前面。类似于css里面的before伪元素。
//document.createElement ('tagName ') ：创建元素节点
var li = document.createElement('li');
// node .appendChild(child) ：添加元素节点
var ul = document.querySelector('ul');
ul.appendChild(li);
// node .insertBefore(child，指定元素)
var lili = document.createElement('li');
ul.insertBefore(li,ul.children[0]);
删除节点
node. removeChild (child)：方法从DOM中删除一个子节点，返回删除的节点。
阻止链接跳转需要添加 javascript:void(0); 或者(javascript: ；)
复制节点
node.cloneNode () 返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点
node.cloneNode();括号为空或者里面是false浅拷贝只复制标签不复制里面的内容
node.cloneNode(true);括号为true 深拷贝复制标签复制里面的内容
排他思想
如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法∶
1.所有元素全部清除样式(干掉其他人)
2.给当前元素设置样式（留下我自己)
3.注意顺序不能颠倒，首先干掉其他人，再设置自己
四、面试题
（一）、require/import之间的区别？
（1）require是CommonJS语法，import是ES6语法；
（2）require只在后端服务器支持，import在高版本浏览器及Node中都可以支持；
（3）require引入的是原始导出值的复制，import则是导出值的引用；
（4）require时运行时动态加载，import是静态编译；
（5）require调用时默认不是严格模式，import则默认调用严格模式.
（二）、原型和原型链
1、原型的概念
JavaScript的象中都包含了一个 [proto] 内部属性，这个属性所对应的就是自身的原型
2、原型链的概念
当一个对象调用自身不存在的属性/方法时，就会去自己 [proto] 关联的前辈prototype 对象
上去找，如果没找到，就会去该 prototype 原型 [proto] 关联的前辈 prototype 去找。依次类推，直到找到属性/方法或 undefined 为止。从而形成了所谓的“原型链”。
听说你不点赞评论？?
本期到这里就结束了，感谢阅读！有问题留言，及时回复
- 点赞加关注，持续更新实用技巧、热门资源、软件教程等
- 有任何 软件 影视 教程资源 考证资料等需求留言即可