12-DOM事件

1 DOM 概念

DOM（Document Object Model）文档对象模型，可以把 HTML 和 XML 描述成一个文档对象。

核心思想：谁 要 干什么。

2 获取节点的五种方式

• document.getElementById(“ID值”)：通过 id 获取（返回单个元素）
• document.getElementsByTagName(“标签名”)：通过标签名获取（返回伪数组）
• document.getElementsByClassName(“类名”)：通过类名获取（返回伪数组）
• document.querySelector(“css选择器”)：根据选择器获取单个元素
• document.querySelectorAll(“css选择器”)：根据选择器获取多个元素（返回伪数组）

3 事件三要素

• 事件源（谁）
• 事件名称（怎么触发）
• 事件驱动函数（触发后干什么）

格式：

事件源.on事件名称 = function () {
    // 代码
};

4 常用事件列表

• 点击事件：onclick（单击事件）​、ondblclick(双击事件)

• 焦点事件：onblur（失去焦点）、onfocus（获得焦点）
• 加载事件：onload（页面或图像加载完成）
• 鼠标事件：onmousedown、onmouseup、onmousemove、onmouseover、onmouseout
• 键盘事件：onkeydown、onkeyup、onkeypress
• 选择和改变：onchange、onselect
• 表单事件：onsubmit、onreset

示例：点击按钮隐藏元素

var btn = document.getElementById("btn");
var box = document.getElementById("box");

btn.onclick = function () {
    box.style.display = "none";
};

节点增加示例：

var newH1 = document.createElement('h1');
newH1.innerHTML = '我是新建的h1';
box[0].appendChild(newH1);