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. MPX

    Pre-processing: MPX使用的滤波器是自适应性的‘Wiener’ filter.有时甚至不用MPX,因为尽管Wiener 所引起的扰乱是可以忽略的,有时发现滤波并不能很好地提高拾取的精度 ...

  2. RocketMq源码学习(一) nameService

    public class NamesrvStartup { public static Properties properties = null; public static CommandLine ...

  3. L273 NCAA

    On Friday, the system that prevents college athletes from being compensated for their labor (beyond ...

  4. js 自执行匿名函数(转载)

    自执行匿名函数: 常见格式:(function() { /* code */ })(); 解释:包围函数(function(){})的第一对括号向脚本返回未命名的函数,随后一对空括号立即执行返回的未命 ...

  5. os与操作系统进行交互,sys解释器相关,random随机数,shutil解压和压缩

    1.os 与操作系统相关 对文件的处理 对路径的处理 import os#主要用于与操作系统进行交互 掌握: print(os.makedirs('a/b/c'))#创建目录 可用递归创建 print ...

  6. mysql取差集、交集、并集

    mysql取差集.交集.并集 博客分类: Mysql数据库 需求:从两个不同的结果集(一个是子集,一个是父集),字段为电话号码phone_number,找出父集中缺少的电话号码,以明确用户身份. 结合 ...

  7. python day11 ——1. 函数名的使⽤ 2. 闭包 3. 迭代器

    ⼀. 函数名的运⽤. 1.函数名的内存地址 def func():    print("呵呵") print(func) 结果: <function func at 0x11 ...

  8. h5 手机端适配问题汇总

    1.uc手机浏览器竟然没有 sessionstorage 醉了 2.opera 浏览器  能识别 a标签中href的  javascript:; 为网址  ,  55555 3.safari 的弹框如 ...

  9. Redis持久化--RDB+AOF(转)

    1.Redis两种持久化方式 RDB 执行机制:快照,直接将databases中的key-value的二进制形式存储在了rdb文件中 优点:性能较高(因为是快照,且执行频率比aof低,而且rdb文件中 ...

  10. Light OJ 1296:Again Stone Game(SG函数打表找规律)

    Alice and Bob are playing a stone game. Initially there are n piles of stones and each pile contains ...