JavaScript的DOM对象
HTML DOM （文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
HTML DOM 树
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
查找 HTML 元素
通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=new HTML
改变 HTML 属性
如需改变 HTML 元素的属性，请使用这个语法。
注：attribute表示 属性的名字。
document.getElementById(id).attribute=new value
改变 HTML 样式
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById("p1").style.color = "red"; document.getElementById("p2").style.fontFamily="FangSong"; document.getElementById("p2").style.fontSize = "40px";
HTML DOM 事件
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
鼠标点击：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>点击事件</title>
6 <script type="text/javascript">
7 function changeText() {
8 document.getElementById("c1").innerHTML = "谢谢点击";
9 }
10 </script>
11 </head>
12 <body>
13 <h1 onclick="this.innerHTML='谢谢'">点击文字试试看</h1>
14 <h2 id="c1" onclick="changeText();">点击文字试试看</h2>
15 <h3 id="c3" onclick="changeText1(this);">点击文字试试看</h3>
16
17 <p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>
18 <button onclick="displayDate();">点击</button>
19 <button id="b1">点击</button>
20 <p id="demo"></p>
21 <script type="text/javascript">
22 function changeText() {
23 document.getElementById("c1").innerHTML = "谢谢点击";
24 }
25
26 function changeText1(id) {
27 id.innerHTML = "也行";
28 }
29
30 function displayDate() {
31 document.getElementById("demo").innerHTML = Date();
32 }
33
34 document.getElementById("b1").onclick = function() {play();}
35 function play() {
36 document.getElementById("demo").innerHTML = Date();
37 }
38 </script>
39 </body>
40 </html>
网页加载onload 和 onunload 事件：
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
<body onload="checkCookies()">
onchange事件：
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。
<input type="text" id="fname" onchange="upperCase()">
JavaScript的DOM对象的更多相关文章
- javaScript操作DOM对象（看三遍，敲三遍，写三遍！ 不会你找我）！！
DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API 使用javaScript操作DOM对象通常分为三类:1.DOM CORE 2.HTM ...
- 第四章 JavaScript操作DOM对象
第四章 JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...
- JavaScript之DOM对象的获取
之前我们讲过JavaScript之DOM对象获取的两篇文章,本文是该系列文章之三,点击回顾上两篇文章能更好地理解本文.<JavaScript之DOM对象的获取(一)>: <JavaS ...
- JavaScript BOM DOM 对象
title: JavaScript BOM DOM 对象 tags: JavaScript --- browser object model document onject model BOM对象 w ...
- JavaScript基础--DOM对象（十三）:（windows对象：history\location\navigator\screen\event）
DOM编程1.为什么要学习DOM(1) 通过dom编程,我们可以写出各种网页游戏(2)dom编程也是ajax的重要基础2.DOM编程介绍DOM = Document Object Model(文档对象 ...
- JavaScript操作DOM对象
js的精华即是操作DOM对象 [1]先看代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...
- JavaScript之DOM对象获取（1）
我们在操作html中的节点的时候,第一步就需要获取到对应节点(元素),才能有后续的操作.获取节点的方式有很多 1.document.getElementById(‘id值’) 通过id精确的选中某一个 ...
- JavaScript 操作DOM对象
1)JavaScript 操作DOM對象 1.DOM:是Document Object Model 的缩写,及文档对象模型 2.DOM通常分为三类:DOM Core(核心).HTML-DOM 和 ...
- jquery对象和javascript的dom对象转换
Jquery框架为jquery对象定义了独立使用的方法和属性,它无法直接调用dom对象的方法,dom对象也无法直接调用jquery对象的方法和属性. Jquery对象和dom对象是可以相互转换的,因为 ...
- JQuery制作网页—— 第三章 JavaScript操作DOM对象
1. DOM:Document Object Model(文档对象模型): DOM操作: ●DOM是Document Object Model的缩 ...
随机推荐
- Xcode工程编译错误之iOS开发之Xcode9报错 Compiling IB documents for earlier than iOS7 is no longer supported.
概要: 在我们升级到Xcode9时,最低的编译版本为iOS8,但是在使用一些SDK的时候就会报出Compiling IB documents for earlier than iOS7 is no l ...
- 数组/Array/Tuple/yield
数组 如果需要使用同一类型的多个对象,就可以考虑使用集合和数组.如果需要使用不同类型的多个对象,可以考虑使用Tuple(元组) 数组的声明 在声明数组时,应先定义数组元素中的类型,其后是一对空方括号和 ...
- 百度的富文本编辑器UEditor批量添加图片自动加上宽度和高度的属性
若是没有对编辑器做任何配置直接添加图片的话,显示的html内容如下图所示:它会显示出原图片尺寸 所以必须要对图片的初始显示尺寸做控制:ueditor文件中找到image.js文件 在image.js中 ...
- 使用JavaScript实现在页面上所有内容加载完之前一直显示loading...页面
Html <body class="is-loading"> <div class="curtain"> <div class=& ...
- select，poll，epoll
1. Epoll 是何方神圣? Epoll 可是当前在 Linux 下开发大规模并发网络程序的热门人选, Epoll 在 Linux2.6 内核中正式引入,和 select 相似,其实都 I/O 多路 ...
- 关于Java8 Stream流的利与弊 Java初学者，大神勿喷
题目需求: 1:第一个队伍只要名字为3个字成员的姓名,存储到新集合 2:第一个队伍筛选之后只要前3人:存储到一个新集合 3:第2个队伍只要姓张的成员姓名:存储到一个新集合 4:第2个队伍不要前2人,存 ...
- st2_057
http://vulapps.evalbug.com/s_struts2_s2-057/ 这大概是全网复现st2-057环境最简单的操作了. 不过首先,你需要安装过docker,安装方法参考官方文档h ...
- fiddler学习总结--fiddler抓包篡改数据请求
操作步骤: 步骤一.在fiddler的命令行中输入需要拦截的地址:bpu https://www.baidu.com 记得按一下回车键 步骤二.在百度搜索栏中,输入“火影忍者”,页面会一直处于加载的状 ...
- 擦他丫的，今天在Django项目中引用静态文件jQuery.js 就是引入报错，终于找到原因了！
擦 ,今天在Django项目中引用静态文件jQuery.js 就是引入报错,终于找到原因了! 问题在于我使用的谷歌浏览器,默认使用了缓存,导致每次访问同一个url时,都返回的是缓存里面的东西.通过谷歌 ...
- Delphi中的消息 （转载）
消息是Windows发出的一个通知,它告诉应用程序某个事件发生了.在Delphi中,大多数情况下Windows的消息被封装在VCL的事件中,我们只需处理相应的VCL事件就可以了,但如果我们需要编写自己 ...