原生js绑定事件的方法和dom操作

1.行内绑定：在标签上写οnclick=“事件名”

<button onclick="handleClick">Click Me</button>

2.在script中绑定

document.getElementById("选择的标签").onclick=function(){
    /*   函数体   */     
}

3.绑定事件监听函数

绑定事件的第三种方法是用addEventListener()或者attachEvent()来绑定事件监听函数

元素选择器.addEventListener(事件名（click,keydown...）, 回调函数, true捕获/false冒泡);

移除事件监听

document.getElementById("选择的标签").removeEventListenner('click') 

DOM 是网页中用来表示文档中对象的标准模型，他是由节点和对象组成的结构集合。在浏览器解析 HTML 标签时，会构建一个 DOM 树结构。 由此呢 js 也提供了一些 dom 的操作 一、dom 元素获取

1.document.getElementById(id 的值)  通过 id 来获取元素的对象，返回值是一个对象

2.document.getElementsByName(name)  通过 name 属性来获取对象的,返回值是一个数组，与 getElementById()方法类似，但他是查询的 name 元素，而不是 id 属性

3.document.getElementsByTagName()  通过标签来获取元素的对象, 返回值是一个数组

4.document.getElementsByClassName()  通过 class 类名来获取的对象,返回值是一个数组

5.document.querySelector() css 选择器，返回与该模式匹配的第一个元素，结果为一个元素；如果没找到匹配的元素，则返回 null 6.document.querySelectorAll() css 选择器，返回与该模式匹配的所有元素，结果为一个类数组

二、dom 创建 dom 操作

1. 创建：新的标签(元素节点) = document.createElement("标签名")

2. 删除：父节点.removeChild(子节点);

3. 插入：insertBefore(新插入的节点，参照物节点) 往某个节点的前面插入一个新的节点

4. 追加：appendChild(新的节点的名) 当前对象追加一个子节点