JavaScript + HTML DOM (keep for myself)
1.改变 HTML 输出流
JavaScript 能够创建动态的 HTML 内容
eg.
<script>
document.write(Date());
</script>
绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。
2.改变 HTML 内容
如需改变 HTML 元素的内容,请使用这个语法:
如需改变 HTML 元素的属性,请使用这个语法:
如需改变 HTML 元素的样式,请使用这个语法:
HTML 事件的例子:
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时......
onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
(3)onchange 事件
<input type="text" id="fname" onchange="upperCase()">
(4)onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
(5)onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分.
(1)addEventListener() 方法用于向指定元素添加事件句柄。
(2)可以向一个元素添加多个事件句柄,且添加的事件句柄不会覆盖已存在的事件句柄
(3)可以向同一个元素添加多个同类型的事件句柄,如:两个 "click" 事件,顺序执行
(4)可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。
(5)addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。
(6)通过使用 addEventListener() 方法, JavaScript 从 HTML 标记中分离开来,可读性更强。尤其在没有控制HTML标记时,也可以添加事件监听。
(7)使用 removeEventListener() 方法来移除事件的监听。
语法
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
example:
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
</script>
document.getElementById("demo").innerHTML = sometext;
});
传递参数:
方法:当传递参数值时,使用"匿名函数"调用带参数的函数。
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
})
选择事件冒泡还是事件捕获?
冒泡:事件触发与执行为由内到外;
捕获:事件触发与执行为由外到内。
useCapture默认为false(冒泡),true为捕获。
removeEventListener() 方法:
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄
JavaScript + HTML DOM (keep for myself)的更多相关文章
- javascript --- javascript与DOM
javascript与DOM: 我们来个例子,一个HTML里包含一段文本和一个无序的列表. <p id="intro">My first paragraph...< ...
- JavaScript与DOM
文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API.Javascript和D ...
- Javascript中DOM技术的的简单学习
第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...
- JavaScript与DOM的关系
JavaScript与浏览器的工作 1.浏览器获取并加载你的页面,从上至下解析它的内容. 遇到JavaScript时,浏览器会解析代码,检查它的正确性,然后执行代码. 浏览器还会建立一个HTML页面的 ...
- JavaScript网站设计实践(四)编写about.html页面,利用JavaScript和DOM,选择性的显示和隐藏DIV元素
一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...
- JavaScript学习笔记(2)——JavaScript和DOM的关系
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的 ...
- JavaScript HTML DOM 元素(节点)
JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...
- JavaScript HTML DOM EventListener
JavaScript HTML DOM EventListener addEventListener() 方法 实例 点用户点击按钮时触发监听事件: document.getElementById(& ...
- JavaScript HTML DOM 事件
JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应. 实例 Mouse Over Me 对事件做出反应 我们可以在事件发生时执行 ...
- JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS HTML DOM 允许 JavaScript 改变 HTML 元素的样式. 改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法 ...
随机推荐
- [原]Django调试工具--django-debug-toolbar
请摒弃简单粗暴的print --马云 我比较习惯在windows中安装pycharm开发,项目部署在虚拟机中,在本地浏览器中查看效果,这种方式在调试上会有点麻烦,django-debug-toolba ...
- PHP代码优化的53个细节
PHP代码优化的53个细节,常见而重要的php优化策略. 用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量,单引号则不会,注意:只有echo能这么做,它是一 ...
- Delphi中nil和null的区别
nil:空指针,空地址,对象也是指针,可以object := nil;null:是一个未定义值的变量,既不是0也不代表空字符串,它是未定义的.
- 在openSUSE13.2上gem install rails -v 4.1成功,但是之后不存在rails命令解决
解决方案为,不要用sudo gem install就好了,卧槽
- WPF socket通讯 UDP接收消息
客户端: private Socket socket; private IPEndPoint ipEndPoint; private void sendMessageHandler() { //服务端 ...
- linux动态库编译和使用详细剖析
引言 重点讲述linux上使用gcc编译动态库的一些操作.并且对其深入的案例分析.最后介绍一下动态库插件技术, 让代码向后兼容.关于linux上使用gcc基础编译, 预编译,编译,生成机械码最后链接输 ...
- 算法:C++排列组合
题目:给定1-n数字,排列组合. 解法:递归.第一个数字有n种选择,第二个数字有n-1种选择,依次递归排列输出.用数组表示n个数字,用过的数字置0. 实现语言:C++ #include <ios ...
- Collaborative filtering
Collaborative filtering, 即协同过滤,是一种新颖的技术.最早于1989年就提出来了,直到21世纪才得到产业性的应用.应用上的代表在国外有Amazon.com,Last. ...
- oracle 查询今天哪个表增加的数据多
一.创建一个表 create table A( TABLE_NAME VARCHAR2(200), COUNT_NUM NUMBER) 二.创建一个存储过程create or replace ...
- linux下安装protobuf教程+示例(详细)
(.pb.h:9:42: fatal error: google/protobuf/stubs/common.h: No such file or directory 看这个就应该知道是没有找到头文件 ...