DOM操作

1、NodeList 和 HTMLCollection的区别

NodeList：文档节点集合
HTMLCollection: 文档元素集合
HTMLCollection相当于是NodeList中type=1的节点集合

html节点类型：

STT	TYPE	描述
1	`1`	元素
2	`2`	属性
3	`3`	文本
4	`6`	注释
5	`9`	文档, document
6	`11`	文档片断

2、访问方式

STT	访问内容	访问所有节点集合	访问元素集合
1	获取第一个子节点	`firstChild`	`firstElementChild`
2	最后一个子节点	`lastChild`	`lastElementChild`
3	前一个兄弟节点	`previousSibling`	`previousElementSibling`
4	后一个兄弟节点	`nextSibling`	`nextElementSibling`

3、遍历演示

HTMLCollection没有forEach,用for遍历。

遍历所有节点集合：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历所有节点集合</title>
</head>
<body>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>
</body>
<script>
    var ul = document.querySelector("ul");
    // 遍历
    var eles = [];
    ul.childNodes.forEach(function (item) {
        // 只返回类型为1的元素节点
        this.push(item);
    }, eles);
    console.log(eles);
</script>
</html>

演示效果图：

遍历元素节点集合：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历元素节点集合：</title>
</head>
<body>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>
</body>
<script>
    var ul = document.querySelector("ul");
    for (var i = 0; i < ul.childElementCount; i++) {
        console.log(ul.children.item(i));
    }
</script>
</html>

演示效果图：

事件的添加方式

STT	添加方式
1	在 html 标签上添加属性
2	给 html 元素绑定事件属性
3	给 html 元素添加属性
4	监听器
5	事件派发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件添加方式</title>
</head>
<body>
<!--1、在 html 标签上添加属性-->
<button onclick="alert('在 html 标签上添加属性');">按钮1</button>
<button onclick="show(this)">按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</body>
<script>
    // 1. 给html元素绑定事件属性
    function show(ele) {
        var text = '给html元素绑定事件属性';
        alert(text);
    }
    // 2. 给html元素添加属性
    var btn3 = document.querySelector("button:nth-of-type(3)");
    btn3.onclick = function () {
        alert('给html元素添加属性');
    };
    // 3. 监听器
    var btn4 = document.querySelector("button:nth-of-type(4)");
    // btn4.addEventListener(事件类型, 事件回调函数, 传递机制)
    btn4.addEventListener(
        "click",
        function () {
            alert('监听器');
        },
        // false: 冒泡阶段触发
        false
    );
    // 4. 事件派发
    var btn5 = document.querySelector("button:last-of-type");
    btn5.addEventListener(
        "click",
        function () {
            alert('事件派发');
        },
        false
    );
    // 创建一个事件对象
    var ev = new Event("click");
    // 不用点击,也会自动的触发点击事件
    btn5.dispatchEvent(ev);
</script>
</html>