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. MySq:权限表

    权限表 一.介绍 ①MySQL服务器通过权限表来控制用户对数据库的访问,权限表存放在MySQL数据库中,由mysql_install_db脚本初始化.②存储账户权限信息表主要有:user.db.hos ...

  2. ‘’.join(列表)--列表转化为一个语句。 strip()删除掉str中的左右的空白字符

    1和2相比,删除掉了str左右的空白字符,2和3相比,删除掉了上下的空白字符

  3. Jsoup的学习

    一 . 什么是jsoup jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址.HTML文本内容.它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQuery的操作方法来 ...

  4. APP注册&登陆 逻辑细节

    前言:有多少用户愿意注册登陆,决定了一款产品的最大活跃度. 用户登陆注册系统分为两大类: 自建用户系统:邮箱/手机号/用户名/二维码/人脸识别/指纹 第三方授权用户系统:微信/微博/支付包/豆瓣/Fa ...

  5. Spring Boot 揭秘与实战(二) 数据存储篇 - ElasticSearch

    文章目录 1. 版本须知 2. 环境依赖 3. 数据源 3.1. 方案一 使用 Spring Boot 默认配置 3.2. 方案二 手动创建 4. 业务操作5. 总结 4.1. 实体对象 4.2. D ...

  6. react写单选按钮或table标签

    首先,原理是一样的: class Loca_choose_wrap extends Component{ constructor(){ super(); this.state={ port_name: ...

  7. POJ3070 Fibonacci(矩阵快速幂加速递推)【模板题】

    题目链接:传送门 题目大意: 求斐波那契数列第n项F(n). (F(0) = 0, F(1) = 1, 0 ≤ n ≤ 109) 思路: 用矩阵乘法加速递推. 算法竞赛进阶指南的模板: #includ ...

  8. C语言--第四周作业评分和总结(5班)

    作业链接:https://edu.cnblogs.com/campus/hljkj/CS2017-5/homework/1129 一.评分要求 要求1 完成PTA第四周所有题(20分). 要求2 4道 ...

  9. HDU 1873 看病要排队 优先队列

    Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s) ...

  10. [Educational Codeforces Round 55 (Rated for Div. 2)][C. Multi-Subject Competition]

    https://codeforc.es/contest/1082/problem/C 题目大意:有m个类型,n个人,每个人有一个所属类型k和一个能力v,要求所选的类型的人个数相等并且使v总和最大(n, ...