DOM Access and Manipulation JS 操纵DOM
JS 操纵DOM 有两种很简单的方式:
如果知道ID 的情况下. 我们可以使用 document.getElementById
我们还可以使用
document.getElementById("testId").textContent = "0"; document.querySelector(".testClass").classList.toggle("active");
我们还可以把function赋值到event listener中.
Ps: 这里是赋值, 而不是调用. 如果调用init, 应该是init()
document.querySelector(".btn-new").addEventListener("click",init); function init() {
console.log("HelloWorld!");
}
我们还可以生成click event handler 来监听click.
document.querySelector(".btn-test").addEventListener("click", function() {
console.log("HelloWorld!");
});
我们可以在MDN查看到所有的event listener 事件
DOM Access and Manipulation JS 操纵DOM的更多相关文章
- JavaScript学习笔记(三)——留言板知操纵DOM节点
用JavaScript写了一个简易的留言板,暂不涉及数据库接入等. 1.功能以及流程 主要功能即为留言,用两个文本框接受用户输入的用户名以及留言内容,然后通过"提交留言"按钮将用户 ...
- js的dom测试及实例代码
js的dom测试及实例代码 一.总结 一句话总结: 1.需要记得 创建 标签和创建文本节点都是document的活:document.createTextNode("Rockets的姚明&q ...
- js的dom操作(整理)(转)
js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...
- js的DOM操作整理(整理)
js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...
- Virtual DOM 系列一:认识虚拟DOM
1. 什么是Virtual DOM? Virtual DOM(虚拟DOM)是指用JS模拟DOM结构.本质上来讲VD是一个JS对象,并且至少包含三个属性:tag(html标签),props(标签的属性, ...
- jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...
- load/domContentLoaded事件、异步/延迟Js 与DOM解析
一.DOMContentLoaded 与 load事件 关于load和DOMContentLoaded事件,mdn对于它们是这样描述的: DOMContentLoaded mdn文档地址:https: ...
- js的DOM对象
1.js的Array对象 ** 创建数组(三种) - var arr1 = [1,2,3]; ...
- 高效率http页面优化法则一【JS对DOM的操作】
高效http页面优化法则一很多人都认为JS的效率太慢了,都不愿意用js来实现相对困难一点的程序逻辑.在这里我要说的是其实js的效率并不慢,慢的是DOM,如果操作好DOM,你的js效率将提高接近千倍(这 ...
随机推荐
- python中的if判断语句
判断(if)语句 目标 开发中的应用场景 if 语句体验 if 语句进阶 综合应用 01. 开发中的应用场景 生活中的判断几乎是无所不在的,我们每天都在做各种各样的选择,如果这样?如果那样?……  ...
- adb shell按键操作(input keyevent)
前言:input keyeven操作发送手机上常用的一些按键操作 一.keyevent事件对应数字 电话键 KEYCODE_CALL: 拨号键 KEYCODE_ENDCALL: 挂机键 KEYCODE ...
- WIFI探针 搞定
- python 爬虫数据准换时间格式
timeStamp = 1381419600 dateArray = datetime.datetime.utcfromtimestamp(timeStamp) otherStyleTime = da ...
- Python 类变量
class Person: country = "大清" def __init__(self, name, gender): self.name = name self.gende ...
- JAVA_关键词01_instanceof的应用
A instanceof B: 对象A是否是 B类的一个实例 应用举例:
- 【Maven】Project configuration is not up-to-date with pom.xml错误解决方法
导入一个Maven项目之后发现有一个如下的错误: Project configuration is not up-to-date with pom.xml. Run project configura ...
- MySQL的架构与历史
MySQL的最主要特性是它的存储引擎架构,这种架构设计将查询处理以及其他系统任务和数据的存储/提取相分离. MySQL最上层服务是一些如连接处理,授权认证,安全等. MySQL的核心服务功能大部分度在 ...
- Spring Boot 揭秘与实战(二) 数据存储篇 - Redis
文章目录 1. 环境依赖 2. 数据源 2.1. 方案一 使用 Spring Boot 默认配置 2.2. 方案二 手动创建 3. 使用 redisTemplate 操作4. 总结 3.1. 工具类 ...
- angular上传获取图片的directive指令
在AngularJS中,操作DOM一般在指令中完成,那么指令是如何实现的呢?指令的作用是把我们自定义的语义化标签替换成浏览器能够认识的HTML标签 一般的事件监听是在对静态的dom绑定事件,而如果在指 ...