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. linux下Mysql多实例实现

    什么是MySQL多实例 MySQL多实例就是在一台机器上开启多个不同的服务端口(如:3306,3307),运行多个MySQL服务进程,通过不同的socket监听不同的服务端口来提供各自的服务:: My ...

  2. Centos7安装RabbitMQ解决Erlang依赖报错

    通过yum等软件仓库都可以直接安装RabbitMQ,但版本一般都较为保守. RabbitMQ官网提供了新版的rpm包(http://www.rabbitmq.com/download.html),但是 ...

  3. SharePoint Framework 企业向导(二)

    博客地址:http://blog.csdn.net/FoxDave 开发者视角 SharePoint开发者,无论是新手还是有经验的,都可以从SPFx中获取一些东西.当前SPFx的发布版本专注于以一 ...

  4. linux程序的常用保护机制

    操作系统提供了许多安全机制来尝试降低或阻止缓冲区溢出攻击带来的安全风险,包括DEP.ASLR等.在编写漏洞利用代码的时候,需要特别注意目标进程是否开启了DEP(Linux下对应NX).ASLR(Lin ...

  5. Github笔记(1)

    学习目的: 借助GitHub托管项目代码 GitHub官方介绍: 中文:http://www.cnblogs.com/twtp/articles/5264073.html 英文:https://gui ...

  6. opengl学习,一篇就够你基本了解

    http://blog.csdn.net/iduosi/article/details/7835624

  7. 百练6183-人民币支付-2014正式A题

    A:人民币支付 总时间限制:  1000ms 内存限制:  65536kB 描述 从键盘输入一指定金额(以元为单位,如345),然后输出支付该金额的各种面额的人民币数量,显示100元,50元,20元, ...

  8. django,uwsgi, nginx部署项目

    在liunx中环境中 对于nginx来说: 1.先安装nginx sudo apt-get install nginx 2.启动nginx服务 sudo /etc/init.d/nginx resta ...

  9. Unity反射探针用法教程

    Unity 3D反射探针 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享.心 ...

  10. 田螺便利店—PyCharm安装第三方库

    PyCharm安装第三方库是十分方便的,无需pip或其他工具,平台就自带了这个功能而且操作十分简便.如下: 1. 打开软件,点击左上角“文件(File)”—>“设置(setting)”: 2. ...