JavaScript HTML DOM 入门详解
HTML DOM （文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
HTML DOM 树
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
dom中包含元素,属性,文本三种节点,dom应用非常广泛,掌握好了对于学习js有很大帮助.
查找 HTML 元素
通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
提示：通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
实例:
<script>
document.write(Date());
</script>
输出:Wed Dec 11 2013 22:58:18 GMT+0800 (CST)
提示：绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。
改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=new HTML
实例
本例改变了 <p> 元素的内容：
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
改变 HTML 属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=new value
<html>
<body>
<body>
<p id="p2" class="p2class">test</p>
<script>
document.getElementById("p2").setAttribute("class","yes");
alert(document.getElementById("p2").getAttribute("class"));
//document.getElementById("p2").className="yes";//同上面等效
</script>
</body>
</body>
</html>
实际应用:
<html>
<body>
<p id="p1">这里是文本内容</p>
<button onclick="see()">显示文本</button>
<input type="button" onclick="notsee()" value="隐藏文本"></input>
<script type="text/javascript">
function see(){
document.getElementById("p1").style.visibility="visible";
}
function notsee(){
document.getElementById("p1").style.visibility="hidden";
}
</script>
</body>
</html>
JavaScript HTML DOM 事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
对事件做出反应
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
onclick=JavaScript
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
实例:
<html>
<body>
<p onclick="this.innerHTML='thank you for click!'">please click this! </p>
<span onclick="changeText(this)">please click here!!</span>
<script>
function changeText(id){
id.innerHTML="yes,thank you!!";
}
</script>
</body>
</html>
向HTML元素分配事件的方法:
１.HTML 事件属性
如需向 HTML 元素分配事件，您可以使用事件属性。
实例
向 button 元素分配 onclick 事件：
<button onclick="changeText(this)">点击这里</button>
２.使用 HTML DOM 来分配事件
HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件：
实例
向 button 元素分配 onclick 事件：
<html>
<body>
<p id="p1">this is text</p>
<script type="text/javascript">//定义一个函数,单击时会触发此函数
document.getElementById("p1").onclick=function(){
this.innerHTML="yes!!";
}
</script>
</body>
</html>
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发,也常用于表单加载.
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
<html>
<body onload="checkCookie()">
<script type="text/javascript">
function checkCookie(){
if(navigator.cookieEnabled==true){
alert("cookie 已经启用!");
}else{
alert("cookie 未启用!");
}
}
</script>
</body>
</html>
onchange 事件
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。
实例:
<html>
<body>
<input id="personName" onchange="check_change()"></input>
//自动检测输入框中的内容,只要是小写字母,都会转成大写字母.
<script type="text/javascript">
function check_change(){
var name=document.getElementById("personName");
name.value=name.value.toUpperCase();
alert(name.value);
}
</script>
</body>
</html>
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
实例:
<html>
<body>
<textarea id="txt" name="profile" onmouseover="mover()" onmouseout="mout()"> </textarea>
<script type="text/javascript">
function mover(){
document.getElementById("txt").innerHTML="I'm here!";
};
function mout(){
document.getElementById("txt").innerHTML="I'm away!";
}
</script>
</body>
</html>
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
实例:
<html>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}
function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>
</body>
onfocus函数,获取焦点:
实例:
<html>
<head>
<script>
function myFunction(x)
{
x.style.background="yellow";
}
</script>
</head>
<body>
请输入英文字符：<input type="text" onfocus="myFunction(this)">
<p>当输入字段获得焦点时，会触发改变背景颜色的函数。</p>
</body>
</html>
还有很多事件值得学习,参考链接:http://www.w3school.com.cn/htmldom/dom_obj_event.asp
JavaScript HTML DOM 入门详解的更多相关文章
- JavaScript 的DOM操作详解
内容概要 DOM之查找标签 基本查找 间接查找 节点操作 获取值操作 class操作 样式操作 事件 内置参数this 事件练习 内容详细 DOM操作 DOM(Document Object Mode ...
- JavaScript 循环语句入门详解
JavaScript Switch 语句 语法 switch(n) { case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: n 与 case ...
- JavaScript正则表达式详解（二）JavaScript中正则表达式函数详解
二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...
- dom对象详解--document对象(二)
dom对象详解--style对象 style对象 style对象和document对象下的集合对象styleSheets有关系,styleSheets是文档中所有style对象的集合,这里讲解的 ...
- dom对象详解--document对象(一)
document对象 Document对象代表整个html文档,可用来访问页面中的所有元素,是最复杂的一个dom对象,可以说是学习好dom编程的关键所在. Document对象是window对象的一 ...
- Javascript 异步加载详解
Javascript 异步加载详解 本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy ...
- webpack入门详解
webpack入门详解(基于webpack 3.5.4 2017-8-22) webpack常用命令: webpack --display-error-details //执行打包 webpa ...
- Javascript常用的设计模式详解
Javascript常用的设计模式详解 阅读目录 一:理解工厂模式 二:理解单体模式 三:理解模块模式 四:理解代理模式 五:理解职责链模式 六:命令模式的理解: 七:模板方法模式 八:理解javas ...
- JavaScript进阶内容——BOM详解
JavaScript进阶内容--BOM详解 在上一篇文章中我们学习了DOM,接下来让我们先通过和DOM的对比来简单了解一下BOM 首先我们先来复习一下DOM: 文档对象模型 DOM把文档当作一个对象来 ...
随机推荐
- jQuery 重复加载，导致依赖于 jQuery的JS全部失效问题
父页面引入子页面,子页面引入jQuery.js文件,父页面JS依赖jQuery.js ,出现问题是,总提示JS对象无效.猜测jQuery加载顺序不是最早造成的. 父页面: 子页面: 从这里看 ,j ...
- Ios开发之多线程编程——NSThread
IOS程序在运行的时候是通过主线程来进行UI视图的更新和响应屏幕触摸事件,但是,在视图更新的时候,会有一些非常耗时的工作,这样我们会出现系统出现卡顿的现象,这是因为主线程堵塞造成的,这样会使用户体验非 ...
- GetTextMetrics与GetTextExtent的区别
GetTextMetrics:获取当前字体的信息 GetTextExtent:获取特定的字符串在屏幕上所占的宽度和高度 CDC::GetTextMetrics 作用: 返回当前设备描述表中的当前所用的 ...
- 设置虚拟机IP
重启虚拟机 重启后,查看虚拟机IP ip a 虚拟机已有自己的IP 输入虚拟机用户
- TCP/UDP常见端口
著名端口 端口号码 / 层 名称 注释 1 tcpmux TCP 端口服务多路复用 5 rje 远程作业入口 7 echo Echo 服务 9 discard 用于连接测试的空服务 11 systat ...
- 使用 GNU Libtool 创建库
这篇文档向大家介绍 GNU Libtool 的用途及基本使用方法,同时描述如何结合 GNU Autoconf 和 Automake 来使用 Libtool. 3 评论: 吴 小虎, 程序员, 天用唯勤 ...
- sublime同步文件与siderbar
有时候,打开了sider bar,想和Eclipse.idea一样,每打开一个tab,就可以在左侧的sider bar 目录上面看到我当前的位置,于是找到了一个插件. SyncedSideBar 安装 ...
- robot framework + python实现http接口自动化测试框架
https://www.jianshu.com/p/6d1e8cb90e7d 前言 下周即将展开一个http接口测试的需求,刚刚完成的java类接口测试工作中,由于之前犯懒,没有提前搭建好自动化回归测 ...
- [Canvas]新版箴言钟表
动态效果点此下载用浏览器打开观看. 本作Github地址:https://github.com/horn19782016/12MaximClock 图例: 代码: <!DOCTYPE html& ...
- asp.net对象合并
public class com { /// <summary> /// 把参数转为JSON字符串 /// </summary> /// <param name=&quo ...