DOM Access and Manipulation JS 操纵DOM
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的更多相关文章
- JavaScript学习笔记(三)——留言板知操纵DOM节点
用JavaScript写了一个简易的留言板,暂不涉及数据库接入等. 1.功能以及流程 主要功能即为留言,用两个文本框接受用户输入的用户名以及留言内容,然后通过"提交留言"按钮将用户 ...
- js的dom测试及实例代码
js的dom测试及实例代码 一.总结 一句话总结: 1.需要记得 创建 标签和创建文本节点都是document的活:document.createTextNode("Rockets的姚明&q ...
- js的dom操作(整理)(转)
js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...
- js的DOM操作整理(整理)
js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...
- Virtual DOM 系列一:认识虚拟DOM
1. 什么是Virtual DOM? Virtual DOM(虚拟DOM)是指用JS模拟DOM结构.本质上来讲VD是一个JS对象,并且至少包含三个属性:tag(html标签),props(标签的属性, ...
- jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...
- load/domContentLoaded事件、异步/延迟Js 与DOM解析
一.DOMContentLoaded 与 load事件 关于load和DOMContentLoaded事件,mdn对于它们是这样描述的: DOMContentLoaded mdn文档地址:https: ...
- js的DOM对象
1.js的Array对象 ** 创建数组(三种) - var arr1 = [1,2,3]; ...
- 高效率http页面优化法则一【JS对DOM的操作】
高效http页面优化法则一很多人都认为JS的效率太慢了,都不愿意用js来实现相对困难一点的程序逻辑.在这里我要说的是其实js的效率并不慢,慢的是DOM,如果操作好DOM,你的js效率将提高接近千倍(这 ...
随机推荐
- delete和delete[] 区别
// DeleteAndDelete[].cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <Windows.h> ...
- 自动化测试工具Telerik Test Studio发布R1 2019|附下载
Telerik Test Studio是一个用于功能性Web.桌面和移动测试的直观测试自动化工具,它能轻松地实现自动化测试.同时会为GUI.性能.加载和API测试提供完整的自动化测试解决方案. [Te ...
- python的list和tuple
list Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 比如,列出班里所有同学的名字,就可以用一个list表示: >>> ...
- string使用方法
转载自:https://blog.csdn.net/tengfei461807914/article/details/52203202 使用场合: string是C++标准库的一个重要的部分,主要用于 ...
- L317 电子烟
Why it’s so hard to talk about e-cigarette risks A growing proportion of American adults consider va ...
- python储存数据的方式
python储存数据的方式2017年10月13日 23:38:10 Nick_Spider 阅读数:59286 标签: redis 数据库 爬虫 存储 结构 更多 个人分类: 数据库 爬虫 pytho ...
- 2019-03-21-day016-正则表达式
昨日内容回顾 基本数据类型 编码 流程控制 文件操作 函数-内置函数 装饰器 常用模块: 序列化模块 随机数模块 os模块 sys模块 时间模块 hashlib collections re 1天半 ...
- winform 异性窗体的实现
效果图 首先需要在vs里添加控件 AlphaForm.dll 添加完了有这来两个控件 1.把第二个控件拖入窗体里把窗体铺满 2.找一张至少有一个闭合图形的透明图片 设置为AlphaFormTrans ...
- swiper 组件的高度设置问题
1.swiper组件直接运用时, .content>swiper{height:100%} 是不起作用的. 正确的做法是: swiper{ height: 100vh; } // 或者 < ...
- POJ 2234 Matches Game(Nim博弈裸题)
Description Here is a simple game. In this game, there are several piles of matches and two players. ...