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效率将提高接近千倍(这 ...
随机推荐
- ArrayList和LinkedList有什么区别?
---恢复内容开始--- ArrayList和LinkedList都实现了List接口,但是: ArrayList是基于索引的数据接口,底层是数组,能够以O(1)时间复杂度随机访问元素.而Linked ...
- fftshift函数详解
reference: https://ww2.mathworks.cn/help/matlab/ref/fftshift.html 一.实信号情况 因为实信号以fs为采样速率的信号在 fs/2处混叠, ...
- L1-054 福到了
“福”字倒着贴,寓意“福到”.不论到底算不算民俗,本题且请你编写程序,把各种汉字倒过来输出.这里要处理的每个汉字是由一个 N × N 的网格组成的,网格中的元素或者为字符 @ 或者为空格.而倒过来的汉 ...
- chromium ④
chromium的源码非常大,选择合适的点入手能省不少力气.在 win7下编译chromium中我曾提到学习chromium源码的一个小工程test_shell,代码目录在src/webkit/too ...
- CentOS部署PHP环境
1.安装apache yum -y install httpd httpd-devel 2.启动apache systemctl start httpd.service 检查apache状态 syst ...
- java.lang.OutOfMemoryError: GC overhead limit exceeded
前端请求:{"code":400,"message":"Handler dispatch failed; nested exception is ja ...
- foreman源NO_PUBKEY 6F8600B9563278F6
/etc/apt/sources.list.d/foreman.list # foreman deb http://deb.theforeman.org xenial stable 一条命令解决 ap ...
- L2-001. 紧急救援(最短路的变形)*
L2-001. 紧急救援 #include <cstdio> #include <algorithm> using namespace std; ; int const INF ...
- 存在重复元素(python3)
存在重复元素(描述一): 给定一个整数数组,判断是否存在重复元素.如果任何值在数组中出现至少两次,函数返回 true:如果数组中每个元素都不相同,则返回 false. 示例 1: 输入: [1,2,3 ...
- 【Python】多线程-1
#练习:创建一个线程 from threading import Thread import time def run(a = None, b = None) : print a, b time.sl ...