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. form 表单模板

    <div class="modal-dialog modal-lg"> //大布局modal-lg <div class="modal-content& ...

  2. table添加行

    需求是要实现表格的动态增加与删除,并且保留标题行和首行,找了半天jq插件,没找到合适的,所以自己写了个demo <!DOCTYPE html> <html> <head& ...

  3. Tsi721信号及处理(转)

    reference: https://blog.csdn.net/shanghaiqianlun/article/details/50545581 1.      PCIe信号 名称 类型 描述 PC ...

  4. 7series 逻辑单元理解(更新中)

    7series 逻辑单元理解 ug768和ug799文档介绍了7系列芯片中包含的基本逻辑单元,对其中常用的单元,进行下分析. 1.IOBUF单元 (1)真值表 (2)用途 the  design  e ...

  5. Python实现登陆的功能

    import datetimetoday=datetime.datetime.today()# 获取当前时间for i in range(3): username=input("请输入用户名 ...

  6. 20165326 java实验二

    2017-2018-2 20165326实验二<Java面向对象程序设计>实验报告 课程:Java程序设计 班级:1653班 姓名:陈卓 学号:20165326 成绩:指导教师:娄嘉鹏 实 ...

  7. 【webdriver自动化】使用数据驱动的方式实现登录多个163账号

    练习1:使用数据驱动的方式,登录多个邮箱账号 login_info.txt: youxiang_99@163.com,XXXX youxiang_100@163.com,XXXX main.py: f ...

  8. 在使用MyCat和MySqL时的错误总结

    在mysql中,无法连接虚拟机中的mysql. 原因:防火墙没有关闭 解决方案:service iptables stop 在mycat中,无法打开数据库的表, 原因:mycat在配置文件中设置的是自 ...

  9. JAVA接口传递参数(POST),从接口接收数据(JSON) -----记录

    1,给接口传递json格式的数据 import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOEx ...

  10. 获取Map的key和value的两种方法

    //使用迭代器,获取key; /*Iterator<String> iter = map.keySet().iterator(); while(iter.hasNext()){ Strin ...