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效率将提高接近千倍(这 ...
随机推荐
- 201621123001《Java程序设计》第1周学习总结
1. 本周学习总结 认识java的三个层次:java语法 面向对象设计能力 应用 . 学习eclipse创建java文件的方法. 学习markdown的基本语法,了解写博客的几种常用形式. 了解JVM ...
- dubbo-admin 无法支持JDK1.8
dubbo-admin 无法支持JDK1.8怎么处理? 1.从git上下载最新源码 https://github.com/alibaba/dubbo 2.编译war包,或直接容器启动
- 卷积神经网络-Dropout
dropout 是神经网络用来防止过拟合的一种方法,很简单,但是很实用. 基本思想是以一定概率放弃被激活的神经元,使得模型更健壮,相当于放弃一些特征,这使得模型不过分依赖于某些特征,即使这些特征是真实 ...
- 1.横向滚动条,要设置两个div包裹. 2. 点击切换视频或者图片. overflow . overflow-x
1.横向滚动条. div.1 > div.2 > img img img 第一: 设置 div.1 一个固定的宽度 和高度 . 例如宽度 700px; 高度是 120px; 设置 o ...
- http 请求头部解析
作者:知乎用户链接:https://www.zhihu.com/question/42696895/answer/109035792来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...
- 转:openwrt 框架分析
本文是本人对OpenWrt的Makefile的理解,并非转载.OpenWrt是一个典型的嵌入式Linux工程,了解OpenWrt的Makefile的工作过程对提高嵌入式Linux工程的开发能力有极其重 ...
- java连接操作数据库
Connection 类prepareStatement(String sql) 创建一个 PreparedStatement 对象来将参数化的 SQL 语句发送到数据库. PreparedState ...
- Kaggle:House Prices: Advanced Regression Techniques 数据预处理
本博客是博主在学习了两篇关于 "House Prices: Advanced Regression Techniques" 的教程 (House Prices EDA 和 Comp ...
- viewport是左下角开始的
- 爬格子问题(经典强化学习问题) Sarsa 与 Q-Learning 的区别
SARSA v.s. Q-learning 爬格子问题,是典型的经典强化学习问题. 动作是上下左右的走,每走一步就会有一个-1的奖赏.从初始状态走到最终的状态,要走最短的路才能使奖赏最大.图中有一个悬 ...