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的缩 ...
随机推荐
- post body 传输参数
postman 示例: 请求地址:http://member-system-api.dd01.work/api/inApp 设置headers头:Content-Type applicat ...
- 洛谷P3167 通配符匹配 [CQOI2014] 字符串
正解:哈希+dp/AC自动机/kmp 解题报告: 传送门! 这题解法挺多的,所以就分别港下好了QwQ 首先港下hash+dp趴 可以考虑设dp式f[i][j]:匹配到第i个通配符了,下面那个字符串匹配 ...
- 小程序map组件默认层级最高，并且不能设置的解决方案
map组件默认在最上面,若要设置像ofo那样的按钮有两个方法,一是用控件设置,控件就是controls属性,控件只能显示图片,不能显示文字之类的.二是用cover-view组件,这个组件就是悬浮在一些 ...
- ACFS-9459: ADVM/ACFS is not supported on this OS version
环境:RHEL 7.3 + Oracle 12.2.0.1 RAC 现象:acfs资源状态不正常,asmca图形也没有acfs相关内容,无法使用acfs. 1.具体现象 2.定位bug 3.解决问题 ...
- reactjs中使用高德地图计算两个经纬度之间的距离
第一步下载依赖 npm install --save react-amap 第二步,在组件中使用 import React, { Component } from 'react' import { L ...
- SV coverage
covergroup是对coverage model的一种包装,每个covergroup可以包含: 1) sync event来触发采样, 2) 很多coverpoint, 3) cross cove ...
- MSG结构体和WndProc窗口过程详解
MSG结构体和WndProc窗口过程对于Windows编程非常重要,如果不了解它们,可以说就没有学会Windows编程. MSG结构体 MSG 结构体用来表示一条消息,各个字段的含义如下: typed ...
- 基于Groovy+HttpRestful的超轻量级的接口测试用例配置的设计方案及DEMO实现
目标 设计一个轻量级测试用例框架,接口测试编写者只需要编写测试用例相关的内容(入参及结果校验),不需要理会系统的实现,不需要写跟测试校验无关的内容. 思路 测试用例分析 一个用例由以下部分组成: (1 ...
- 微信小程序一些demo链接地址
校园小情书小程序前端+后端源码 https://www.douban.com/group/topic/116974400/ 小程序源码疯狂猜成语小程序源码UI美观 https://www.douban ...
- 浅析vue实例的生命周期（生命周期钩子）
“每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等” ,在不同的生命周期内会经历不同的钩子函数(生命周期 ...