![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：这个图片好大, 不错
Collection
Collection
NodeList 文档所有节点的集合（包括空格 回车等），我们可通过节点列表中的索引号来访问列表中的节点（索引号由0开始）。
HTMLCollection: 表示 HTML 元素的集合（只返回有用的元素）。类似数组，但又不是数组。不会返回无用的文本节点如：空格 回车等等。
特征：1.键名、由0开始 2.有一个length属性,表示数量 3.始终返回一个集合，哪怕只有一个元素。
// js 节点有11种类型,但是与html相关的只有6个// 1: 元素// 2: 属性// 3: 文本// 6: 注释// 9: 文档, document// 11: 文档片断
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>遍历元素节点</title></head><body><ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul></body><script>//先写一个数组 待放遍历结果var eles = [];ul.childNodes.forEach(function (item) {// 只返回类型为1的元素节点 this.push然后添加到eles数组里面if (item.nodeType === 1) this.push(item);// 这里表示要添加的数组}, eles);cl(eles);</script></html>
效果：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>遍历元素节点</title></head><body><ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul></body><script>for (var i = 0; i < ul.childElementCount; i++) {cl(ul.children.item(i));}</script></html>
效果：
classList对象方法：
classList.add()增加值classList.remove()移除值classList.toggle()判断，有此值则移除，无则添加classList.replace()替换
1.onclick 直接添加到按钮属性当中
<button onclick="var text=this.innerText;alert(text);">按钮1</button>
2.给onclick的值传一个参数
<button onclick="show(this)">按钮2</button>
<script>function show(ele) {var text = ele.innerText;alert(text);}</script>
3.给html元素添加属性
<button>按钮3</button>
var btn3 = document.querySelector("button:nth-of-type(3)");btn3.onclick = function () {alert(this.nodeName);};
4.监听器方式
<button>按钮4</button>
var btn4 = document.querySelector("button:nth-of-type(4)");// btn4.addEventListener(事件类型, 事件回调函数, 传递机制)btn4.addEventListener("click",function () {alert(this.innerText);},// false: 冒泡阶段触发false);
5.事件派发（自动操作）
<button>按钮5</button>
var btn5 = document.querySelector("button:last-of-type");btn5.addEventListener("click",function () {alert(this.innerText);},false);// 创建一个事件对象var ev = new Event("click");// 不用点击,也会自动的触发点击事件btn5.dispatchEvent(ev);
总结常见的事件：
（1）输入文本时：
onchange内容改变事件onfocus获得焦点事件onblur失去焦点事件onkeydown键盘按键按下事件onkeypress释放键盘按键事件
（2）鼠标事件
onclick点击事件ondbclick表示鼠标快速点击了两次。mouseover表示鼠标经过。mouseout表示鼠标离开区域
冒泡原理：
