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的缩 ...
随机推荐
- RoR - Advanced Querying
Seeding the Database: db/seed.rb 可以提供预设data rake db:seed #seeds.rb Person.create! [ {first_name : &q ...
- Docker入门5------生产力工具docker-compose
参考: https://www.cnblogs.com/neptunemoon/p/6512121.html 待续 安装参见docker-compose官网: https://github.com/d ...
- vs自定义类模板
.找到VS安装目录,我的目录是:C:Program Files (x86)Microsoft Visual Studio 12.0 .在C:Program Files (x86)Microsoft V ...
- java框架之SpringCloud(6)-Zuul路由网关
介绍 Zuul 包含了对请求的路由和过滤两个最重要的功能: 其中路由功能服务将外部请求转发到具体的微服务实例上,是实现外部访问统一入口的基础.而过滤的功能则负责对请求的处理过程进行干预,是实现请求校验 ...
- python基础之 初识函数&函数进阶
函数基础部分 1.什么是函数? 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段.函数能提高应用的模块性,和代码的重复利用率. 2.定义函数 定义:def 关键词开头,空格之后接函数名 ...
- Kubernetes 网络改进的三项实践分享
自研CNI IPAM插件 解决K8s功能问题 首先,在功能方面,Kubernetes 网络模型由于IP不固定,无法对IP资源进行精细管控,无法使用基于IP的监控和基于IP的安全策略,此外,一些IP发现 ...
- codeforces 985B Switches and Lamps
题意: 有n个开关,m盏灯. 一个开关可以控制多个灯,一旦一个灯开了之后,之后再对这个灯的操作就没用了. 问是否存在一个开关,去掉了这个开关之后,按下其它开关之后所有的灯还是亮的. 思路: 首先统计每 ...
- 时间序列预测——Tensorflow.Keras.LSTM
1.测试数据下载 https://datamarket.com/data/set/22w6/portland-oregon-average-monthly-bus-ridership-100-janu ...
- 看懂MSSQL执行计划，分析SQL语句执行情况
打开SQL执行计划窗口 执行计划的图表是从右向左看的 SQL Server有几种方式查找数据记录 [Table Scan] 表扫描(最慢),对表记录逐行进行检查 [Clustered Index Sc ...
- BIOS备忘录之ASL code常用知识点
_HID:device唯一 _STA:决定device在不在(在DM下面能不能看到) _CRS:描述分配给device的资源 _INI:在OSPM加载描述表的时候运行一次(比如,如果要根据不同情况给d ...