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的缩 ...
随机推荐
- 网络对抗实验一 逆向及Bof基础实践
网络对抗实验一 逆向及Bof基础实践 一.实验目的 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. ...
- 扩容Linux文件系统
扩容Linux文件系统 腾讯云 云硬盘扩容 https://cloud.tencent.com/product/cbs https://cloud.tencent.com/document/produ ...
- mac系统上mysql开启外网访问
1.首先本地连到数据库在"mysql"库下把user表里User=root的那一行,把Hosts从"locahost"改成"%" 2.然后在 ...
- 266B
#include <stdio.h> #define MAXSIZE 1024 char que[MAXSIZE]; int main() { int n, t; scanf(" ...
- hbase 快速开发
hbase是一个分布式的NoSQL,部署起来配置很多东西,开发起来太慢,可以使用docker快速搭建环境 gs@gs-virtual-machine:~$ sudo docker run -ti ha ...
- 使用git将项目上传到github（最简单方法）
首先你需要一个github账号,所有还没有的话先去注册吧! https://github.com/ 我们使用git需要先安装git工具,这里给出下载地址,下载后一路直接安装即可: https://gi ...
- 外网无法ip访问服务器解决方法 (原)
示例ip:119.75.1.1 windows server示例 一.检查网络是否通畅 打开dos窗口(windows+r , 输入cmd回车 )输入命令: ping 119.75 ...
- python模块的学习
# time 模块 import time print(time.time()) #当前的时间挫 #time.sleep(3) #休息3秒钟,这3秒cpu不工作的 print(time.gmtime( ...
- Install rapyuta Robot Cloud Engine on Ubuntu12.04
Prepare on ubuntu12.04 sudo apt-get install vim Install fuerte ROS sudo sh -c 'echo "deb http:/ ...
- RxJava 详解——简洁的异步操作（二）
上次说的两个例子,事件的发出和消费都是在同一个线程的.如果只用上面的方法,实现出来的只是一个同步的观察者模式.观察者模式本身的目的就是异步机制,因此异步对于 RxJava 是至关重要的.而要实现异步, ...