原生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 操作

创建：新的标签(元素节点) = document.createElement("标签名")
删除：父节点.removeChild(子节点);
插入：insertBefore(新插入的节点，参照物节点) 往某个节点的前面插入一个新的节点
追加：appendChild(新的节点的名) 当前对象追加一个子节点

原生js绑定事件的方法和dom操作相关推荐

原生js绑定事件的三种方法
// 绑定事件// 行内绑定// 选择元素绑定事件// 事件监听有三个参数('什么事件','函数','true或false')true(事件捕获) false(事件冒泡)document.query ...
Node.js的环境搭建方法和 npm 的使用方法
Node.js的环境搭建方法和 npm 的使用方法 Node.js 环境的搭建 Node.js 介绍 Node.js 下载配置Node.js node.js 测试 npm(包管理器)使用方法 npm ...
JS绑定事件三种方式
三种方式 1.在DOM中直接绑定 2.在JS代码中直接绑定 3.使用事件监听函数绑定事件一.在DOM中直接绑定也就是直接在html标签中通过 onXXX="" 来绑定.举个例子 ...
JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前言絮叨絮叨这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
jQuery动态绑定事件或者原生js动态绑定事件
说一个这周写前后端交互时遇到的一个印象深刻的问题--动态绑定事件. 一.jQuery 一般我们给节点绑定事件使用的都是这样的形式 $("#btns").click(function ...
原生 JS 实现别踩方块儿小游戏 - 超简单
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志.--苏轼案例效果原生 JavaScript 实现的别踩方块小游戏案例效果如下所示: 案例分析静态页面将这个静态页面可以划分为四个部分,如下图 ...
js绑定事件和解绑事件
在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性 attachEvent方法只支持IE678,不兼容其他浏览器 addEv ...
Angualr中通过原生js和ViewChild的方式获取dom
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
Node.js基础2 fs方法和path方法的使用
fs方法 fs模块是和node.js一起下载安装的一个全局模块. 调用fs.readFile()方法来读取文件内容: 第一步: 创建一个js文件导入fs模块,来操作文件. 第二步: 调用fs.read ...

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

原生js绑定事件的方法和dom操作相关推荐

最新文章

热门文章