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的更多相关文章

  1. JavaScript学习笔记(三)——留言板知操纵DOM节点

    用JavaScript写了一个简易的留言板,暂不涉及数据库接入等. 1.功能以及流程 主要功能即为留言,用两个文本框接受用户输入的用户名以及留言内容,然后通过"提交留言"按钮将用户 ...

  2. js的dom测试及实例代码

    js的dom测试及实例代码 一.总结 一句话总结: 1.需要记得 创建 标签和创建文本节点都是document的活:document.createTextNode("Rockets的姚明&q ...

  3. js的dom操作(整理)(转)

    js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...

  4. js的DOM操作整理(整理)

    js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...

  5. Virtual DOM 系列一:认识虚拟DOM

    1. 什么是Virtual DOM? Virtual DOM(虚拟DOM)是指用JS模拟DOM结构.本质上来讲VD是一个JS对象,并且至少包含三个属性:tag(html标签),props(标签的属性, ...

  6. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  7. load/domContentLoaded事件、异步/延迟Js 与DOM解析

    一.DOMContentLoaded 与 load事件 关于load和DOMContentLoaded事件,mdn对于它们是这样描述的: DOMContentLoaded mdn文档地址:https: ...

  8. js的DOM对象

    1.js的Array对象           ** 创建数组(三种)                          - var arr1 = [1,2,3];                    ...

  9. 高效率http页面优化法则一【JS对DOM的操作】

    高效http页面优化法则一很多人都认为JS的效率太慢了,都不愿意用js来实现相对困难一点的程序逻辑.在这里我要说的是其实js的效率并不慢,慢的是DOM,如果操作好DOM,你的js效率将提高接近千倍(这 ...

随机推荐

  1. 《十天学会单片机和C语言编程》

    <十天学会单片机和C语言编程> 大家注意了这个文件只有最新版迅雷可以下载,下面的lesson几就是第几课.点击右键使用迅雷下载. ed2k://|file|[十天学会单片机和C语言编程]. ...

  2. <Web Crawler><Java><thread-safe queue>

    Basic Solution The simplest way is to build a web crawler that runs on a single machine with single ...

  3. L252

    How often have you heard the saying, "Stop and smell the roses?" Odds are, you've come acr ...

  4. 七、在U-boot中让LCD显示图片

    1. 增加Nandflash读取代码 因为要显示图片,而图片明显是放在Nandflash中比较合适,因此需要有能够操作Nandflash的函数.在U-boot中已经有能操作Nandflash的函数了, ...

  5. ChinaCock界面控件介绍-CCGridPictureEditor

    CCGridPictureEditor如其名,网格图片编辑控件,实现利用一个网格来显示多张图片的缩略图,这是一个非常实用的控件,实现类似微信朋友圈中发布多张图片的功能. 在没有这个控件之前,我都是用D ...

  6. 2019-03-26-day019-面向对象耦合与组合

    作业 #对象的耦合 class Circle: def __init__(self,r): self.r = r def area(self): return 3.14*self.r**2 def p ...

  7. Vue.js 2.0生命周期

    1.beforeCreate 组建实例刚被创建,属性和方法等都还没有 2.created         实例已经创建完成,属性已经绑定 3.beforeMount  模板编译之前 4.mounted ...

  8. C++ API方式连接mysql数据库实现增删改查

    这里复制的 http://www.bitscn.com/pdb/mysql/201407/226252.html 一.环境配置 1,装好mysql,新建一个C++控制台工程(从最简单的弄起,这个会了, ...

  9. 【Python】进程-控制块

    一.进程控制块 PCB (Process Control Block): 存放进程的管理和控制信息的数据结构称为进程控制块.它是进程管理和控制的最重要的数据结构,每一个进程均有一个PCB,在创建进程时 ...

  10. rtsp 学习之路一

    http://baijiahao.baidu.com/s?id=1587715130853990653&wfr=spider&for=pc https://www.cnblogs.co ...